Text-combine-upright - Propriété CSS

Syntaxe de text-combine-upright (schéma).

Description des termes utilisés sur le schéma :

• integer est un nombre entier, positif non nul, sans unité.

Description de la propriété text-combine-upright.

La propriété text-combine-upright gère l'orientation de groupes de caractères dans le cas d'une écriture verticale, comme c'est le cas dans les langues chinoise, japonaises (CJK ou en hébreu et quelques autres langues. La propriété n'a aucun effet si l'écriture est horizontale.

On peut souhaiter par exemple que les chiffres d'un nombre restent groupés, et sur une même ligne, bien que le reste du texte se déroule verticalement, comme dans l'exemple ci-dessous.
Le deuxième exemple montre également que le navigateur est sensé faire tenir le groupe de chiffres (ou de caractères) dans la hauteur du texte.
Enfin le troisième exemple est une utilisation détournée de text-combine-upright. La propriété a été appliquée sur chacun des mots séparément de façon à ce qu'ils soient les uns en dessous des autres et avec une largeur identique.

Les années 60

L'année 691969

Effetdestyle

Les exemples de cette page sont en français mais la propriété text-combine-upright est surtout utilisée dans les langues dont la direction d'écriture est verticale. Elle peut cependant être intéressante dans des cas particuliers comme l'écriture de titres verticaux.

Consultez la page de la propriété writing-mode pour une présentation générale des modes d'écriture en fonction de la langue du texte.
Et voyez également la propriété text-orientation qui gère l'orientation des caractères de façon unitaire.

Valeurs pour text-combine-upright.

• text-combine-upright: none;

  Les caractères sont les uns en dessous des autres, leur orientation étant déterminée par la propriété text-orientation.

• text-combine-upright: all;

  Tous les caractères du texte de l'élément sont groupés ensemble sur la même ligne. Leur largeur est réduite pour tenir dans la hauteur normale du texte dans la police actuelle.

• text-combine-upright: digits 4; ⚠

  Cette valeur a été récemment ajoutée, et est encore peu reconnue par les navigateurs. Elle est composée du mot digits suivie d'un espace et d'un chiffre.

  Dans notre exemple, les caractères, lorsqu'ils sont des chiffres, sont groupés par quatre, alignés horizontalement, et leur largeur est ramenée à la hauteur du texte.

• text-combine-upright: initial; (none) text-combine-upright: inherit; text-combine-upright: revert; text-combine-upright: revertLayer; text-combine-upright: unset;

  Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'animation de la propriété text-combine-upright.

La propriété text-combine-upright ne peut pas être animée.

Simulateur pour la propriété text-combine-upright.

Le simulateur applique la propriété text-combine-upright (avec la valeur que vous choisissez) aux balises span qui entourent les valeurs numériques et le titre vertical (ces portions de texte apparaissent en bleu).

Support de text-combine-upright.

La propriété text-combine-upright est bien prise en charge par les navigateurs actuels, sauf en ce qui concerne la valeur digits qui n'est pas encore bien reconnue (2023).

Remarques :

(1) Internet Explorer utilise la propriété non standard -ms-text-combine-horizontal.

1

Propriété
text-combine-upright

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la propriété text-combine-upright.

• Module CSS - Modes d'écriture - Niveau 4

  Introduction de la propriété text-combine-upright dans le niveau 4 de la spécification sur les textes.
  

  07 Décembre 2017

  Document de travail.

  

  24 Mai 2018

  Candidat à la recommandation.

  

  

Voir aussi, concernant les modes d'écriture.

La spécification concernant les modes d'écriture est dénommée CSS Writing Modes. Elle regroupe tout ce qui concerne l'écriture bidirectionnelle, et la gestion fine des écritures verticales (CJK). La propriété text-combine-upright est décrite dans ce module, ainsi que les propriétés ci-dessous :

Propriétés :