[css-text-decor] Results for text-underline-position: under

[r12a]

https://drafts.csswg.org/css-text-decor-3/#text-underline-position-property

Here are the results of applying text-underline-position: under to some random text with a bunch of arabic script fonts i have on my system in Canary (today). I also applied text-decoration-skip: ink just because it shows collisions more clearly (it didn't affect the results). All text is set to 30px font-size.

The result is font-dependent. Some don't clear the bottom of the text. (And generally the line seems a little thick to me.) I didn't find any difference whether the language was set to en, ar, fa, or ur.

The following shows that for vowelled text the result is unfortunately much worse.

[r12a]

Fwiw, here are some similar tests for Tibetan, however, i should say that i don't know whether users of the Tibetan script do actually use underline. I didn't find any in the materials i have here.

[khaledhosny]

My guess is that it is using the font descender for the underline position not the actual extents of the text box, which would explain why the results vary so much between fonts. Using a fixed value makes sense I guess since you don’t generally want the underline position to change between different lines based on their context, but may be the descender is not the best choice at least for Arabic since glyphs tend to go past the ascender and descender rather often, no idea what would replace it though.

[r12a]

I'm not sure whether a fixed value would work either. You see the variation in letter size above, even though all font-size is set to 30px. I suppose that with a fixed line fonts like Scheherazade would have a very wide gap between the line and the text, whereas others could still hit the line, unless there was some way to tie the distance to the actual size of the glyphs.

Also, there's the problem that the nastaliq fonts are much more greedy for vertical space than the naskh or ruq'a styles.

[behnam]

The following shows that for vowelled text the result is unfortunately much worse.

@r12a, actually, IMHO, some of those results are actually the best you can get out of the font. For example, the Noto Nastaliq Urdu:

Using a fixed value makes sense I guess since you don’t generally want the underline position to change between different lines based on their context, but may be the descender is not the best choice at least for Arabic since glyphs tend to go past the ascender and descender rather often, no idea what would replace it though.

@khaledhosny, as we have seen in various examples, it does happen that some letters (or diacratics) cross the descender line in Arabic script text, and I thought we agreed that there's nothing wrong with that.

And, about the font property value not being set correctly, what do you think about why the descender is being set too high (or too low) for Arabic fonts?

[khaledhosny]

I'm not sure whether a fixed value would work either.

I meant a fixed font-dependent value.

And, about the font property value not being set correctly, what do you think about why the descender is being set too high (or too low) for Arabic fonts?

Since ascender and descender are mainly for line spacing, some designers will adjust them to get larger line spacing by default and some will do the other way around, so I’m not really sure about re-purposing it for underline position, but it might be the best we can get so far.

Some fonts in the examples here might just have buggy descenders, for example Nafees Nastaliq has very small descender in both OS/2 table’s TypoDescent (used mostly by modern applications) and hhea table (used commonly on Mac) but much larger value in OS/2’s WinDesent (used commonly by Windows applications, especially old ones), which might be a result of the font being tested mainly on Windows rather than an intentional choice.

[kojiishi]

This is so great, thank you @r12a for starting this thread.

We have a bug that we render under-underline too low for CJK on some fonts, because these fonts have internal leading not only for ascender but also for descenders too, and drawing at the descenders (in the font metrics) looks terribly poor.

I was thinking to fix the position to be the bottom of em-box (i.e., bottom of "p") for East Asian scripts and was wondering how it affects other scripts, but IIUC it'll make Arabic underlines worse?

Also, a bit off-topic, but since we take the metrics from the primary font, how often does Arabic use font-family: Times, some-arabic-font; i.e., put Latin font before Arabic font? This happens a lot in East Asian pages, which makes this issue more complicated for me.

[khaledhosny]

Also, a bit off-topic, but since we take the metrics from the primary font, how often does Arabic use font-family: Times, some-arabic-font; i.e., put Latin font before Arabic font? This happens a lot in East Asian pages, which makes this issue more complicated for me.

I happens quite often in Arabic as well.

[fantasai]

Older drafts of css-text-decor-3 have more guidance on underline positioning, fwiw. I don't think it handles fallback fonts, but that seems like an oversight since it delves into varying font settings across elements. https://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/#line-position Some of that guidance could be helpful here for dealing with fallback fonts. Of course, that section was removed because implementers didn't want it...

I don't think there's anything we can do about bad font metrics. I'm happy to put guidance in the spec about which font metrics to use, but certainly the glyph bounding box--which is the only metric that would avoid collisions entirely--is not an acceptable answer here since it can place the underline on top of text in the next line when the font designer has chosen to bleed the glyphs outside the ascent/descent. I suspect the best place to put an underline will vary a lot by typeface: the more cursive ones will require greater levels of collision in order for the text not to look absurdly disjoint from the underline, whereas the more print-like ones will be able to accommodate a nearby underline without so many problems since they maintain a more consistent inked "baseline".

Wrt Tibetan, SIL has some examples: http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=iws-chapter09#964d1526 Afaict from @r12a's examples, it seems more important to avoid collisions with the top of the next line than to avoid collisions with the bottom of the current one, and what we choose to do here should ideally reflect that constraint.

[fantasai]

i18n comment: Turn this into a note/warning/example about under not being entirely under.