Text-combine-upright - Propriété CSS

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

Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :

• integer est un nombre entier, positif non nul, sans unité. L'étoile indique que cette valeur peut être omise, elle vaut alors 2.

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

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. Autrement dit, la propriété text-combine-upright n'a aucun effet.

  Dans nos example, la propriété text-combine-upright est appliquée aux parties de texte en bleu.

  TEL 00 11 22 33 44
• 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. Pour que le texte ne soit pas rendu illisible par une trop grande compression, nous avons séparé chacune des syllables par des span.

  TEL0011223344
• text-combine-upright: digits 2; ⚠

  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 (par défaut 2).

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

  TEL 00 11 22 33 44
• 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 avec 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 (2025).

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 3

  Concernant text-combine-upright. Introduction de la propriété text-combine-upright avec les valeurs none et all.
  

  02 Décembre 2010

  Document de travail.

  

  20 Mars 2014

  Candidat à la recommandation.

  

  24 Octobre 2019

  Proposé à la recommandation.

  

  10 Décembre 2019

  Recommandation.

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

  Concernant text-combine-upright. Ajout de la valeur digits pour la propriété text-combine-upright, dans ce module niveau 4 de la spécification "Modes d'écriture".
  

  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 Module CSS - Modes d'écriture. 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 :