[html5] pre, contentEditable and newline characters
Andre "Osku" Schmidt
andre.osku.schmidt at osku.de
Wed Dec 30 05:51:17 PST 2009
you may scroll down if this feels too long.
previously i _always_ abandoned my "web-app" ideas/prototypes pretty
quickly, thinking "why bother? it won't work on most browsers without
but with HTML5 (and CSS3) there are so many new cool things that i gotta
learn this right and report bugs on browsers/engines if they don't
behave according to the spec.
here's a current problem where i'm not sure how things should behave:
<pre contentEditable="true"> and the Enter key
says: "The pre element represents a block of preformatted text, in which
structure is represented by typographic conventions rather than by
this means in <pre> everything should use a newline character (\n)
instead of the <br> element to represent a line break, right ?
says: "To insert a line break, the user agent must insert a br element."
doesn't this break the <pre> rule above ?
so let's test. here's the html source, <pre> part:
alert(pre.innerHTML) and here's what i get:
(note: maybe innerHTML does some of this bad behaviour)
on first alert (without editing the <pre> in browser by the user) i get:
looks perfect, now lets press enter key after "hello" and i get:
hmm, <div> in a <pre> now that sounds very bad, no ?
on first alert we get:
ok, this definitely breaks the rule of <pre>. or innerHTML converts
newline chars to <br> ? i really should check innerHTML rules...
and then after pressing enter key after "hello" we get:
well, it indeed follows the contentEditable rule, but also breaks the
<pre> rule, no ?
before enter key:
don't ask me what char that is after "hello" i copy and pasted it from
the alert window...
and then after adding enter before "world" (couldn't get cursor after
"hello"...), i get:
yeah, like firefox, obeys contentEditable rule but breaks <pre> rules.
YOU MAY SCROLL HERE
to make a simpler question:
should pressing enter in <pre contentEditable="true"> add a newline
character rather than a <br> element ?
i know i can use shift+enter to get newline character, but that would
then not allow me (easily) to use a <pre> element as a "textWidget"
known from widget toolkits like gtk+, qt, etc...
but if the current behaviour is ok for most of you (adding a <br>
instead a newline character to <pre>), and it won't definitely be
that changes shift+enter to enter, and works across browsers ? ;P
Andre "Osku" Schmidt
ps. if you need an use-case, here's a little hobby prototype:
a simple regex visualizer... adding new lines to the text (with shift
+enter) ATM only works in chrome... another post on that, if i get past
"why bother" ;P
More information about the Help