From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/text-emphasis-position/index.md | 209 ++++++++++++----------- 1 file changed, 109 insertions(+), 100 deletions(-) (limited to 'files/fr/web/css/text-emphasis-position') diff --git a/files/fr/web/css/text-emphasis-position/index.md b/files/fr/web/css/text-emphasis-position/index.md index f818083fef..723c88c987 100644 --- a/files/fr/web/css/text-emphasis-position/index.md +++ b/files/fr/web/css/text-emphasis-position/index.md @@ -7,11 +7,12 @@ tags: - Reference translation_of: Web/CSS/text-emphasis-position --- -
{{CSSRef}}
+{{CSSRef}} -

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.

+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](/fr/docs/Web/HTML/Element/ruby) quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée. -
/* Valeur initiale */
+```css
+/* Valeur initiale */
 text-emphasis-position: over right;
 
 /* Valeurs avec mot-clé */
@@ -28,137 +29,145 @@ text-emphasis-position: left under;
 text-emphasis-position: inherit;
 text-emphasis-position: initial;
 text-emphasis-position: unset;
-
+``` -

Position privilégiée

+## 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  :

+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
LanguePositionIllustration
HorizontaleVerticale
Japaneseau dessusà droiteEmphasis 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
Chineseen dessousà droiteEmphasis marks appear below each emphasized character in horizontal Simplified Chinese text.
 + Position privilégiée pour les marques d'emphase en ruby +
LanguePositionIllustration
HorizontaleVerticale
Japaneseau 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
Chineseen 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 {{cssxref("text-emphasis")}}.

-
+> **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 {{cssxref("text-emphasis")}}. -

Syntaxe

+## Syntaxe -

Valeurs

+### 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.
-
+- `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. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Masquer les marques

+### 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 :

+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 : -
ruby {
+```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 :

+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 : -
em {
- /* On utilise text-emphasis pour les <em> */
+```css
+em {
+ /* On utilise text-emphasis pour les  */
   text-emphasis: dot;
 }
 
 em rt {
- /* On masque le ruby dans les éléments <em> */
+ /* On masque le ruby dans les éléments  */
   display: none;
-}
+} +``` -

Exemple live

+### Exemple _live_ -

HTML

+#### HTML -
<p><em>Coucou</em>, je suis <em>là</em></p>
+```html +

Coucou, je suis là

+``` -

CSS

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

Résultat

- -

{{EmbedLiveSample("Exemple_live","100%","100%")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Définition initiale
+} +``` + +#### Résultat + +{{EmbedLiveSample("Exemple_live","100%","100%")}} + +## Spécifications + +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------- | +| {{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.text-emphasis-position")}}

+{{Compat("css.properties.text-emphasis-position")}} -

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("text-emphasis-style")}}
    • -
  • {{cssxref("text-emphasis-color")}}
    • -
  • {{cssxref("text-emphasis")}}
    • -
+- {{cssxref("text-emphasis-style")}} +- {{cssxref("text-emphasis-color")}} +- {{cssxref("text-emphasis")}} -- cgit v1.2.3-54-g00ecf