Inline elements/styling break cursive shaping

[r12a]

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.)

Specs:
After some discussion, the CSS spec requires the following (see CSS Text: Shaping Across Element Boundaries):

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

• 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

• 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.)

Browser bug reports:
Gecko • Blink • Webkit

Priority:
It would be useful to decide on the potential impact of the failures described here, so as to prioritise the issue. Is the inability to surround/style parts of a word a significant issue? It may be problematic when defining a term (using dfn) if the term is only part of the run of letters between spaces, eg. after the definite article.

[r12a]

The first comment in this issue contains text that will automatically appear in one or more gap-analysis documents as a subsection with the same title as this issue. Any edits made to that comment will be immediately available in the document. Proposals for changes or discussion of the content can be made in comments below this point.

Relevant gap analysis documents include:
Adlam • Arabic/Persian • Kashmiri • N'Ko • UIghur

[r12a]

I tried this test, and it seems that while FF & Chrome don't break the joining if the colour alone is changed, they do break when the font feature settings are added (try removing that bit from the test). Note: used Awami Nastaliq for the font to test.

You may have to manually apply the font by clicking on the button next to "Awami Nastaliq" (seems there's a bug in the test rig).

[nicksherman]

Would it be worth also adding an example to the spec that explicitly describes when features that affect glyph positioning (most notably: kerning) should and should not be broken across inline element boundaries?

[r12a]

Do you have examples where kerning should prevent line breaking. I would have thought that kerning is not relevant, since there is a line break between the previously kerned characters (?)

[nicksherman]

I'm sorry, I may not have explained what I mean clearly enough … I'm not talking about anything related to line breaks. I'm talking about contextual positioning between inline elements on the same line. For example: allowing kerning to remain in tact even if adjacent characters in the same word are wrapped in separate <spans>s.

This isn't so much about contextual joining features that have been the focus of this discussion so far, but it is very much related since its about retaining contextual font features across inline elements.

[r12a]

Ah, sorry. My bad. I got my wires crossed wrt the line break comment. Still some example would help, do you have some you could show here? Thanks.