959735 - Wired.com is not word wrapping properly for Firefox Android

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Adam Stevenson [:adamopenweb]]

Site: http://www.wired.com/design/2014/01/super-detailed-photos-of-snowflakes-shot-with-hacked-camera/
Wired.com is not word wrapping properly for Firefox Android

:: Steps To Reproduce

1. Open Firefox Android browser
2. Go to Wired.com and pick an article (example: http://www.wired.com/design/2014/01/super-detailed-photos-of-snowflakes-shot-with-hacked-camera/)

:: Expected Result

Words to be wrapped properly at the end of a line, keeping the word intact

:: Actual Result

Words being split into two, part of the word wrapping

:: Additional Information

Software Version: 26.0.1
Device Information: User-Agent: Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8
Reporter's User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:26.0) Gecko/20100101 Firefox/26.0

Comment 1

[Adam Stevenson [:adamopenweb]]

Spoofing the UA on desktop will reproduce the issue.

Comment 2

[Mike Taylor [:miketaylr]]

Here's the relevant CSS, from http://cdn.mobify.com/sites/wired/production/stylesheet.css?1386878557514 (perhaps elsewhere for other parts of the page).

.x-article #x-test #article-wrap .entry p,.x-article #x-test #article-wrap .entry li{
	-ms-word-break:break-all;
	word-break:break-all;
	word-break:break-word;
	-webkit-hyphens:auto;
	-moz-hyphens:auto;
	hyphens:auto;
        ...
}

The reason that Chrome/WebKit doesn't break all the words in the same way that we do is because of the (formerly non-standard? aliased?*) word-break: break-word. Removing that results in the same experience that we get. I suppose when we implement 955857 word-break: break-word should just work™.

Now, as to why -moz-hyphens isn't working is not clear to me. MDN says "Automatic hyphenation only works for languages whose hyphenation dictionaries are integrated in Gecko." But I'm using "en-US".

* spec says "For legacy reasons, UAs must treat ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property, as if it were a shorthand of ‘overflow-wrap’."

Comment 3

[Mike Taylor [:miketaylr]]

Attachment: hypens.html

Testcase for -moz-hypens not working as (I) expected.

Comment 4

[Mike Taylor [:miketaylr]]

Attachment: fx-v-safari.png

Attaching screenshot of testcase working in Safari.

Comment 5

[Mike Taylor [:miketaylr]]

David, would you mind looking at the attached hyphens.html testcase to confirm that I'm not missing something (or making incorrect assumptions about -moz-hyphen)?

Comment 6

[Mike Taylor [:miketaylr]]

