Texte-combiner-debout - Astuces CSS

La text-combine-uprightpropriété CSS combine des caractères dans l'espace d'un caractère. La spécification appelle cette composition «horizontale-verticale», ce qui est une manière agréable de décrire le cas d'utilisation: des situations où vous pouvez avoir besoin de certains caractères en mode d'écriture verticale pour s'afficher horizontalement sur la même ligne.

span ( text-combine-upright: all; )

La technique du texte horizontal dans le texte vertical est une technique japonaise appelée tate-chū-yoko. Voici à quoi cela ressemble:

Lorsque vous travaillez avec un mode d'écriture vertical de gauche à droite ( `writing-mode: vertical-rl;`), comme le côté gauche de cette illustration, la `text-combine-upright`propriété peut prendre plusieurs caractères et les afficher horizontalement, divisant essentiellement l'espace des caractères en parties égales en fonction du nombre de caractères sélectionnés. Dans cet exemple, le côté droit montre deux caractères partageant le même espace de caractères à l'intérieur d'un mode d'écriture verticale.

Syntaxe

text-combine-upright: none | all | ( digits ? )

Valeur initiale: none
S'applique à: éléments en ligne non remplacés
Héritée: oui
Pourcentages: n / a
Valeur calculée: mot-clé spécifié, plus entier sidigits
Type d'animation: non animable

Valeurs

text-combine-upright accepte les valeurs suivantes:

none: Il s'agit de la valeur initiale. Aucun caractère n'est affiché horizontalement en mode d'écriture verticale.
all: Tous les caractères typographiques consécutifs dans la boîte verticale contenant sont affichés horizontalement sur la même ligne, occupant l'espace d'un seul caractère dans la boîte verticale.
digits ?: Tous les chiffres ASCII consécutifs dans la zone verticale contenant sont affichés horizontalement sur la même ligne, occupant l'espace d'un seul caractère dans la zone verticale, jusqu'à l'entier spécifié. Si aucun entier n'est spécifique, la valeur par défaut est de 2 chiffres. Tout ce qui est inférieur à 2 et supérieur à 4 n'est pas valide.

/* Keyword values */ text-combine-upright: none; text-combine-upright: all; /* Digits values */ text-combine-upright: digits; /* 2 digits */ text-combine-upright: digits 4; /* 4 digits */ /* Global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset;

Usage

Supposons que nous prenions l'exemple qui vient directement de la spécification, qui est un élément avec un mode d'écriture vertical.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, nous voulons que les nombres de la date s'affichent horizontalement. Il est logique de supposer que l'ajout text-combine-uprightdirectement sur l'élément fera l'affaire:

date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )

Buuuuut, pas tellement. Au moment de la rédaction de cet article, nous devons appliquer la propriété sur les chiffres eux-mêmes pour que cela fonctionne. Un span fera l'affaire.

平成20年4月16日に

date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )

On y va!

Prise en charge du navigateur

Comme nous venons de le voir dans l'exemple, le support du navigateur est un peu dispersé pour le moment. Alors que de nombreux navigateurs offrent une prise en charge au moins partielle pour text-combine-upright, il y a beaucoup moins de support pour la digitsvaleur que pour la allvaleur.

C'EST À DIRE	Bord	Firefox	Chrome	Safari	Opéra
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

Chrome Android	Android Firefox	Navigateur Android	Safari sur iOS	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Source: caniuse

Utilise le nom non standard: -ms-text-combine-horizontal
Reconnaît la digitsvaleur du layout.css.text-combine-upright-digits.enableddrapeau expérimental, mais n'implémente pas encore la prise en charge de la mise en page pour tate-chū-yoko
Utilise le nom non standard: -webkit-text-combine