1777686 - Inline elements break cursive shaping

Status: NEW

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

Description

[Richard Ishida]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:102.0) Gecko/20100101 Firefox/102.0

Steps to reproduce:

This issue is applicable to text in all cursive scripts.

When elements surround part of a cursive run of text, and apply styling, the results often break the cursive joins. (See the results of trying to colour individual letters in the illustration below – as expected above, unsuccessful below.)

https://user-images.githubusercontent.com/4839211/105509398-5cca3300-5cc5-11eb-93e3-9398a9959a74.png

https://user-images.githubusercontent.com/4839211/73611430-b24f9080-45d9-11ea-8b96-8f75648c725e.png

SPECS:
After some discussion (https://github.com/w3c/csswg-drafts/issues/698), the CSS spec requires the following:

1. Markup alone around part of a joined up sequence must not disturb the joining behaviour.
2. Styling that doesn't affect the characters, such as text-decoration, must not break the joins.
3. Styling that does affect the shape of the characters should not break the joins, however the result is not well defined for complex glyph arrangements such as ligatures where the markup occurs between characters that make up the ligature.
4. Non-zero margins, padding, and borders, will break the join, as will isolation boundaries.

TESTS & RESULTS:
Interactive test, A span with a colour change for one letter in an Arabic word doesn't break the joining behaviour
https://github.com/w3c/character_phrase_tests/issues/43

• Gecko: ✅ Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:102.0) Gecko/20100101 Firefox/102.0
• Blink: ✅ Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
• Webkit: ❌ Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

I18n test suite, Cursive joining
https://w3c.github.io/i18n-tests/results/css-text-shaping

• Gecko: ✅❌ Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:102.0) Gecko/20100101 Firefox/102.0
• Blink: ✅ ❌ Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
• Webkit: ❌ Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Webkit breaks cursive joining as soon as markup appears around a character, and so obviously fails for any type of styling application, too.

Gecko and Blink keep joins for styling that doesn't affect the shape of the characters (eg. text-decoration), and keeps it for colour changes, however Firefox fails for changes in font-weight, font-style, and font-size, as well as for markup such as em and b tags.

(Gecko and Blink also only pass some of the tests for non-zero margin/padding/border and bdi isolation. Which expect the cursive joins to be broken.)

Expected results:

Please fix the browser so that it doesn't break the cursive joins at places where the CSS spec says it shouldn't, and especially avoid breaking the joins when simple inline markup is applied to characters within a word.

Comment 1

[Richard Ishida]

For the relevant CSS spec text see https://www.w3.org/TR/css-text-3/#boundary-shaping.