How are underlines positioned in Arabic text?

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)

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

The need to specify the vertical place of the underline.
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.

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?

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

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

Is underline meaningful for Arabic script (WRT aesthetic aspect of some styles/fonts)
About position, which baseline to consider,
How should the underline behave with "descender", come under or cross it.
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.

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

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.

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

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

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

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.

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.

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

Here's a summary:

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.
We will keep looking for other practices and will document when we have good evidence.
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.
In any case, if the underline/overline collides with ink, the prefferred default behavior would be to skip the ink.
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.

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.

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

See the addition to the ED for the Gap Analysis doc on the topic of underlines. It points to a new test rig for text-decoration that allows experimentation with the various CSS properties that are relevant.

I've filed browser bugs for some of the issues arising from this confusion in https://bugzilla.mozilla.org/show_bug.cgi?id=1680610 and https://bugs.chromium.org/p/chromium/issues/detail?id=1155268

Related, this twitter thread https://twitter.com/KhaledGhetas/status/1334560119137447937

which includes skip-ink underlines so short that they are confused with dots, due to the underline positin being way too high and at the same height as the underdot.

@Manishearth

@Manishearth @svgeesus This thread is about the distance between the baseline and the underline.

An issue that is more directly focused on the issue of skipped ink can be found at w3c/csswg-drafts#1288.

@svgeesus

@svgeesus correct, the issues I've filed on browsers deal with both: the underline positioning on some browsers on some OSes is really bad independently of skip-ink (which makes it worse)

Navigation Menu

Repository navigation