Adjacent items with text decoration should be separated by a small gap

This issue is applicable to Chinese and Japanese.

When two underlined items appear side-by-side, the underline should be broken between the two. For example, although there are no gaps between characters in the code stream, there should be small visible gaps in the underlining of this example, which contains 2 proper nouns ('sòng', and 'ōuyángxiū') and a poem title ('míng fēi qū').

More:

• Clreq
• example

The GAP

None of the major browsers show this gap between text decorations.

css-text-decor-4 The CSS Text specification currently proposes the use of a text-decoration-skip-inset property, although it is not yet finalised and is not supported by any browser. The auto value should automatically produce the slightly shorter line lengths below the characters.

Gecko, Blink, and Webkit browsers all lack support for this property.

Priority

These text decorations are used commonly in Chinese text, and decorations that run into each other creates readability problems. This gap is therefore being labelled as basic.

Tests & results

Interactive test, text-decoration-skip-inset: auto; will create a gap between words that are side by side and underlined using the u tag.

Interactive test, text-decoration-skip-inset: auto; will create a gap between spans that are side by side and underlined using text-decoration-line:underline.

Action taken

Awaiting finalisation of CSS syntax.

Outcomes

tbd

Start with the linked CSS Text Decoration Level 4 specification, especially text-decoration-skip-inset, then review the linked interactive tests and the Clreq handling interlinear punctuation guidance. Done means the syntax is finalised and the expected gap between adjacent underlined Chinese or Japanese items is reflected in the issue outcomes.