Bug 64005 – Make a sane CSS implementation of <wbr>

• Status: NEW
• Component: New Bugs

[Leif Halvard Silli]

Please drop the current special casing of <wbr> and instead implement the following CSS:

/* Outside NOBR:  */
 wbr
     { 
          display:inline-block;
     }

/* Inside NOBR:  */
nobr wbr
      { 
          display:inline; 
          white-space:normal; 
          content:"\00200B";
     }

For mor info, see the following two test pages:

(1) http://www.malform.no/testing/html5/nobr%2Bwbr
(2) http://www.malform.no/testing/html5/nobr

PS: Those test pages seems to document that Webkit doesn't properly support the Zero Width Space character (&#x200B;), so you may need to fix that as well, before the 'Inside NOBR' style will work.

[Alexey Proskuryakov]

Is your proposal in accordance with HTML5?

[Leif Halvard Silli]

(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 ...

[Leif Halvard Silli]

The CSS I proposed could also have fixed bug 26414

[Leif Halvard Silli]

The styles I propose do not break with bug 7452:

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

[Ian 'Hixie' Hickson]

The HTML standard now defines the <wbr> and <nobr> elements in terms of CSS.

[Ahmad Saleem]

Web-Spec: https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

We don't following UA rule:

nobr wbr { white-space: normal; }

While we have following:

https://searchfox.org/wubkat/rev/9d623aaa1673388226c70b4490e73348297c48c2/Source/WebCore/css/html.css#1321

nobr {
    white-space: nowrap;
}