From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/text-emphasis-position/index.html | 167 +++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/fr/web/css/text-emphasis-position/index.html (limited to 'files/fr/web/css/text-emphasis-position') diff --git a/files/fr/web/css/text-emphasis-position/index.html b/files/fr/web/css/text-emphasis-position/index.html new file mode 100644 index 0000000000..2dfa5fb7cb --- /dev/null +++ b/files/fr/web/css/text-emphasis-position/index.html @@ -0,0 +1,167 @@ +--- +title: text-emphasis-position +slug: Web/CSS/text-emphasis-position +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-emphasis-position +--- +
{{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.

+ +
/* 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
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.
+ +
+

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

+ +

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

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

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 :

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

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

+ +
<p><em>Coucou</em>, je suis <em>là</em></p>
+ +

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

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf