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:
Priority
This is a basic aspect of text decoration for Arabic.
Tests & results:
Various interactive tests.
from-font
Many more tests are listed in the article Styling underlines.
Action taken
Chromium bug for text-underline-offset.
Outcomes
All major browser engines now support text-underline-position and text-underline-offset. These can now be used to lower the underline position, although there are still things to consider depending on the script, the font in use, and the browser, when setting an underline position. For details, see the article Styling underlines.
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:underis 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-fontis described in Level 4 (WD). Uses font metrics to position the underline, if available, otherwise reverts toauto.text-underline-offsetis described in Level 4 (WD) and allows you to specify the distance from thetext-underline-positionas 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-offsetis not supported by Webkit, but is supported by Gecko and Blink.text-underline-position:underoften 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-fontfails to clear the text for Gecko, Webkit, and Blink .More:
Priority
This is a basic aspect of text decoration for Arabic.
Tests & results:
Various interactive tests.
from-font
Many more tests are listed in the article Styling underlines.
Action taken
Chromium bug for
text-underline-offset.Outcomes
All major browser engines now support
text-underline-positionandtext-underline-offset. These can now be used to lower the underline position, although there are still things to consider depending on the script, the font in use, and the browser, when setting an underline position. For details, see the article Styling underlines.