HTML Guides for text-emphasis-position

The validator only accepts text-emphasis-position as a pair of keywords, over or under together with right or left, so a single keyword such as over is rejected.

text-emphasis-position sets where the emphasis marks drawn by text-emphasis go. These marks are small dots, circles or other shapes placed next to each character, mostly in Chinese, Japanese and Korean text. over and under put them above or below the line in horizontal text, and right and left put them on one side of the line in vertical text.

The current CSS Text Decoration Module Level 3 makes the right or left keyword optional and defaults it to right, so over on its own means the same as over right. The CSS checker inside the validator still follows the older grammar, which required both keywords. It reports a lone over or under, and any value that isn't one of those four keywords.

A lone over often comes from content copied out of a browser or an online word processor that pasted every computed style into a style attribute. In that case the element doesn't use emphasis marks at all, and over right is the property's initial value, so you can delete the declaration without changing how the page looks. If the element does draw emphasis marks, write both keywords: over right renders the same as over.

Invalid example

<p>

<span style="font-weight: 700; text-emphasis-position: over;">Opening hours</span>

</p>

Valid example

Delete the declaration when the element has no emphasis marks:

<p>

<span style="font-weight: 700;">Opening hours</span>

</p>

Or write both keywords when it does:

<p>

<span style="text-emphasis: filled dot; text-emphasis-position: over right;">Opening hours</span>

</p>