Text-box-edge - Propriété CSS

Schéma de la syntaxe de text-box-edge.

Description de la propriété text-box-edge.

La propriété text-box-edge permet la suppression des espacements avant et/ou après les lignes de texte. En tant normal ces espacements sont nécessaires pour éviter que les lignes ne se touchent. Mais il y a des cas où ces espacements sont plus gênants qu'autre chose, en particulier pour les alignements verticaux de textes.

text-box-edge fonctionne en association avec la propriété text-box-trim. D'ailleurs la propriété résumée Text-box permet de les définir toutes les deux en une seule écriture.

text-box-edge détermine à partir de quelle ligne les espacements doivent être supprimés par text-box-trim : text, cap et ex pour le dessus des lignes de texte, et text et alphabetic pour le dessous des lignes. La propriété accepte deux valeurs : la première pour le dessus des lignes et la seconde pour le dessous.

Les valeurs ideographic et ideographic-ink, prévues dans la norme, ne sont pour l'instant traitées par aucun navigateur.

Reportez-vous aux pages sur les propriétés text-box-trim pour la description de cette propriété et text-box pour des exemples d'utilisation.

Valeurs pour text-box-edge.

Dans tous les exemples de cette section, la propriété text-box-trim a été fixée à trim-both.

• text-box-edge: auto;

  Aucun espacement n'est supprimé, ni avant, ni après les lignes de texte. La valeur donnée à text-box-trim est sans importance.

  Ligne de texte
• text-box-edge: cap alphabetic;

  La première valeur concerne les espacements au dessus de la ligne. cap est la ligne qui passe juste au dessus de majuscules. La deuxième valeur concerne les espacement en dessous de la ligne de texte. alphabetic est la ligne qui est juste en dessous des lettres.

  Ligne de texte
• text-box-edge: ex alphabetic;

  ex est la ligne qui passe juste au dessus des lettres minuscules.

  Ligne de texte
• text-box-edge: text text; text-box-edge: text;

  La valeur text concerne aussi bien les espacements au dessus de la ligne que les espacements en dessous. On peut l'écrire une seule fois.

  Ligne de texte
• text-box-edge: initial; (auto) text-box-edge: inherit; text-box-edge: revert; text-box-edge: revertLayer; text-box-edge: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété text-box-edge.

Le simulateur propose les propriétés d'ajuster les valeurs de text-box-edge et text-box-trim car ces deux valeurs interagissent beaucoup l'une sur l'autre. Les effets seront le plus spectaculaires avec :

Compatibilité des navigateurs avec text-box-edge.

La propriété text-box-edge est encore très mal comprise par les navigateur (2025).

1

Propriété
text-box-edge

Estimation de la prise en charge globale.

62%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

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-box-edge.

• Module CSS - Mise en page en ligne - Niveau 3

  Première définition de la propriété text-box-edge.
  

  18 Décembre 2014

  Document de travail.

  

  

  

Voir aussi, concernant les dispositions en ligne.

Le module de spécification dénommé "Module CSS - Mise en page en ligne", ou CSS Inline Layout Module en anglais, définit ce qui est relatif aux alignements verticuax et à la disposition en ligne des éléments, que ce soit dans un objet SVG ou dans un document HTML. Les propriétés suivantes sont décrites dans ce module :

Propriétés :