Should there be a soft wrap opporunity in the middle of the following divs?
<style>
div {
width: 0px;
white-space: normal;
}
span {
white-space: nowrap;
}
img { width: 30px; height: 30px; }
</style>
<div><span><img></span><span><img></span></div>
<div><span>稲</span><span><img></span></div>
<div><span><img></span><span>稲</span></div>Currently, we don't have interop, with Chrome and Safari allowing a break, and Firefox not.
I believe that the spec is not clear. The parts that seem relevant but don't actually spell it out clearly would be the following two points from https://drafts.csswg.org/css-text-4/#line-break-details:
- For Web-compatibility there is a soft wrap opportunity before and after each replaced element or other atomic inline, even when adjacent to a character that would normally suppress them, including U+00A0 NO-BREAK SPACE. However, with the exception of U+00A0 NO-BREAK SPACE, there must be no soft wrap opportunity between atomic inlines and adjacent characters belonging to the Unicode GL, WJ, or ZWJ line breaking classes. [UAX14]
Tests
- For soft wrap opportunities created by characters that disappear at the line break (e.g. U+0020 SPACE), properties on the box directly containing that character control the line breaking at that opportunity. For soft wrap opportunities defined by the boundary between two characters, the white-space property on the nearest common ancestor of the two characters controls breaking; which elements’ line-break, word-break, and overflow-wrap properties control the determination of soft wrap opportunities at such boundaries is undefined in this level.
The goal of the first rule quoted above is to make replaced elements / atomic inlines break more than other things. The Firefox implementation makes then break less than ideographs, which goes against that expectation.
But I think a literal interpretation of the spec falls short of saying what to do, because:
- the second rule talks about the boundary between two characters, and replaced elements or other atomic inlines are not characters
- the first rule says that there's a wrap opportunity before and after, which is similar but not identical to making it defined by the boundary between two things.
So I think we should clarify that the Chrome/Webkit behavior is the intended one, and do so with the following two additions:
For soft wrap opportunities defined by the boundary between two characters, replaced element, or other atomic inlines, […]
there is a soft wrap opportunity at the boundary before and after each replaced element or other atomic inline
Should there be a soft wrap opporunity in the middle of the following divs?
Currently, we don't have interop, with Chrome and Safari allowing a break, and Firefox not.
I believe that the spec is not clear. The parts that seem relevant but don't actually spell it out clearly would be the following two points from https://drafts.csswg.org/css-text-4/#line-break-details:
The goal of the first rule quoted above is to make replaced elements / atomic inlines break more than other things. The Firefox implementation makes then break less than ideographs, which goes against that expectation.
But I think a literal interpretation of the spec falls short of saying what to do, because:
So I think we should clarify that the Chrome/Webkit behavior is the intended one, and do so with the following two additions: