text-combine-upright
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2022.
La propriété CSS 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 que 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.
C'est utilisé pour produire un effet connu sous le nom de tate-chū-yoko 縦中横
en japonais, ou sous le nom de 橫向文字
en chinois.
Exemple interactif
text-combine-upright: none;
text-combine-upright: all;
<section class="default-example" id="default-example">
<div>
<p>
<span class="transition-all" id="example-element"
>2022<span>年</span>12<span>月</span>8</span
>日から楽しい
</p>
</div>
</section>
p {
writing-mode: vertical-rl;
}
Syntaxe
/* Valeurs avec un mot-clé */
text-combine-upright: none;
text-combine-upright: all;
/* Valeurs globales */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
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.
Note :
Le module modes d'écriture CSS définit une valeur digits <integer> pour la propriété text-combine-upright afin d'afficher deux à quatre chiffres ASCII consécutifs (U+0030-U+0039) de sorte qu'ils occupent l'espace d'un seul caractère dans la boîte de ligne verticale, cependant, cela n'est pris en charge par aucun navigateur.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | les éléments en ligne non remplacés |
| Héritée | oui |
| Valeur calculée | le mot-clé défini suivi d'un entier si 'digits' |
| Type d'animation | Non animable |
Syntaxe formelle
text-combine-upright =
none |
all |
[ digits <integer [2,4]>? ]
<integer> =
<number-token>
Exemples
Utiliser all avec du texte horizontal
La valeur all nécessite un balisage autour de chaque fragment de texte horizontal, mais elle est actuellement prise en charge par plus de navigateurs que la valeur digits.
HTML
<p lang="zh-Hant">
民國<span class="num">105</span>年<span class="num">4</span>月<span
class="num"
>29</span
>日
</p>
CSS
html {
writing-mode: vertical-rl;
font: 24px serif;
}
.num {
text-combine-upright: all;
}
Résultats
Spécifications
| Spécification |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
writing-mode,text-orientation