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.

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

How are underlines positioned in Arabic text? #86

Open
r12a opened this Issue Nov 18, 2016 · 21 comments

Comments

7 participants
@r12a
Contributor

r12a commented Nov 18, 2016

CSS and browser implementers are looking for information about how to position underlines for various scripts, including Arabic. Can we provide them with the information they need (and add it to the layout requirements doc)? See w3c/csswg-drafts#459 (comment)

@r12a r12a added the question label Nov 18, 2016

@mostafah

This comment has been minimized.

Show comment
Hide comment
@mostafah

mostafah Nov 18, 2016

Contributor

I don’t recall any specific requirement for underlines in Arabic. Just two things comes to my mind:

  1. The need to specify the vertical place of the underline.
  2. Avoiding overlap with the glyph shapes (like the picture blow).

untitled

Both of these make sense for Latin too, but are more important for Arabic. Is this helpful, or do we need serious study or documentation here? If this is enough, I can leave a similar comment there.

Contributor

mostafah commented Nov 18, 2016

I don’t recall any specific requirement for underlines in Arabic. Just two things comes to my mind:

  1. The need to specify the vertical place of the underline.
  2. Avoiding overlap with the glyph shapes (like the picture blow).

untitled

Both of these make sense for Latin too, but are more important for Arabic. Is this helpful, or do we need serious study or documentation here? If this is enough, I can leave a similar comment there.

@r12a

This comment has been minimized.

Show comment
Hide comment
@r12a

r12a Nov 18, 2016

Contributor

i think it's a good start, but if you look at the link above you'll see that there are questions about:

a. how to change the distance of the underline from the text, which brings in the question of what is the 'anchor' from which distance is measured? I'm guessing that for arabic that's the baseline, and that the baseline is the same as for latin text. There's also the question, does it make sense to adjust the distance between the text and the underline? and what is the default location of the baseline for Arabic script text?

b. how to determine the thickness of the underline, and what the default should be?

Are we able to find answers to those?

Contributor

r12a commented Nov 18, 2016

i think it's a good start, but if you look at the link above you'll see that there are questions about:

a. how to change the distance of the underline from the text, which brings in the question of what is the 'anchor' from which distance is measured? I'm guessing that for arabic that's the baseline, and that the baseline is the same as for latin text. There's also the question, does it make sense to adjust the distance between the text and the underline? and what is the default location of the baseline for Arabic script text?

b. how to determine the thickness of the underline, and what the default should be?

Are we able to find answers to those?

@r12a

This comment has been minimized.

Show comment
Hide comment
@r12a

r12a Nov 18, 2016

Contributor

oh, and we should also consider whether the underline position changes for a mixture of arabic and latin script text. If not, and if the default location is different, i assume that the arabic text underline position takes precedence for text in an Arabic context.

btw, the CSS spec section that these questions are coming from is Line Decoration: Underline, Overline, and Strike-Through

Contributor

r12a commented Nov 18, 2016

oh, and we should also consider whether the underline position changes for a mixture of arabic and latin script text. If not, and if the default location is different, i assume that the arabic text underline position takes precedence for text in an Arabic context.

btw, the CSS spec section that these questions are coming from is Line Decoration: Underline, Overline, and Strike-Through

@ntounsi

This comment has been minimized.

Show comment
Hide comment
@ntounsi

ntounsi Nov 18, 2016

Contributor

When seeing the issue, same questions come to my mind :

  1. Is underline meaningful for Arabic script (WRT aesthetic aspect of some styles/fonts)
  2. About position, which baseline to consider,
  3. How should the underline behave with "descender", come under or cross it.
  4. What about marks and diacritics bellow letters. How not overlap.

Here are some pictures showing some concerns. Depend also on browsers and fonts.

crossall Chrome, Al Bayan font
someletters Safari, default font
underall Firefox, Al Bayan
underallbutkasra Firefox, default font
whichbaseline Firefox, Arabic Typesetting font

Depend mostly on browsers. Firefox, underline bellow all. Chrome, bold line across descenders and marks. Safari, discontinued underline to cross descenders and marks.

Contributor

ntounsi commented Nov 18, 2016

When seeing the issue, same questions come to my mind :

  1. Is underline meaningful for Arabic script (WRT aesthetic aspect of some styles/fonts)
  2. About position, which baseline to consider,
  3. How should the underline behave with "descender", come under or cross it.
  4. What about marks and diacritics bellow letters. How not overlap.

Here are some pictures showing some concerns. Depend also on browsers and fonts.

crossall Chrome, Al Bayan font
someletters Safari, default font
underall Firefox, Al Bayan
underallbutkasra Firefox, default font
whichbaseline Firefox, Arabic Typesetting font

