How are underlines positioned in Arabic text?

[r12a]

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)

[mostafah]

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

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]

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]

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]

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.

Chrome, Al Bayan font
Safari, default font
Firefox, Al Bayan
Firefox, default font
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]

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

[mostafah]

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

• 29LT Ravi
• BBC Nassim
• Harir
• IR Mitra
• Iran Sans (Persian website)

Chrome

Firefox

Safari

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]

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]

@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]

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

[behnam]

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

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]

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

and contemporary calligraphy:

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