text-underline-position
=======================

La propriété **`text-underline-position`** définit la position du soulignement utilisé lorsque la propriété `text-decoration` prend la valeur `underline`.


```css
/\* Avec un mot-clé \*/
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/\* Avec plusieurs mots-clés \*/
text-underline-position: under left;
text-underline-position: right under;

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


Cette propriété est héritée sur les différents éléments et n'est pas réinitialisée avec la propriété raccourcie `text-decoration`, ce qui permet de la définir simplement pour l'ensemble du document.


```css
:root {
  /\* Une meilleure règle par défaut pour un document \*/
  /\* avec de nombreuses formules chimiques \*/
  text-underline-position: under;
}
```

Syntaxe
-------

### Valeurs

`auto`

Ce mot-clé permet à l'agent utilisateur d'utiliser un algorithme pour choisir entre `under` et `alphabetic`.

`under`

Ce mot-clé force la ligne à se situer sous la ligne de base, à une position où elle ne traversera pas de jambage. Cela est notamment utile lorsqu'on veut souligner de façon lisible des formules chimiques ou mathématiques (qui utilisent fréquemment des indices).

`left`

In vertical writing-modes, this keyword forces the line to be placed on the *left* of the characters. In horizontal writing-modes, it is a synonym of `under.`

`right`

Pour les modes d'écritures verticaux, ce mot-clé force la ligne à être placée à droite des caractères. Pour les modes d'écritures horizontaux, ce mot-clé est synonyme de `under.`

`auto-pos`
Non-standard

Ce mot-clé est synonyme de `auto` et c'est ce dernier qui doit être utilisé à la place.

`above`
Non-standard

Ce mot-clé force la ligne à être dessinée au dessus du texte. Lorsqu'on écrit avec un script d'Asie orientale, la valeur `auto` aura un effet semblable.

`below`
Non-standard

Ce mot-clé force la ligne à être dessinée sous le texte. Lorsqu'on utilise un texte alphabétique, la valeur `auto` aura un effet semblable.

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

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

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

text-underline-position =   
  auto                           |  
  [ under || [ left | right ] ]    
  
```

Exemples
--------

### HTML


```html
<p class="chimique">C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>
<p class="defaut">
  Et là avec des <sub>indices</sub>
  et du jambage
</p>
```

### CSS


```css
.chimique {
  text-decoration: underline;
  text-underline-position: under;
}

.defaut {
  text-decoration: underline;
  text-underline-position: auto;
}
```

### Résultat

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

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

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

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

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

* `text-decoration`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-color`
* La documentation sur les valeurs non-standard utilisées par Microsoft