text-combine-upright

La propriété text-combine-upright définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'1em, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur 1em. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.

Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois.

Syntaxe

/* Valeurs avec un mot-clé */
text-combine-upright: none;
text-combine-upright: all;

/* Valeurs pour les chiffres */
/* 2 chiffres qui se suivent prendront la place
   d'un caractère dans du texte vertical */
text-combine-upright: digits;
/* Compresse jusqu'à 4 chiffres consécutifs afin
   qu'ils occupent l'espace d'un caractère dans 
   du texte vertical */
text-combine-upright: digits 4;

/* Valeurs globales */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: unset;

Valeurs

none

Aucun traitement particulier n'est appliqué.

all

L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte.

digits <n>?

L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle [2;4] sont considérés comme invalides.

Syntaxe formelle

none | all | [ digits <integer>? ]

Exemples

Exemple avec digits

Utiliser digits nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs.

<p lang="ja" class="exempleText">平成20年4月16日に</p>

.exempleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}

Screenshot	Live sample

Exemple avec all

Pour utiliser all, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que digits.

<p lang="zh-Hant">民國<span class="num">105</span
>年<span class="num">4</span
>月<span class="num">29</span>日</p>

html { writing-mode: vertical-rl; font: 24px serif }
.num { text-combine-upright: all }

Screenshot	Live sample

Spécifications

Compatibilité des navigateurs

[1] Pour WebKit et Blink, la propriété était initialement intitulée -webkit-text-combine selon une ancienne version (2011) de la spécification CSS3 sur les modes d'écriture et prenait en charge les valeurs none et horizontal (sans digits).

[2] Selon une ancienne version (2013) de la spécification CSS3 sur les modes d'écriture, Gecko 26.0 (Firefox 26.0 / Thunderbird 26.0 / SeaMonkey 2.23) implémentait cette propriété sous le nom text-combine-horizontal via la propriété layout.css.vertical-text.enabled qui était désactivée par défaut (cf. bug 875250). Avec Gecko 31.0 (Firefox 31.0 / Thunderbird 31.0 / SeaMonkey 2.28), la propriété fut renommée en to text-combine-upright (cf. bug 997006. Avec Gecko 41.0 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38), une nouvelle préférence : layout.css.text-combine-upright.enabled a été ajoutée et dont la valeur par défaut est false. La prise en charge de la disposition (tate-chu-yoko) est disponible depuis Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) (cf. bug 1097499), qui active cette propriété par défaut.

[3] Pour Internet Explorer, la propriété est intitulée -ms-text-combine-horizontal.

[4] Gecko prend en charge cette valeur depuis Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) via la préférence layout.css.text-combine-upright-digits.enabled (les versions antérieures utilisaient layout.css.text-combine-upright.enabled, désactivée par défaut). Toutefois, Gecko n'implémente pas encore la disposition (tate-chu-yoko) pour cette valeur (cf. bug 1258635).

Voir aussi

• writing-mode,
• text-orientation