incorrect wrapping (line-breaking) between image and punctuation
Categories
(Core :: Layout: Text and Fonts, defect)
Tracking
()
People
(Reporter: vincent-moz, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0
Steps to reproduce:
Open the following URL.
data:text/html,<p style="width: 15em">Text text text text text text<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQAAAAClSfIQAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAd2KE6QAAAAJcEhZcwAAAGAAAABgAPBrQs8AAAAHdElNRQflAQITLzugQw3KAAAAEGNhTnYAAAEQAAAAeAAAAAAAAAAAMUUBzQAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTAxLTAyVDIzOjU0OjM3KzAwOjAwM+5e/wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wMS0wMlQyMzo1MDozMyswMDowML8XYioAAAAZdEVYdFNvZnR3YXJlAGdub21lLXNjcmVlbnNob3TvA78+AAAAAElFTkSuQmCC" alt=""/>.[123456789]</p>
Actual results:
I get:
Text text text text text text■
.[123456789]
Expected results:
The line break should not occur between the image and the punctuation. I should have got:
Text text text text text
text■.[123456789]
Note: In practice, such issues occur on Wikipedia, where images contain math formulas. The punctuation may be immediately followed by a list of references, increasing the risk of wrapping at the wrong place with Firefox.
|
||
Comment 1•4 years ago
|
||
According to https://drafts.csswg.org/css-text/#line-break-details,
"there is a soft wrap opportunity before and after each replaced element or other atomic inline"
which suggests that Firefox's behavior here is expected per spec.
Moreover, I see a potential line-break at this position in Safari and Chrome as well, depending on the exact line width used. In my testing on macOS, both Safari and Chrome break after the image (and before the period) with
data:text/html,<p style="font:16px times new roman;width: 180px">Text text text text text text<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQAAAAClSfIQAAAABGdBTUEAALGPZ/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAd2KE6QAAAAJcEhZcwAAAGAAAABgAPBrQs8AAAAHdElNRQflAQITLzugQw3KAAAAEGNhTnYAAAEQAAAAeAAAAAAAAAAAMUUBzQAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTAxLTAyVDIzOjU0OjM3KzAwOjAwM+5e/wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wMS0wMlQyMzo1MDozMyswMDowML8XYioAAAAZdEVYdFNvZnR3YXJlAGdub21lLXNjcmVlbnNob3TvA78+AAAAAElFTkSuQmCC" alt=""/>.[123456789]</p>
To suppress the potential break here, an author could for example wrap the image and following punctuation in a span with white-space: nowrap.
Description
•