Depend mostly on browsers. Firefox, underline bellow all. Chrome, bold line across descenders and marks. Safari, discontinued underline to cross descenders and marks.

@ntounsi

This comment has been minimized.

Show comment
Hide comment
@ntounsi

ntounsi Nov 29, 2016

Contributor

Added fonts and browsers which give the pictures above (see my previous comment).
Thanks.

Contributor

ntounsi commented Nov 29, 2016

Added fonts and browsers which give the pictures above (see my previous comment).
Thanks.

@mostafah

This comment has been minimized.

Show comment
Hide comment
@mostafah

mostafah Dec 13, 2016

Contributor

I took screenshots of a few more fonts with underline. Here is the list of the fonts as they appear in the images:

Chrome

chrome underline

Firefox

firefox underline

Safari

safari underline

More fonts could be added to the list, but it seems like it wouldn’t change the results. The behavior of each browser is more or less constant.

Contributor

mostafah commented Dec 13, 2016

I took screenshots of a few more fonts with underline. Here is the list of the fonts as they appear in the images:

Chrome

chrome underline

Firefox

firefox underline

Safari

safari underline

More fonts could be added to the list, but it seems like it wouldn’t change the results. The behavior of each browser is more or less constant.

@khaledhosny

This comment has been minimized.

Show comment
Hide comment
@khaledhosny

khaledhosny Dec 13, 2016

Note that both Chrome and WebKit (Safari) don’t use underline position from the font, they calculates it on their own somehow (didn’t look in the code to see how exactly it is calculated, though). Firefox uses the underline position from the font, but clips it to the font descender.

khaledhosny commented Dec 13, 2016

Note that both Chrome and WebKit (Safari) don’t use underline position from the font, they calculates it on their own somehow (didn’t look in the code to see how exactly it is calculated, though). Firefox uses the underline position from the font, but clips it to the font descender.

@mostafah

This comment has been minimized.

Show comment
Hide comment
@mostafah

mostafah Dec 14, 2016

Contributor

@khaledhosny Thanks for the info. So that’s why the height is variable in Firefox. We guessed that might be the case, but were not sure about it.

Contributor

mostafah commented Dec 14, 2016

@khaledhosny Thanks for the info. So that’s why the height is variable in Firefox. We guessed that might be the case, but were not sure about it.

@behnam

This comment has been minimized.

Show comment
Hide comment
@behnam

behnam Dec 27, 2016

Member

Here's an example of a modern (computer-type-set) 6-grad math textbook, on position and styling of underline.

underline-example-6-grad-math-ref-book

Member

behnam commented Dec 27, 2016

Here's an example of a modern (computer-type-set) 6-grad math textbook, on position and styling of underline.

underline-example-6-grad-math-ref-book

@behnam

This comment has been minimized.

Show comment
Hide comment
@behnam

behnam Feb 8, 2017

Member

This is an example of overline from a "The Holy Bible in Persian" with PDF available on openlibrary.org.

image

Basically, the line is drawn above the height-of-ALEF, almost touching the tip of ALEF, but it's lower than the highest point of the KAF/KEHEH diagonal (Sarkesh) line.

For this method, I assume, if the overline gets applied to any of the KAF family letters, it's better to skip-ink.

Member

behnam commented Feb 8, 2017

This is an example of overline from a "The Holy Bible in Persian" with PDF available on openlibrary.org.

image

Basically, the line is drawn above the height-of-ALEF, almost touching the tip of ALEF, but it's lower than the highest point of the KAF/KEHEH diagonal (Sarkesh) line.

For this method, I assume, if the overline gets applied to any of the KAF family letters, it's better to skip-ink.

@khaledhosny

This comment has been minimized.

Show comment
Hide comment
@khaledhosny

khaledhosny Feb 9, 2017

Here are examples of overline used in Quran, metal type from the 30s:
img_20170209_160219-small

and contemporary calligraphy:
img_20170209_160501-small

In both cases the overline is drawn above all the letters and the vowel marks as well.

khaledhosny commented Feb 9, 2017

Here are examples of overline used in Quran, metal type from the 30s:
img_20170209_160219-small

and contemporary calligraphy:
img_20170209_160501-small

In both cases the overline is drawn above all the letters and the vowel marks as well.

@behnam

This comment has been minimized.

Show comment
Hide comment
@behnam

behnam Feb 15, 2017

Member

We discussed underline/overline methods on the 7 February 2017 weekly meeting.

