text-combine-upright

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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.

Valeur initialenone
Applicabilitéles éléments en ligne non remplacés
Héritéeoui
Médiavisuel
Valeur calculéele mot-clé spécifié suivi d'un entier si 'digits'
Animation typediscrete
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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;
}

ScreenshotLive 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 }

ScreenshotLive sample

Spécifications

Spécification État Commentaires
CSS Writing Modes Module Level 3
La définition de 'text-combine-upright' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui)-webkit[1]
48.0
48.0 (48.0)[2] 11.0-ms[3] (Oui)-webkit[1]
(Oui)
(Oui)-webkit[1]
digits Pas de support Pas de support[4] 11.0-ms[3] Pas de support ?
Fonctionnalité Android Webview Android Chrome pour Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple Pas de support 48.0 48.0 48.0 (48.0)[2] Pas de support Pas de support Pas de support
digits ? ? Pas de support[4] ? ? ? ?

[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

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,