Text-box - Propriété CSS

Description de la propriété text-box.

text-box est une propriété résumée qui permet de définir en une seule écriture les deux propriétés text-box-trim et text-box-edge. Avec une particularité : contrairement à ce qui se passe avec les autres propriétés résumées, le fait de ne pas spécifier de valeur pour text-box-trim ne fixe pas cette dernière à sa valeur initiale mais à trim-both.

• text-box-trim : Spécifie comment la réduction des dimensions d'une boîte de texte doit se faire pour se conformer à text-box-edge (langages CJK).
• text-box-edge : Définit le métrique des textes CJK.

En imprimerie, comme en informatique, les lignes de textes sont séparées par un espacement. Si ce n'était pas le cas, le texte serait difficile à lire, le haut des majuscules touchant les jambages de la ligne du dessus.

Cet espacement se réparti au dessus et en dessous de chacune des lignes, pas forcément en parts égales d'ailleurs. Quand on fixe, en CSS, des lignes d'une hauteur de 1, cela inclut ces deux espacements.

Néanmoins ces espacements sont gênants dans certains cas. Par exemple, lorsqu'un texte doit étre aligné sur une image disposée à côté. On voit bien dans l'exemple ci-dessous que le haut des lettres n'est pas en face du haut de l'image. Bien sûr on peut corriger cela en appliquant une petite marge négative au titre. Mais la solution avec text-box est plus élégante (voir les exemples).

Coucher de soleil.

Pour connaître la syntaxe détaillé, consultez les pages des propriétés text-box-trim et text-box-edge.

Valeurs pour text-box.

• text-box: auto;

  Les espacements avant et après sont conservés. C'est le cas normal.

• text-box: trim-both ex alphabetic;

  text-box reprend les valeurs pour text-box-trim et text-box-edge. Notre exemple est équivalent à :

  text-box-trim: trim-both; text-box-edge: ex alphabetic;

  N'oubliez pas que le comportement de la propriété résumée est bizarre : en cas d'omission de la valeur pour text-box-trim celle-ci est fixée à trim-both qui n'est pas la valeur initiale.

  
  Reportez-vous à chacune de ses propriétés pour plus de précisions sur les syntaxes (text-box-trim et text-box-edge).

• text-box: initial; (auto) text-box: inherit; text-box: revert; text-box: revertLayer; text-box: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Exemples avec la propriété text-box.

Firefox   ne reconnaît pas text-box. Utiliser un autre navigateur pour visualiser ces exemples.

Aligner une image et un titre.

C'est l'exemple le plus classique. Le problème se pose également lors d'un texte à deux colonnes dont l'une commence par une image.

Coucher de soleil.

Sans utiliser text-box le haut du titre n'est pas aligné sur le haut de l'image. Plus le titre est gros, plus cet effet sera visible.

Coucher de soleil.

En utilisant text-box le problème est résolu. Le haut des lettres majuscules est maintenant bien aligné sur le haut de l'image.

Centrer verticalement deux textes dans des polices différentes.

Les espacements ajoutés avant et après la ligne ne sont pas forcément identique : cela dépend de la police. Lors d'un centrage vertical cela peut être sensible et provoquer un écart visible. C'est le cas entre la police Arial et la police Bebas Neue. Imaginons deux div affichés en inline-block et que l'on souhaite aligner par le milieu dans le sens vertical. L'écart d'alignement est très visible. Mais ici encore la propriété text-box résout le problème.

Prise en charge de text-box par les navigateurs.

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

1

Propriété
text-box-edge

2

Propriété
text-box-trim

3

Proprété résumée
text-box

Estimation de la prise en charge globale.

62%

62%

77%

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

Caniuse

Caniuse

Historique de la propriété text-box.

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

  Introduction de cette propriété résumée text-box.
  

  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 :