656960 - Support <wbr> inside "white-space:nowrap" and "white-space:pre" content

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Rob S.]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Build Identifier: 20110413222027      Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

The HTML 5 <wbr/> tag makes it easy to suggest where the browser should place line breaks when necessary, without having to force unnecessary line breaks as the <br/> tag does. Firefox currently supports <wbr/> to suggest breaking points other than whitespace locations in "white-space: normal" ("text-wrap: normal") content. WebKit browsers also support <wbr/> in "white-space: nowrap" and "white-space: pre" ("text-wrap: none") content, but Firefox does not break that content where the <wbr/> tags occur like the WebKit browsers. I don't see any workaround yet that is as easy to use as the <wbr/> tag.


Reproducible: Always

Steps to Reproduce:
1. Go to http://www.HTML-5.com/tags/wbr-tag/index.html#wbr-tag-demo in Firefox 4
2. Resize the window smaller then larger while watching the text that says "William Shakespeare Twelfth Night Act II Scene 5:"
3. Note how that entire span of text moves from one line to the other all at once.
4. Repeat steps 1 and 2 in a WebKit browser. Note how that span of text breaks where the <wbr/> tags are located.


Actual Results:  
The entire span of text moves from one line to the other all at once.


Expected Results:  
The span of text breaks where the <wbr/> tags are located.


Here is the HTML code for the test scenario:

<p>One of my favorite quotes from <span style="white-space: nowrap">
   <a href="http://www.Shakespeare-Literature.com/Twelfth_Night/10.html">
      <cite>William Shakespeare <wbr/>Twelfth Night <wbr/>Act II Scene 5</cite></a>:</span>
</p>
<blockquote
   cite="http://www.Shakespeare-Literature.com/Twelfth_Night/10.html"
>In my stars I am above thee; but be not afraid of greatness:
   some are born great, some achieve greatness,
   and some have greatness thrust upon 'em.
</blockquote>

Comment 1

[j.j.]

This is a dup of bug 6347, but HTML5 requires <wbr> overriding CSS "white-space".

http://www.w3.org/TR/html5/rendering.html#punctuation-and-decorations

Comment 2

[Boris Zbarsky [:bzbarsky]]

Uh... why does HTML5 require that?  That's not desirable, and I'm not sure we want to implement that.

Comment 3

[Boris Zbarsky [:bzbarsky]]

And in particular, WebKit is the _only_ browser engine that does that.  Presto and Trident do the same thing we do.

I posted http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/031639.html

Comment 4

[j.j.]

Attachment: testcase (Standards Mode)

No line-break at all: Fx, Opera 11, IE8 Standards Mode 
Line-breaks in 1., 2., 3.: Chrome 11, IE Quirksmode 
Breaks line 1. and 3.: IE7 Standards Mode

Comment 5

[j.j.]

> No line-break at all: Fx, Opera 11, IE8 Standards Mode 
and IE9 (Standards Mode)

Comment 6

[j.j.]

> Breaks line 1. and 3.: IE7 Standards Mode
and IE6 (Standards Mode)

Comment 7

[Rob S.]

Re: http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/031639.html
>> Why is this desirable?

The test case above provides one place this is desirable.  Another example where it's desirable, with "white-space: pre" rather than "white-space: nowrap" is to break up long lines of computer code only when necessary. For example:

<p style="white-space: pre">echo ("This is a very long line of computer program
code. <wbr/>The author may want to allow it to be displayed across multiple
lines, <wbr/>even though it might only be one line of code in the actual
program.");</p>

Comment 8

[j.j.]

(In reply to comment #7)
> <p style="white-space: pre">echo ("This is a very long line of computer
> program
> code. <wbr/>The author may want to allow it to be displayed across multiple
> lines, <wbr/>even though it might only be one line of code in the actual
> program.");</p>

We have  "white-space: pre-wrap"  for this case.

Comment 9

[j.j.]

(In reply to comment #8)
> We have  "white-space: pre-wrap"  for this case.

and   "word-wrap: break-word"

https://developer.mozilla.org/en/CSS/white-space#Browser_compatibility

Comment 10

[Boris Zbarsky [:bzbarsky]]

Right.  Those use cases are just trying to work around abuse of "white-space: pre" and "nowrap" in situations where the desired behavior is in fact to wrap...

See also the whatwg thread.

Comment 11

[Leif Halvard Silli]

(In reply to comment #3)
> And in particular, WebKit is the _only_ browser engine that does that. 
> Presto and Trident do the same thing we do.
> 
> I posted
> http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/031639.html

As Simon pointed out in that thread, Trident and Presto do not do what FIrefox does. IE does not implement <wbr>, anymore.  And Opera don't eiither (I don't know if it once did). 

Btw, foo{word-wrap:break-word} is different from <wbr>, despite that <wbr> presumably means "word break". The <wbr> elemetn visually joins two words, but semantically separates the sme two words. Whereas word-wrap:break-word; only *visually* splits a soingle word. This, however, is difficult for authors to grasp it seems: manuy tutorials etc seem to think that <wbr> is an alternative to teh SOFT HYPHEN and things like that. For that reason <wbr> seems kind of dangerous, as it can change the meaning of the text without author's full awareness - if all the author cares for is the visual impression. 

However, because of this, one can also not say "please word-wrap:break-word", as they have different uses and different effects.

Oddly, the best use cases I have seen for <wbr> (namely those mentioned on the top of this bug!) seems to be "line breaks" rather than "word breaks".

I have gotten the impression that <wbr>'s behaviour (as it functions in IE7 and downwards {actually, I think IE7 differs from IE Quirks-Mode here - it works "less well" in the latter, in particular inside <pre>, where I think IE7 works just like Firefox 5}), is difficult to implement via CSS. This impression stems from the HTML5 editor resistanse towards specifying a specific wbr styling, as well as a statement from Macijej about how special cased <wbr> apparently is in Webkit.

However, it is actually not that difficult to implement the IE Quirks-Moe behaviour cross browser. (But for the fact that Firefox does not allow us to style teh <wbr> element. (I think that unstylable HTML elements are useless - should be obsoleted.) But one can implement the IE quirks-mode <wbr> behaviour in Firefox  by styling a <span> ellement instead.

Thus I filed a bug against Webkit to make it implement a CSS based <wbr> implemenation inspired by Mozilla bug 178671. Namely https://bugs.webkit.org/show_bug.cgi?id=64005. For links and tests cases that I made, please see there.

Comment 12

[j.j.]

Comment on attachment 532419 [details]
testcase (Standards Mode)

(In reply to Boris Zbarsky [:bz] from comment #3)
> And in particular, WebKit is the _only_ browser engine that does that. 
> Presto and Trident do the same thing we do.
> 
> I posted
> http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/031639.html

Meanwhile the spec changed. Rendering section says:

nobr { white-space: nowrap; }
wbr { content: '\200B'; }
nobr wbr { white-space: normal; }

http://www.w3.org/TR/html5/rendering.html#phrasing-content-0
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#phrasing-content-1

That's not what Mozilla has implemented, and <nobr><wbr></nobr> dosen't work (depending on bug 178671).
But this bug as filed should be closed as INVALD.