text-combine-upright
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2022.
Die text-combine-upright CSS Eigenschaft setzt die Kombination von Zeichen in den Raum eines einzelnen Zeichens. Wenn der kombinierte Text breiter als 1em ist, muss die Benutzerschnittstelle den Inhalt innerhalb von 1em anpassen. Die resultierende Komposition wird für Layout und Dekoration als einzelnes aufrecht stehendes Glyph behandelt. Diese Eigenschaft hat nur in vertikalen Schreibmodi eine Wirkung.
Dies wird verwendet, um einen Effekt zu erzielen, der im Japanischen als tate-chū-yoko 縦中横
bekannt ist oder im Chinesischen als 橫向文字
.
Probieren Sie es aus
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;
}
Syntax
/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;
/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;
Werte
none-
Es gibt keine besondere Verarbeitung.
all-
Versucht, alle aufeinanderfolgenden Zeichen innerhalb der Box horizontal zu setzen, sodass sie den Raum eines einzelnen Zeichens innerhalb der vertikalen Linie der Box einnehmen.
Hinweis:
Das CSS-Schreibmodul definiert einen digits <integer> Wert für die text-combine-upright Eigenschaft, um zwei bis vier aufeinanderfolgende ASCII Ziffern (U+0030–U+0039) anzuzeigen, sodass sie den Raum eines einzigen Zeichens innerhalb der vertikalen Linienbox einnehmen. Allerdings wird dies von keinem Browser unterstützt.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | nicht ersetzte Inlineelemente |
| Vererbt | Ja |
| Berechneter Wert | angegebenes Schlüsselwort plus Ganzzahl, falls 'digits' |
| Animationstyp | Not animatable |
Formale Syntax
text-combine-upright =
none |
all |
[ digits <integer [2,4]>? ]
Beispiele
Verwendung von 'all' mit horizontalem Text
Der all-Wert erfordert Auszeichnung um jedes Stück horizontalen Textes, wird jedoch derzeit von mehr Browsern als der digits-Wert unterstützt.
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;
}
Ergebnisse
Spezifikationen
| Specification |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |