Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inline elements/styling break cursive shaping #222

Open
r12a opened this issue Feb 2, 2020 · 6 comments
Open

Inline elements/styling break cursive shaping #222

r12a opened this issue Feb 2, 2020 · 6 comments
Labels
doc:arab_ks doc:arab_ug doc:arab_ur doc:arfa gap The first comment in this issue is read by the gap-analysis document. i:cursive Cursive text l:arb Arabic l:ks Kashmiri l:pes Persian l:ug Uighur l:ur Urdu p:advanced s:arab Arabic script (Used for arb + pes) s:aran Arabic nastaliq script style x:adlm x:alreq x:arab-ks x:arab-ug x:blink x:gecko x:nkoo x:webkit

Comments

@r12a
Copy link
Contributor

r12a commented Feb 2, 2020 •
edited
Loading

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

Screenshot 2021-01-22 at 15 19 49

shaping-2

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 r12a added gap The first comment in this issue is read by the gap-analysis document. doc:arfa p:advanced i:cursive Cursive text labels Feb 2, 2020
@r12a
Copy link
Contributor Author

r12a commented Feb 2, 2020 •
edited
Loading

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 r12a added the x:alreq label May 11, 2021
@r12a r12a mentioned this issue May 17, 2021
Open
@r12a r12a changed the title Inline elements break cursive shaping Inline elements/styling break cursive shaping Jul 1, 2022
@r12a
Copy link
Contributor Author

r12a commented Nov 9, 2022 •
edited
Loading

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
Copy link

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
Copy link
Contributor Author

r12a commented Apr 5, 2023

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
Copy link

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
Copy link
Contributor Author

r12a commented Apr 5, 2023

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.

@mansarip mansarip mentioned this issue Aug 17, 2023
Open
@r12a r12a added l:arb Arabic l:pes Persian l:ug Uighur l:ur Urdu l:ks Kashmiri labels Jun 5, 2024
@r12a r12a moved this to Browser bug raised in Gap-analysis pipeline Jun 20, 2024
@r12a r12a added s:arab Arabic script (Used for arb + pes) s:aran Arabic nastaliq script style labels Jun 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
doc:arab_ks doc:arab_ug doc:arab_ur doc:arfa gap The first comment in this issue is read by the gap-analysis document. i:cursive Cursive text l:arb Arabic l:ks Kashmiri l:pes Persian l:ug Uighur l:ur Urdu p:advanced s:arab Arabic script (Used for arb + pes) s:aran Arabic nastaliq script style x:adlm x:alreq x:arab-ks x:arab-ug x:blink x:gecko x:nkoo x:webkit
Projects
Gap-analysis pipeline
Status: Browser bug raised
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nicksherman @r12a