Re: [css3-text] Feature request: "white-space: ignore"

Since I've been working on a CSS grid system this week, it has come to my
attention that we have a white-space issue in the current WD of the CSS3
Text module[1]. This issue propagate itself, but not exclusive, to the sum
of widths of inline-blocks not being what the web author intended[2][3].

Historically, we've been using floats to add layout to our CSS. The last
couple of years has seen the up rise of another method, using
inline-block[4], to control CSS layout. And in the near future, we all hope
to use Flexbox[5], as it is designed for CSS layout.

The issue of empty DOM nodes has been discussed on the www-style mailing
list the past two months. I have in support of my request, created a
white-space:none; polyfill[6] which handles the mentioned issues. Below, I
will try to summarize the discussion so far.

tl;dr
Flexbox can't be used on the web today so I've created a proof of concept,
that resolves the issue: https://github.com/dotnetCarpenter/white-space
This script implements "white-space: none;" as noted in issue 3 of the
http://www.w3.org/TR/css3-text/#white-space. But we need it in the specs to
guarantee that it won't break web pages in the future.

SUMMARY
Elika/fantasai propose "white-space: trim-inner;" to combat empty nodes
back in July 2011[7]. Zack propose "white-space: ignore;" to combat a text
overflow issue in December 2012[8]. The following discussion, including my
own, takes place in the same thread[9][10].

Bert chimes in with a DT example illustrating another use-case for
"white-space: ignore;" (though I don't quite get it) and Zach on behalf of
Elika, shows how Flexbox[5] will mitigate the issue.

Tab mentions that "white-space: ignore;" is covered by the
'text-space-collapse' property in CSS4 Text[11] and Biju brings up four
different interpretations that 'text-space-collapse' should/could handle.

I then brought up that "white-space: ignore;" would fix a big issue with
fluid grid systems[3], using 'inline-block' in contrast to 'float' (and
wrongfully attribute Bert for the proposal instead Zach). My wish is to add
"white-space: ignore;" to the CSS3 Text module. Elika and Alan argue for
the use of Flexbox[5] and I retain that "white-space: ignore;" is an
important omission from CSS3 Text[1] and if added to spec, could be used
already today. Tab and Alan don't think my last statement is valid.

Tim propose that the property/value should be "white-space: none;" and even
though Flexbox is the  right solution for concepts such as multiple
columns, Flexbox doesn't fix white space unintentionally gets in the way.
He then presents a use case with images which is similar to the example of
Biju.
Tab respond that Flexbox will mitigate this issue as well.

MY PITCH
While Flexbox[5] is a wonderful thing, it isn't backwards compatible and
implementing a shim has proven very difficult[12]. In contrast a small
amendment to CSS3 Text module, namely "white-space: none;", is easy to shim
and fixes a lot of issues that web developers are facing today.

But a shim is not a shim if there is no spec to shim. :) For this to be a
reliant approach, "white-space: none;" must be in the CSS3 Text[1] spec and
the shim must abide the spec 100%.

I will update the "white-space: none;" polyfill[6] with test cases and
further browser support. All I'm asking for is a sign of good will from
either the CSSWG or the W3C community.

Obviously, spec writers and browser vendors are immensely powerful in
steering the web forward. I just hope that web authors, who actually
provides the content of the web, also has a place in the W3C decision
making process and the open web.

Cheers, Jon

LINKS

   1. http://www.w3.org/TR/css3-text/#white-space
   2.
   http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
   3. https://github.com/csswizardry/inuit.css/issues/194
   4. https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
   5. http://www.w3.org/TR/css3-flexbox/#flex-flow
   6. https://github.com/dotnetCarpenter/white-space
   7. http://lists.w3.org/Archives/Public/www-style/2011Jul/0538.html
   8. http://lists.w3.org/Archives/Public/www-style/2013Mar/0718.html
   9.
   http://lists.w3.org/Archives/Public/www-style/2013Mar/subject.html#msg756
   10.
   http://lists.w3.org/Archives/Public/www-style/2013Apr/subject.html#msg472
   11. http://dev.w3.org/csswg/css-text-4/#white-space-collapsing
   12. https://github.com/doctyper/flexie#readme