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 - Propriété CSS

text-emphasis

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

Description rapide
Mise en exergue du texte.
Statut
Standard
Pourcentages
Voir les propriétés individuelles.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Voir les propriétés individuelles.
Type d'animation
Voir les propriétés individuelles.
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.

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 :

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.

Texte dans une police proportionnelle

Texte dans une police à espacements fixes

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.

Les signes de ponctuation . , ?
Les symboles divers % @ &
L'espace insécable (&nbsp;) ->   <-

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

Exemple 3Annotation     Exemple 4Annotation

Prise en charge par les navigateurs (compatibilité).

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.

1
Text˗emphasis styling
Estimation de la prise en charge en pourcentage du parc actuel.
91%

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.

Les spécifications CSS éditées par le W3C sont organisées en modules. text-emphasis 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é).
Définit la couleur des caractères de mise en exergue.
Position 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.