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 https://github.com/w3c/csswg-drafts/issues/459#issuecomment-261454177

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

[behnam]

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]

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]

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

[behnam]

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]

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:

[ntounsi]

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]

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

Continuous line under all.

[behnam]

Related issue: https://github.com/w3c/csswg-drafts/issues/1288

[behnam]

From https://github.com/w3c/csswg-drafts/issues/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).

[shahabsiavash]

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:

[r12a]

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.

[Manishearth]

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

[svgeesus]

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.

[svgeesus]

[r12a]

@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 https://github.com/w3c/csswg-drafts/issues/1288.

[Manishearth]

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