[whatwg] Handling of collapsed whitespace in contenteditable

Aryeh Gregor Simetrical+w3c at gmail.com
Mon Jun 20 14:09:18 PDT 2011

If the user has the cursor positioned at the beginning or end of a
line, or immediately before or after a space, and hits space,
inserting a space at the current location would result in no visible
effect.  Thus browsers will typically insert an nbsp in at least some
of these conditions, and/or convert surrounding spaces to nbsp's.
This causes all sorts of problems:

* An nbsp at the end of a line makes the last word longer, so when you
hit space, the last word on the line might jump to the next line.
Then when you type a letter, the nbsp gets converted to a regular
space and the word jumps back to the previous line.  (I observed this
in Opera.  IE and Gecko seem to have some special-case to avoid this;
WebKit avoids it with a more general hack that I'll note later.)
* An nbsp that winds up immediately before a word will cause the word
to be indented if it happens to start a line.  Gecko seems to be very
careful to avoid this case, but all other engines do it sometimes.
* A long run of spaces of which some are spaces and some are nbsp's
can result in nbsp's at the beginning of a line.  Thus if you type
three spaces in between two words for whatever reason, in some cases
the second word can be indented.  This is probably not what users

The behavior we really want here is to output regular spaces, and use
white-space: pre-wrap.  This matches the word processors I tested
(Word 2007 and a moderately old OO.org): spaces don't collapse, and a
line break can never occur before a space, but it can always occur
after a run of spaces, and words followed by spaces don't get pushed
to the next line.  (This is how pre-wrap behaves in IE and WebKit, at
least.  In Gecko and Opera a long sequence of spaces will push the
preceding word to the next line, but I'd say that's a bug.)

If anyone here thinks it's practical to just set [contenteditable] {
white-space: pre-wrap } in UA stylesheets and output spaces all the
time, please say so.  (I know the selector isn't quite right.)  I
assume it's not, because it will make existing contenteditable areas
containing hand-authored content look wrong.  If we did this, of
course, authors would have to set white-space: pre-wrap on the
resulting non-editable content as well, but at least then it would
work exactly as we want.  If they don't set it, it won't look quite
the same as when the user edited it, but probably it wouldn't look
drastically worse.

It seems WebKit already does something kind of like this: in
contenteditable areas, line breaks are allowed at nbsp, they just
don't collapse.  Thus user-created whitespace is partly nbsp's, and
breaks but doesn't collapse.  Pre-existing author-added whitespace
doesn't contain nbsp and so collapses.  And when you convert it to
non-editable content, it still doesn't collapse but breaking might be
different.  This seems like a kind of evil hack, though.

Does anyone have any suggestions on how best to handle this?  It seems
like no matter what we do, the best advice to authors would be to set
white-space: pre-wrap on the editable region and the resulting
editable content.  So given that, I wish we could make this happen by
default and avoid all the complexity.  Failing that, I'll have to work
out the least damaging way to use nbsp's here, but it's never going to
behave right in some cases.

More information about the whatwg mailing list