1347808 - A long string of hyphens does not wrap in Firefox, but does in other browsers

Status: NEW

(Core :: Layout: Text and Fonts, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

(Filing this for https://github.com/webcompat/web-bugs/issues/5080 )

STR:
 1. Load attached testcase.

EXPECTED RESULTS:
Hyphens wrap to multiple lines, staying inside of their <div> container.

ACTUAL RESULTS:
Hyphens do not wrap, and overflow their <div> container.

Comment 1

[Daniel Holbert [:dholbert]]

Chrome 55, Edge 14, Safari, and Opera all give EXPECTED RESULTS.  (The latter two I didn't test myself, but I'm going off of reports on the webcompat issue & Blink/WebKit family ties.)

Firefox gives ACTUAL RESULTS. So, we're the odd one out on this behavior.

Comment 2

[Daniel Holbert [:dholbert]]

I think other browsers are treating each hyphen as a "soft wrap opportunity", and this is special behavior for hyphens and not for other characters.

(karlcow discovered https://www.w3.org/TR/css-text-3/#soft-wrap-opportunity which has some spec text about this, including "CSS does not fully define where soft wrap opportunities occur". So this is a bit under-specified, and we should probably align with other browsers on this case for interop.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2: comparing hyphens to other punctuation

Comment 4

[Daniel Holbert [:dholbert]]

testcase 2 (viewed in other browsers) shows that hyphens are a special case. Edge and Chrome don't break the other long strings in that testcase (with an assortment of other punctuation characters)

Comment 5

[Daniel Holbert [:dholbert]]

(While other browsers treat hyphens as special, we seem to treat percent signs as special in a much weirder way -- I filed bug 1347812 on that.)

Comment 6

[Daniel Holbert [:dholbert]]

masayuki, perhaps you'd be interested in taking this? I see dbaron CC'd you & you added some insight on related bug 1347812.

(This bug here is apparently responsible for breaking mobile layout on modemarine.fr, as noted in the webcompat report.)

Comment 7

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Yep, hyphen-minus is a really difficult character to break around it. If it's used as "hyphen", we can relax around it, however, it can be used as "minus" or special character especially for command lines and similar cases.

E.g., there is a line |ac_add_options --enable-debug|, the "--enable" shouldn't be broken because if it's broken to 2 or more lines, it's really difficult to understand what it means.  But I guess, "-" not followed by other characters can be broken.

Comment 8

[Jonathan Kew [:jfkthame]]

Example where Chrome's behavior of treating every hyphen as a break opportunity gives poorer results:

data:text/html,<div style="font-family:monospace;width:28ch;">double hyphens may be used -- like this -- to stand in for em-dashes

Firefox keeps the hyphens together.

Comment 9

[martin.trummer]

also stumbled upon this issue - still does not work as expected in Firefox 68.0.2 (64-bit)

Comment 10

[martin.trummer]

also stumbled upon this issue - still does not work as expected in Firefox 68.0.2 (64-bit)

a workaround is to use the wbr tag
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

Comment 11

[Karl Dubost💡 :karlcow]

This can sometimes make the content unusable because of numbers not visible like in https://github.com/webcompat/web-bugs/issues/99714