text-emphasis-position
======================

The **`text-emphasis-position`** CSS property sets where emphasis marks are drawn. Like ruby text, if there isn't enough room for emphasis marks, the line height is increased.

Try it
------

Syntax
------


```css
/\* Initial value \*/
text-emphasis-position: over right;

/\* Keywords value \*/
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

/\* Global values \*/
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: revert;
text-emphasis-position: revert-layer;
text-emphasis-position: unset;
```

### Values

`over`

Draws marks over the text in horizontal writing mode.

`under`

Draws marks under the text in horizontal writing mode.

`right`

Draws marks to the right of the text in vertical writing mode.

`left`

Draws marks to the left of the text in vertical writing mode.

Description
-----------

The preferred position of emphasis marks depends on the language. In Japanese for example, the preferred position is `over right`. In Chinese, on the other hand, the preferred position is `under right`. The informative table below summarizes the preferred emphasis mark positions for Chinese, Mongolian and Japanese:

Preferred emphasis mark and ruby position| Language | Preferred position | Illustration |
| --- | --- | --- |
| Horizontal | Vertical |
| Japanese | over | right | Emphasis marks appear over each emphasized character in horizontal Japanese text. | Emphasis marks appear on the right of each emphasized character in vertical Japanese text. |
| Korean |
| Mongolian |
| Chinese | under | right | Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text. |

**Note:** The `text-emphasis-position` cannot be set, and therefore are not reset either, using the `text-emphasis` shorthand property.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `over right` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

text-emphasis-position =   
  [ over | under ]   &&  
  [ right | left ]?    
  
```

Examples
--------

### Preferring ruby over emphasis marks

Some editors prefer to hide emphasis marks when they conflict with ruby. In HTML, this can be done with the following style rule:


```css
ruby {
  text-emphasis: none;
}
```

### Preferring emphasis marks over ruby

Some other editors prefer to hide ruby when they conflict with emphasis marks. In HTML, this can be done with the following pattern:


```css
em {
  text-emphasis: dot; /\* Set text-emphasis for <em> elements \*/
}

em rt {
  display: none; /\* Hide ruby inside <em> elements \*/
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-position-property |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The longhand properties `text-emphasis-style`, `text-emphasis-color`, and the corresponding shorthand property `text-emphasis`.