[Webkit-unassigned] [Bug 64005] Make a sane CSS implementation of <wbr>

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=64005





--- Comment #2 from Leif Halvard Silli <xn--mlform-iua at xn--mlform-iua.no>  2011-07-07 23:24:01 PST ---
(In reply to comment #1)
> Is your proposal in accordance with HTML5?

Yes. Citing HTML5: http://dev.w3.org/html5/spec/rendering.html#rendering

]]  The wbr element is expected to override the 'white-space' property and always provide a line-breaking opportunity. [[

wbr{white-space:pre /* This rule overrides white-space ...*/} ;-)

Btw, there is a Mozilla bug about implementing  <wbr> as CSS and XBL, where Anne van Kesteren stated: 

]]     If this is going to be implemented using CSS, it should be like:
       # wbr:before { content:"\200B"; white-space:normal; }
[[    See: https://bugzilla.mozilla.org/show_bug.cgi?id=178671#c9

In fact, I hereby withdraw my proposal in Comment #0 and propose this rule instead:

   wbr { content:"\00200B"; white-space:normal; } /* eventually in addition, because foo{content:"bar"} is not well supported: */
  wbr:before{content:"\00200B"} /* to make up for bad support for generated content: */

Those rules should solve it  - and *does* solve it in Opera. In principle, it solves it in Firefox too. However, <wbr> is very difficult to style <wbr> in Firefox - it reacts to very few properties.  So in order to verify that it - in principle - works in Firefox too, I had to test it on a <span/> element.  It also *in principle* solves it in IE8 (verified, again, with a span element). An it does - for real - solve it in IE9. I f you want to see this for yourself - and I wrote this test case very much as a response to your question  - you can see here: 

http://malform.no/testing/html5/wbr-crossbrowser

That page is cross-browser. But the Webkit essence of that page goes like this (because it focuses on *current* Webkittens ...):

*.wbr{content:"\00200B";white-space:normal;display:inline;}
*.wbr:before{content:"\000020";display:inline-block;}
/*inline-block collapses the space character See explation on the page). */

During the writing of that page, it became clear that Webkit's current implementation is quite buggy. Se for instance this test:

http://malform.no/testing/html5/wbr-webkitdebug

That bug do - for me - confirm that we need a sane CSS based implementatino rather than the adhoc solution Webkit seems to have today.

There seems to be this myth around that CSS is not enough if we want to implement <wbr>. The myth finds nourishment by in the fact that the HTML5 Editor do not want to spec at specific CSS rule, because he is not certian which one would work, it seems. And another myth source: When Maciej filed the bug which made <wbr> a valid HTML5 element, he claimed that Webkit's code demonstrated that it was necessary to break CSS in order to implement <wbr>.

However, when I created the wbr-crossbrowser page above, then CSS stylability was the key to creating a workable solutions. Fortunately, <wbr> is more stylable in Webkit than it is in Firefox.  Hence my wbr-crossbrowser page was able to seemingly fix the bug. Which agian confirms ...

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.