[css-text-decor] Control the line height / proximity of text containing emphasis marks

[xfq]

Many fonts (most Simplified/Traditional Chinese fonts and quite a few Japanese fonts) tend to increase line height when using text-emphasis-style, which usually leads to undesirable results.

To address this issue, we may need a new CSS property to:

1. force the browser to select a font that displays emphasis marks correctly without widening line spacing, and/or
2. manage the spacing/proximity of the emphasis marks alongside the text (kind of like text-underline-offset)

I'm not sure if font formats can offer information about the appropriate position of emphasis marks. If so, the UA should use such font-based information when available.

Currently, we already have this text in CSS Text Decoration:

the UA may opt to use a font known to be good for emphasis marks, or the marks may instead be synthesized by the UA.

However, this is insufficient because it is only a MAY, and there is no way for authors to enforce the behavior.

See more background information in w3c/jlreq#446

/cc @bobbytung

[xfq]

See some examples here: https://bug-239693-attachments.webkit.org/attachment.cgi?id=458218

My updated test: https://xfq.github.io/testing/csswg-11257/

[xfq]

Discussed in 17 December 2024 I18N ⇔ CSS call: https://www.w3.org/2024/12/17-i18n-minutes.html#1ddf

[xfq]

Ruby has a similar problem, see this Japanese article: https://taiyolab.com/ja/2025/03/17/issue-of-ruby-on-the-first-line/

See also: mozilla/kitsune#5403 (comment)

[xfq]

In addition, the emphasis generated by many browsers is too far from the main text. The distance here is good (or it can even be closer):

• https://www.w3.org/TR/clreq/#id84
• https://www.w3.org/TR/jlreq/#composition_of_emphasis_dots