Text-emphasis-position - Propriété CSS

text-emphasis-position

Résumé des caractéristiques de la propriété text-emphasis-position

Description rapide
Définit la position des caractères de mise en exergue.
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
over | under | left | right
Pourcentages
Ne s'appliquent pas.
Valeur initiale
over right
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété text-emphasis-position passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Décoration du texte
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)

Syntaxe de text-emphasis-position (schéma).

Text-emphasis-position property - Syntax diagramSyntax diagram of the text-emphasis-position CSS property. See stylescss.free.fr for details. over over under under right right left lefttext-emphasis-position:;text-emphasis-position:;
Schéma syntaxique de la propriété text-emphasis-position.
Description des valeurs et exemples

Description de la propriété text-emphasis-position.

Définit l'emplacement des caractères de mise en exergue par rapport au texte.

Exemple de texte mis en exergue

text-emphasis-position attend une ou deux valeurs séparées par un espace. Si une seule valeur est précisée, ce sera over ou under. Si deux valeurs sont précisées, la deuxième valeur sera left ou right.

Pour une présentation plus détaillée de la mise en exergue reportez-vous à la propriété résumée text-emphasis.

Reportez-vous également à la propriété writing-mode qui définit les sens d'écriture (horizontal ou vertical) et qui influence également la position des caractères de mise en exergue.

Valeurs pour text-emphasis-position.

  • text-emphasis-position: over;

    Les marques de mise en exergue sont placées au dessus du texte.

    Exemple
  • text-emphasis-position: under;

    Les marques de mise en exergue sont placées en dessous du texte.

    Exemple
  • text-emphasis-position: under left;

    La première valeur indique la position des marques de mise en exergue dans le cas d'une écriture horizontale. La deuxième valeur dans le cas d'une écriture verticale (langues CJK).

    Si la deuxième valeur n'est pas précisée, sa valeur par défaut est right. La première valeur est obligatoire (il n'est pas possible d'écrire simplement left ou right).

    Toutes les combinaisons sont possibles. Le W3C précise les valeurs les plus courantes en fonction de la langue :

    Japonaisover right
    Coréenover right
    Mongolien  over right
    Chinoisunder right
    Exemple
  • text-emphasis-position: initial; (over right) text-emphasis-position: inherit; text-emphasis-position: revert; text-emphasis-position: revertLayer; text-emphasis-position: unset;

    Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'animation de la propriété text-emphasis-position.

L'animation de la propriété text-emphasis-position se traduit simplement par une bascule des marques de mise en exergue entre le dessus et le dessous du texte.

Mise en exergue par des ronds rouges

Simulateur pour text-emphasis-position.

Le simulateur vous permet de visualiser l'effet de text-emphasis-position en fonction de la direction et du sens d'écriture pour plusieurs familles de langues.

Mode d'écriture :
text-emphasis-position :
Texte de démonstration

Support de text-emphasis-position.

Pas de problème de compatibilité à signaler sur les navigateurs actuels avec la syntaxe de la propriété.

Colonne 1
Support d'une méthode pour mettre du texte en exergue, la plupart du temps en ajoutant une petite marques à proximité de chacun des caractères. Cette technique est fréquemment utilisée dans les écritures asiatiques.
Colonne 2
Support par les navigateurs de la propriété text-emphasis-position pour indiquer l'emplacement des marques de mise en exergue par rapport au caractère principal.

Remarques :

(1) Avec le préfixe du navigateur -webkit-.

1
Mise en emphase
du texte
2
Propriété
text-emphasis-position
Estimation de la prise en charge globale.
95%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

1

Baidu Browser

1

Opéra

Samsung Internet

Chrome

Safari

Firefox

Safari sur IOS

Edge

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Évolution de la propriété text-emphasis-position.

Voir aussi, au sujet des décorations de texte.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété text-emphasis-position fait partie du module CSS Text Decoration Module. Les définitions suivantes sont également décrites dans ce module.

Propriétés :

text-decoration
Propriété résumée permettant de définir l'essentiel des paramètres de décoration de texte (couleur, type de trait...).
text-decoration-color
Définit la couleur du trait de décoration (souligné, rayure...).
text-decoration-line
Définit le type de décoration : souligné, barré, etc.
⚠
text-decoration-skip
Propriété raccourcie définissant ce que les traits de décoration doivent sauter (espaces, jambage, etc.).
⚠
text-decoration-skip-box
Définit comment les décorations héritées des éléments parents doivent être appliquées.
⚠
text-decoration-skip-ink
Définit si les lignes de décoration (essentiellement le souligné) s'interrompent au niveau des jambages.
⚠
text-decoration-skip-inset
Définit comment les décorations de l'élément lui même (et non pas celles des éléments parents) doivent être appliquées.
⚠
text-decoration-skip-self
Définit si les décoration du ou des éléments parents doivent être appliquées à cet élément.
⚠
text-decoration-skip-spaces
Définit si les lignes de décoration (soulignement, rayure...) concernent les espaces.
text-decoration-style
Type de trait pour la décoration : plein, pointillé, etc.
text-decoration-thickness
Définit l'épaisseur des traits de décoration (souligné, barré, surligné).
text-emphasis
Propriété résumée qui définit tous les paramètres de la mise en exergue d'un texte.
text-emphasis-color
Définit la couleur des caractères de mise en exergue.
⚠
text-emphasis-skip
Définit si les mises en exergue doivent s'interrompre sur les espaces, les signes de ponctuation, etc.
text-emphasis-style
Spécifie le style de mise en exergue.
text-shadow
Cette propriété résumée définit tous les paramètres de l'ombre appliquée au texte : couleur, décalage, etc.).
text-underline-offset
Définit la position du trait de soulignement, par rapport à la position de base.
text-underline-position
Définit l'emplacement des traits de soulignement.