Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

text-emphasis-position - Propriété CSS

text-emphasis-position

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

Description rapide
Position des caractères de mise en exergue.
Statut
Standard
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:: CRD (document proposé pour la recommandation)

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.

Syntaxes pour text-emphasis-position.

Schéma syntaxique de text-emphasis-position.

text-emphasis-position:
Schéma syntaxique de la propriété CSS text-emphasis-positionSyntaxe de text-emphasis-position (propriété CSS) et des différentes valeurs qu'elle accepte : under, over, right, left. over over under under right right left left
;

Description des 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; text-emphasis-position: inherit; text-emphasis-position: revert; text-emphasis-position: revert-layer; text-emphasis-position: unset;

    La valeur initiale est : over right.

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

Prise en charge par les navigateurs (compatibilité).

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

Colonne 1
Prise en charge par les navigateurs de mise en emphase de texte, consistant à ajouter une marque à proximité de chaque caractère.
Colonne 2
Support de la propriété text-emphasis-position.
Colonne 3
Traitement des valeurs left et right dans la syntaxe de la propriété text-emphasis-position.
1
Text˗emphasis styling
2
text-emphasis-position
3
left
right
Estimation de la prise en charge en pourcentage du parc actuel.
91%
94%
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que text-emphasis-position.

Les spécifications CSS éditées par le W3C sont organisées en modules. text-emphasis-position fait partie du Module CSS - Décoration du texte (CSS Text Decoration Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Choisit le soulignement, le surlignement ou la rayure du texte.
Définit la couleur du trait de décoration.
Type de décoration : souligné, barré, etc.
Propriété raccourcie définissant certaines particularités relatives aux décorations.
Définit comment les décorations héritées des éléments parents doivent être appliquées.
Définit si les lignes de décoration (essentiellement le souligné) s'interrompent au niveau des jambages.
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.
Définit si les décoration du ou des éléments parents doivent être appliquées à cet élément.
Définit si les lignes de décoration (soulignement, rayure...) concernent les espaces.
Type de trait pour la décoration : plein, pointillé, etc.
Définit l'épaisseur des traits de décoration (souligné, barré, surligné).
Mise en exergue du texte.
Définit la couleur des caractères de mise en exergue.
Définit si les mises en exergue doivent s'interrompre sur les espaces, les signes de ponctuation, etc.
Style de mise en exergue.
Définit tous les paramètres d'une ombre appliquée au texte.
Définit la position du trait de soulignement, par rapport à la position de base.
Définit l'emplacement des traits de soulignement.