Underlines too close to text in Arabic

[r12a]

It must be possible to position underlines and overlines further away from the baseline than for Latin text, because ascenders and descenders are longer in many Arabic script fonts. It is common for underlines in Arabic text to be low enough to avoid crossing the ink of descenders in the content, however there are also examples of printed text where ink is skipped – nonetheless, the underline is still usually further from the baseline than, for example, Latin text.

The following image shows typical metrics for Arabic font glyphs compared to Latin. Note the extra vertical space required.

The GAP

There needs to be a way of adjusting the positioning of the underline to move it further away from the baseline than is currently possible on the Web.

For underlines, the CSS Text Decoration spec describes 2 properties that can help with this.

text-underline-position:under is described in Level 3 (CR). This value positions the underline under the element’s text content so that it usually does not cross the descenders. However, a note in the spec says that it does not guarantee that the underline will not conflict with glyphs, as some fonts have descenders or diacritics that extend below the font’s descent metrics.

text-underline-position:from-font is described in Level 4 (WD). Uses font metrics to position the underline, if available, otherwise reverts to auto.

text-underline-offset is described in Level 4 (WD) and allows you to specify the distance from the text-underline-position as auto, as a fixed distance, or as a percentage of of 1em. This can be effective in positioning the underline appropriately, but has to be paired with the font you are using (to make appropriate adjustments) .

Currently text-underline-offset is not supported by Webkit, but is supported by Gecko and Blink.

text-underline-position:under often but not always produces sufficient clearance, depending on the font, with Gecko and Webkit. The position is lower with Blink than for the auto setting, but cuts through text in all fonts.

text-underline-position:from-font fails to clear the text for Gecko, Webkit, and Blink .

More:

• See the discussion in this issue.

Tests & results:

Various interactive tests.

Action taken

Chromium bug for text-underline-offset.

Outcomes

tbd

Priority

This is a basic aspect of text decoration for Arabic.

[r12a]

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:
Arabic & Persian

[fantasai]

https://www.w3.org/TR/css-text-decor-4/#underline-offset

[xfq]

Here's a test of text-underline-offset. See also the tests in WPT. Currently, Gecko supports it, WebKit partially supports it and Blink doesn't support it. See also the Chromium bug.

[r12a]

By coincidence, i've been working on a new test rig for text-decoration. I created 4 tests that are relevant here. I'll edit the comment above to reflect the results.

[r12a]

I rewrote this section to take into account pointers by @fantasai and @xfq.

[hober]

WebKit supports text-underline-position: from-font;, which (in my admittedly limited experience) I've found to be sufficient for positioning underlines correctly for CJK text (e.g. as a Chinese proper name mark).

[r12a]

Thanks @hober but this particular issue is focused on Arabic, and unfortunately, text-underline-position: from-font doesn't appear to work very well for Arabic. See this test

You can type various font names in the provided field. Find system fonts here.

I tried most of the Mac system fonts and Noto and SIL fonts, and in no case did the underline clear the diacritics. In many cases the line didn't clear the ijam marks, and in many more the line position was just under the baseline, which is very problematic.

[r12a]

Updated the results to include a test for text-underline-position:from-font, and noted that Blink now supports text-underline-offset.