Here's a summary:

  1. Existing practices (meaning almost any handwriting, lithography, movable type, and traditional word processors) puts underline/overline below/above all glyph parts (letter parts and diacritics). Therefore, this is a desired behavior.

  2. We will keep looking for other practices and will document when we have good evidence.

  3. Based on the samples collected, looks like implementations need to find a better way of calculating a position for underline/overline based on font data. Most probably, it will use ascend and descend values for the positioning.

  4. In any case, if the underline/overline collides with ink, the prefferred default behavior would be to skip the ink.

  5. When skipping ink, it's also preferred to make sure the underline/overline drawing does NOT form a short pieces, which could be easily mistaken with dots or diacratics. To prevent this, the drawing can be skipped for parts with a short width.

Member

behnam commented Feb 15, 2017

We discussed underline/overline methods on the 7 February 2017 weekly meeting.

Here's a summary:

  1. Existing practices (meaning almost any handwriting, lithography, movable type, and traditional word processors) puts underline/overline below/above all glyph parts (letter parts and diacritics). Therefore, this is a desired behavior.

  2. We will keep looking for other practices and will document when we have good evidence.

  3. Based on the samples collected, looks like implementations need to find a better way of calculating a position for underline/overline based on font data. Most probably, it will use ascend and descend values for the positioning.

  4. In any case, if the underline/overline collides with ink, the prefferred default behavior would be to skip the ink.

  5. When skipping ink, it's also preferred to make sure the underline/overline drawing does NOT form a short pieces, which could be easily mistaken with dots or diacratics. To prevent this, the drawing can be skipped for parts with a short width.

@khaledhosny

This comment has been minimized.

Show comment
Hide comment
@khaledhosny

khaledhosny Feb 15, 2017

