Skip to content

[css-text-3] Disambiguation about soft wrap opportunities around replaced elements #9964

Closed
@frivoal

Description

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:

  1. the second rule talks about the boundary between two characters, and replaced elements or other atomic inlines are not characters
  2. 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

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions