Text-emphasis - Propriété CSS

Description de la propriété text-emphasis.

Définit une mise en exergue du texte : une façon d'attirer l'attention du lecteur sur un mot ou une phrase. Cette technique est particulièrement utilisée dans les langues CJK.

Exemple : Texte mis en exergue

text-emphasis est une propriété résumée qui correspond aux propriétés suivantes :

• text-emphasis-color : couleur des caractères de mise en exergue.
• text-emphasis-style : caractère ou forme géométrique utilisé pour la mise en exergue : cercle, points, etc.

Il faut ajouter la propriété text-emphasis-position qui définit l'emplacement des marques de mise en exergue par rapport au texte. Cette valeur n'est pas incluse dans la propriété résumée text-emphasis, car on choisit en général la même position pour tout le texte, alors que les autres caractéristiques peuvent changer d'une portion de texte à l'autre.

Les marques de mise en exergue ne sont pas ajoutées au dessus des espaces, quelque soit le type d'espace : classiques, insécables, cadratins, etc.

Exemples.

Exemple 1 - Une marque par caractère.

La première ligne de cet exemple montre que les marques de mise en exergue ne sont pas régulièrement espacées, ce qui est normal puisqu'il y a une marque au dessus de chacun des caractères, et que les lettres n'ont pas toutes la même largeur dans une police proportionnelle.
La deuxième ligne est dans une police à espacements fixes (monospace) : les marques sont régulièrement espacées.

Exemple 2 - Quels caractères ont une marque ?

Sur quels caractères se placent les marques de mise en exergue ? Cet exemple nous montre que seuls les espaces (classiques ou insécables) ne sont pas pourvus d'une marque de mise en exergue. Par contre, les signes de ponctuation des langues latines et les différents symboles ont une marque. La nouvelle propriété text-emphasis-skip, introduite dans le module CSS Text Decoration level 4 devrait permettre de gérer ce paramètre.

Cas particulier des structures Ruby.

Sur une structure Ruby, les mise en exergue sont appliquées de la façon suivante :

• Si la mise en exergue est appliquée sur le container Ruby, elle ne sera appliquée que sur le texte de base (balise rb) bien qu'elle soit affichée au dessus de l'annotation. On peut s'en assurer en comparant le nombre de marques de mise en exergue et le nombre de caractères.
• Si des mises en exergue sont appliquées individuellement sur le texte de base et sur l'annotation, elles se positionneront comme sur le deuxième exemple.

Le rendu est toutefois dépendant du navigateur utilisé.

Compatibilité des navigateurs avec text-emphasis.

La propriété résumée text-emphasis et les propriétés individuelles correspondantes sont bien gérées par les principaux navigateurs actuels. Reportez-vous aux propriétés individuelles pour plus de précision.

Remarques :

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

1

Mise en emphase
du texte

Estimation de la prise en charge globale.

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

Histoire de la propriété text-emphasis.

• Module CSS - Décoration du texte - Niveau 3

  Première présentation de la propriété text-emphasis.
  

  27 Janvier 1999

  Document de travail.

  

  01 Août 2013

  Candidat à la recommandation.

  

  

• Module CSS - Décoration du texte - Niveau 4

  Pas de changement concernant la propriété text-emphasis.
  

  13 Mars 2018

  Document de travail.

  

  

  

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 fait partie du module CSS Text Decoration Module. Les définitions suivantes sont également décrites dans ce module.

Propriétés :