I saw an image of an Urdu newspaper the other day, where the underline position very low with skip-ink like behaviour, I can’t find it any more :( But while searching for it I found some other skip-ink examples:



and a counter-example:

or even skip-ink for other decoration (the box on the left side):

The last example is even more interesting, since when skipping ink too short line fragmented are avoided and I think that is the right thing to do for any skip-ink implementation for Arabic script since such too short fragments look like dots.

khaledhosny commented Feb 15, 2017

I saw an image of an Urdu newspaper the other day, where the underline position very low with skip-ink like behaviour, I can’t find it any more :( But while searching for it I found some other skip-ink examples:



and a counter-example:

or even skip-ink for other decoration (the box on the left side):

The last example is even more interesting, since when skipping ink too short line fragmented are avoided and I think that is the right thing to do for any skip-ink implementation for Arabic script since such too short fragments look like dots.

@khaledhosny

This comment has been minimized.

Show comment
Hide comment
@khaledhosny

khaledhosny Feb 20, 2017

Here is another example of underlining from metal typesetting (the same mushaf above, printed in 1919):

img_20170220_152400

khaledhosny commented Feb 20, 2017

Here is another example of underlining from metal typesetting (the same mushaf above, printed in 1919):

img_20170220_152400

@behnam behnam added this to Ideas (to discuss) in Authoring ALReq 1.0 Feb 28, 2017

@behnam behnam moved this from Ideas + Discussion to To Do in Authoring ALReq 1.0 Feb 28, 2017

@behnam

This comment has been minimized.

Show comment
Hide comment
@behnam

behnam Apr 4, 2017

Member

Another area to cover is solid line (strike) through positioning.

Test page: https://www.w3.org/International/tests/repo/css-text-decor-3/line-decoration/text-decoration-003.html

Member

behnam commented Apr 4, 2017

Another area to cover is solid line (strike) through positioning.

Test page: https://www.w3.org/International/tests/repo/css-text-decor-3/line-decoration/text-decoration-003.html

@khaledhosny

This comment has been minimized.

Show comment
Hide comment
@khaledhosny

khaledhosny Apr 17, 2017

Here is a new example I found today. The underline still lower than Latin, but not as low as other examples, and ink skipping is employed instead:
img_20170417_161841-scaled

khaledhosny commented Apr 17, 2017

Here is a new example I found today. The underline still lower than Latin, but not as low as other examples, and ink skipping is employed instead:
img_20170417_161841-scaled

@ntounsi

This comment has been minimized.

Show comment
Hide comment
@ntounsi

ntounsi Apr 20, 2017

Contributor

Ink skipping is employed for some letters with a longer descender (e.g. Ain ع and Meem م vs. Waw و or Reh ر ). The last underlined example is not ink-sipped, whereas it is elsewhere (almost the same text 7 lines before)

Contributor

ntounsi commented Apr 20, 2017

Ink skipping is employed for some letters with a longer descender (e.g. Ain ع and Meem م vs. Waw و or Reh ر ). The last underlined example is not ink-sipped, whereas it is elsewhere (almost the same text 7 lines before)

@ntounsi

This comment has been minimized.

Show comment
Hide comment
@ntounsi

ntounsi Apr 20, 2017

Contributor

Other example of underline position very low. (From a classical publication : collection of poems by Ahmad Chawki)
underline3

underline4

Continuous line under all.

Contributor

ntounsi commented Apr 20, 2017

Other example of underline position very low. (From a classical publication : collection of poems by Ahmad Chawki)
underline3

underline4

Continuous line under all.

@behnam

This comment has been minimized.

Show comment
Hide comment
@behnam

behnam Apr 25, 2017

Member

Related issue: w3c/csswg-drafts#1288

Member

behnam commented Apr 25, 2017

Related issue: w3c/csswg-drafts#1288

@behnam

This comment has been minimized.

Show comment
Hide comment
@behnam

behnam Apr 26, 2017

Member

From w3c/csswg-drafts#1288

Some notes from our discussion on the ALReq weekly meeting, specifically regarding this issue for Arabic script:

First, regarding underline position in Arabic script:

  • It almost never (except calligraphy styles/situations) collides with dots or not-that-tall letters (like REH or WAW). So, this behavior is actually something new and needs to be developed. The current common-practice with exiting digital publishing tools is to set a border-bottom instead of underline.
  • To get a good underline experience that's already a common-practice, the underline should be positioned below all the dots and not-that-tall letters. We can develop an algorithm to calculate this from font glyphs data.

Now, about the underline that's too high for Arabic script, assuming that users actually want it:

  • In my opinion, min-underline-ink-width is a property of the typeface and shall be stored in the fonts, possibly per script or even per language.
  • When not provided by the font, we can calculate min-underline-ink-width for the font based on the size of the dot glyphs (dot, two-dots, ...). A possible value would be 200% of the maximum of the dot glyphs' width.
  • Of course some large values will result in underline not getting drawn for most of the width of some words. Well, that's why it shouldn't be positioned so high in the first place!

Personally, I highly recommend to focus on fixing the position problem first, and try to fix the ink issue for a better positioned underline (where in rare cases underline collides with ink, like for a MEEM with a long tail).

Member

behnam commented Apr 26, 2017

From w3c/csswg-drafts#1288

Some notes from our discussion on the ALReq weekly meeting, specifically regarding this issue for Arabic script:

First, regarding underline position in Arabic script:

  • It almost never (except calligraphy styles/situations) collides with dots or not-that-tall letters (like REH or WAW). So, this behavior is actually something new and needs to be developed. The current common-practice with exiting digital publishing tools is to set a border-bottom instead of underline.
  • To get a good underline experience that's already a common-practice, the underline should be positioned below all the dots and not-that-tall letters. We can develop an algorithm to calculate this from font glyphs data.

Now, about the underline that's too high for Arabic script, assuming that users actually want it:

  • In my opinion, min-underline-ink-width is a property of the typeface and shall be stored in the fonts, possibly per script or even per language.
  • When not provided by the font, we can calculate min-underline-ink-width for the font based on the size of the dot glyphs (dot, two-dots, ...). A possible value would be 200% of the maximum of the dot glyphs' width.
  • Of course some large values will result in underline not getting drawn for most of the width of some words. Well, that's why it shouldn't be positioned so high in the first place!

Personally, I highly recommend to focus on fixing the position problem first, and try to fix the ink issue for a better positioned underline (where in rare cases underline collides with ink, like for a MEEM with a long tail).

@shervinafshar shervinafshar self-assigned this May 23, 2017

@shervinafshar shervinafshar moved this from Ready to Pick Up to Drafting in Authoring ALReq 1.0 May 23, 2017

@shahabsiavash

This comment has been minimized.

Show comment
Hide comment
@shahabsiavash

shahabsiavash Nov 9, 2017

Very interesting discussion.

I just saw that now Google Chrome (since 57) is implementing this: text-decoration-skip: ink and in Canary it's enabled by default with text-decoration-skip-ink: auto.

My question is how this underline and strikeouts behave in applications and programs like for example Adobe software? I have tested and it seems they use their own built-in settings. Could it be overridden by users?

I did this and Adobe just doesn't care:

image

shahabsiavash commented Nov 9, 2017

Very interesting discussion.

I just saw that now Google Chrome (since 57) is implementing this: text-decoration-skip: ink and in Canary it's enabled by default with text-decoration-skip-ink: auto.

My question is how this underline and strikeouts behave in applications and programs like for example Adobe software? I have tested and it seems they use their own built-in settings. Could it be overridden by users?

I did this and Adobe just doesn't care:

image

@shervinafshar shervinafshar moved this from Drafting to Ready to Pick Up in Authoring ALReq 1.0 Jan 9, 2018

@shervinafshar shervinafshar removed their assignment Jan 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment