Bug 224172 – Inline tags can break soft hyphens

• Component: Text
• Status: RESOLVED CONFIGURATION CHANGED

[Bence Meszaros]

Created attachment 425131 [details]
Soft hyphen is missing

Hi,

Soft hyphen is not displayed if it is the last character in an inline element, although the line does break:

<p style="width: 100px;">
    <span style="color: red;">Inter&shy;</span>dimensional
</p>

A possible workaround would be to move the soft hyphen out of the inline element:

<p style="width: 100px;">
    <span style="color: red;">Inter</span>&shy;dimensional
</p>

Unfortunately this also removes the intended styling, the hyphen is now visible but black instead of red. Another issue with this workaround is that when using multiple inline elements to programmatically style a piece of text, the inline element beginning with a soft hyphen will have double height:

<p style="width: 100px;">
    <span style="color: red;">Inter</span>
    <span>&shy;dimensional</span>
</p>

The hyphen is rendered onto the first line but the rest of the text is onto the second line, preventing a script from measuring actual line heights. Auto-hyphenation is poorly supported in modern browsers and soft hyphens could be a viable alternative for sophisticated web-based text editors, but this bug is a significant obstacle in this regard.

The intended behavior would be to show the glyph whenever break happens regardless of its parent.

(Soft hyphens show/style/hide as intended in Chrome 89.0.4389.114)

[Bence Meszaros]

Created attachment 425132 [details]
Soft hyphen is visible in Chrome as intended

[Radar WebKit Bug Importer]

<rdar://problem/76370541>

[Ahmad Saleem]

From Comment 0, it seems 'Chrome Canary 122' and 'Safari 17.1' are matching each other to show '-'.

https://jsfiddle.net/jag3hd7v/