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

La propriété **`text-emphasis-position`** permet de décrire l'emplacement des marques d'emphase quand elles sont utilisées. L'ajout des marques a le même effet que les annotations ruby quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée.


```css
/\* Valeur initiale \*/
text-emphasis-position: over right;

/\* Valeurs avec mot-clé \*/
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;

/\* Valeurs globales \*/
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: unset;
```

Position privilégiée
--------------------

La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais :

Position privilégiée pour les marques d'emphase en ruby| Langue | Position | Illustration |
| --- | --- | --- |
| Horizontale | Verticale |
| Japanese | au dessus | à droite | 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. |
| Mongolian |
| Chinese | en dessous | à droite | Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text. |

**Note :** La propriété `text-emphasis-position` ne peut pas être définie (et donc ne peut pas être redéfinie) avec la propriété raccourcie `text-emphasis`.

Syntaxe
-------

### Valeurs

`over`

Les marques sont dessinées au-dessus du texte lorsqu'il est écrit en mode horizontal.

`under`

Les marques sont dessinées en-dessous du texte lorsqu'il est écrit en mode horizontal.

`right`

Les marques sont dessinées à droite du texte lorsqu'il est écrit en mode vertical.

`left`

Les marques sont dessinées à gauche du texte lorsqu'il est écrit en mode vertical.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `over right` |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

Syntaxe formelle
----------------
```

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

Exemples
--------

### Masquer les marques

Certains éditeurs préfèrent masquer les marques d'emphase lorsque celles-ci entre en conflit avec les annotations ruby. On peut utiliser la règle suivante :


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


D'autres préfèrent masquer le contenu ruby et privilégier les marques d'emphase. On peut obtenir cet effet avec les déclarations suivantes :


```css
em {
  /\* On utilise text-emphasis pour les <em> \*/
  text-emphasis: dot;
}

em rt {
  /\* On masque le ruby dans les éléments <em> \*/
  display: none;
}
```

### Exemple *live*

#### HTML


```html
<p><em>Coucou</em>, je suis <em>là</em></p>
```


#### CSS


```css
em {
  text-emphasis-style: sesame;
  text-emphasis-position: under right;
}
```


#### Résultat

Spécifications
--------------

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

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* `text-emphasis-style`
* `text-emphasis-color`
* `text-emphasis`