(Apparently it's very hard for me to type "hyphen" correctly - though not in the testcase CSS)

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

http://dev.w3.org/csswg/css-text/#word-break-property defines 'break-all' as:

    In addition to ‘normal’ soft wrap opportunities, lines may break between any two letters (except where forbidden by the ‘line-break’ property). Hyphenation is not applied. This option is used mostly in a context where the text is predominantly using CJK characters with few non-CJK excerpts and it is desired that the text be better distributed on each line. 

So given that the test includes 'word-break: break-all', our behavior of breaking anywhere and not hyphenating seems correct.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(I'm not sure where the discussion of word-wrap and overflow-wrap came from; word-break and word-wrap are different properties.)

Comment 9

[Mike Taylor [:miketaylr]]

(In reply to David Baron [:dbaron] (needinfo? me) (UTC-8) from comment #8)
> (I'm not sure where the discussion of word-wrap and overflow-wrap came from;
> word-break and word-wrap are different properties.)

In the rule,

word-break:break-all;
word-break:break-word;

word-wrap: word-break is what is applied to Chrome on wired.com, hence it doesn't appear to the user that anything is broken on the page -- even with them not supporting hyphens. 

(iOS supports both word-break:break-word and -webkit-hyphens, which is likely what this site was tested in/designed for.)

(In reply to David Baron [:dbaron] (needinfo? me) (UTC-8) from comment #7)
> http://dev.w3.org/csswg/css-text/#word-break-property defines 'break-all' as:
> 
>     In addition to ‘normal’ soft wrap opportunities, lines may break between
> any two letters (except where forbidden by the ‘line-break’ property).
> Hyphenation is not applied. This option is used mostly in a context where
> the text is predominantly using CJK characters with few non-CJK excerpts and
> it is desired that the text be better distributed on each line. 
> 
> So given that the test includes 'word-break: break-all', our behavior of
> breaking anywhere and not hyphenating seems correct.

The "correct" behavior here is not useful for our users reading non-CJK wired.com though :(. 

Here's a screenshot that shows the difference between Firefox for Android and Chrome: https://cloudup.com/c2dYBfAqmhB It's not very easy to read in our browser.

That said, if there's nothing that can be done from a core perspective, perhaps we can just recommend ditching the word-break and going with something like "text-align: justify".

Comment 10

[Mike Taylor [:miketaylr]]

Of course by "word-wrap: word-break" I mean "word-break: break-word", which is apparently a non-standard thing that WebKit supports. I think I've confused myself at this point, so it probably is irrelevant to overflow-wrap.

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

So what does word-break: break-word do, and why is the site using it?  Maybe the site should just omit the word-break property entirely?  Or is it something that ought to be spec'd and supported?

Comment 12

[Mike Taylor [:miketaylr]]

Comment on attachment 8360521 [details]
hypens.html

Was missing -ms-hyphens: auto;

Comment 13

[Mike Taylor [:miketaylr]]

Attachment: hyphens.html

Comment 14

[Mike Taylor [:miketaylr]]

(In reply to David Baron [:dbaron] (needinfo? me) (UTC-8) from comment #11)
> So what does word-break: break-word do, and why is the site using it?  Maybe
> the site should just omit the word-break property entirely?  Or is it
> something that ought to be spec'd and supported?

It appears that in WebKit/Blink, word-break: break-word is a synonym for word-wrap: break-word (according to my tests and [1]. [2] suggests that they did this for IE compat?

[1] https://github.com/WebKit/webkit/blob/e7207313fed4b7a2140c39f65d45e0f441731735/LayoutTests/fast/text/word-break.html#L17-L29.
[2] https://github.com/WebKit/webkit/blob/e887e1aa1b7be17a8d160e869790c320b08f7ae0/Source/WebCore/rendering/style/RenderStyleConstants.h#L219-L223

I wonder if this should be noted in the CSS3 Text spec. Unsure how widely it's used right now.

As for this issue, word-break: break-all is really intended for predominantly CJK scripts (from what I gather), and word-wrap: break-word for non-CJK scripts. Even though Chrome doesn't support CSS hyphens, it understands word-break: break-word and treats it like word-wrap: break-word. Safari does the same, but it supports hyphens so it looks a little nicer.

They already have a rule on body that declares word-wrap: break-word, so if they remove the  "-ms-word-break:break-all;word-break:break-all;word-break:break-word;" from the selector mentioned in Comment 2, this should work nicely in all browsers.

Comment 15

[Mike Taylor [:miketaylr]]

Attachment: hyphens.html

Updated test case showing break-word: word-break behaves the same in WebKit/Blink as word-wrap: break-word.

Comment 16

[Mike Taylor [:miketaylr]]

Attachment: IE11.png

Attaching IE11 screenshot which suggests that IE treats word-break: break-word the same as word-wrap: break-word.

Comment 17

[Mike Taylor [:miketaylr]]

Attachment: hyphens.html

Comment 18

[Mike Taylor [:miketaylr]]

Attachment: ie11-7mode-v8mode.png

I realize I had written my test incorrectly. This screenshot shows that IE11 (in IE7 document mode) treats word-break: break-word as a synonym to word-wrap: break-word, but the IE8 and above document modes ignore it/don't understand it.

Comment 19

[Adam Stevenson [:adamopenweb]]

Trying to contact using the site fix form: http://www.wired.com/about/sitefix/

Comment 20

[Adam Stevenson [:adamopenweb]]

This seems to be working for me now. :)

Mike - can you confirm please?

Comment 21

[Mike Taylor [:miketaylr]]

Yay! Fixed over here too.

Comment 22

[Daniel Holbert [:dholbert]]

Attachment: testcase demonstrating "word-wrap:break-word" vs "word-break:break-word" in Chrome

(In reply to Mike Taylor [:miketaylr] from comment #14)
> (In reply to David Baron [:dbaron] (needinfo? me) (UTC-8) from comment #11)
> > So what does word-break: break-word do, and why is the site using it?  Maybe
> > the site should just omit the word-break property entirely?  Or is it
> > something that ought to be spec'd and supported?
> 
> It appears that in WebKit/Blink, word-break: break-word is a synonym for
> word-wrap: break-word

Just to set the record straight on this -- this isn't quite true. In particular, it looks like "word-break: break-word" influences how intrinsic widths are created -- it influences the minimum width and preferred width -- whereas "word-wrap: break-word" *does not* influence these things.

Attached testcase demonstrates this difference, when loaded in Chrome. It's got auto-sized floats, in a 100px-wide div. The first one, with "word-wrap", overflows the parent, but the second does not (I think because it's reporting a smaller min-content width -- possibly the width of the widest character, or something).

Comment 23

[Mike Taylor [:miketaylr]]

Thanks for the re-education Daniel. :)