javascript - One <span> per character in web-based text editor -


i'm developing web-based text editor without contenteditable, textarea or input things. biggest portion of work measure widths of text on left (right) side current caret position , moving caret in text.

for example when user presse down key current left-offset of caret must computed , on line below character which's position similar must found.

one convenient way use 1 dom element per character - can @ offsetleft property. also, positioning caret easier. actually, easier.

however i'm unsure performance implications. have seen technique (or similar) used on web-based javascript "ide"s , works fine there.

do have hints, tips?

do know other fast way how measure width of text. want avoid putting sections of line dom element , measuring width each time think slower.

edit: i'm asking main fact of existence of many dom elements. how measuring different thing.

i've seen done (unfortunately can't find link now) using canvas object , measuretext() method - can ask canvas "what size piece of text if rendered in style?" , use determine caret position on surrounding lines. performant, of course work in html5-capable browsers, , maybe not of them.

but frankly sounds big pain in neck , more trouble it's worth in-browser editor :)


Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -