text-combine-upright CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.
Die text-combine-upright CSS-Eigenschaft kombiniert Zeichen in den Platz eines einzelnen Zeichens. Wenn der kombinierte Text breiter als 1em ist, muss der Benutzeragent die Inhalte innerhalb von 1em anpassen. Die resultierende Komposition wird für Layout und Dekoration als einzelnes aufrechtes Glyphen betrachtet. Diese Eigenschaft hat nur Auswirkungen in vertikalen Schreibmodi.
Dies wird verwendet, um einen Effekt zu erzeugen, 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 spezielle Verarbeitung.
all-
Versucht, alle aufeinanderfolgenden Zeichen innerhalb des Kastens horizontal zu setzen, sodass sie den Raum eines einzelnen Zeichens innerhalb der vertikalen Linie des Kastens einnehmen.
Hinweis:
Das CSS-Schreibmodul definiert einen digits <integer>-Wert für die Eigenschaft text-combine-upright, um zwei bis vier aufeinanderfolgende ASCII-Ziffern (U+0030–U+0039) so anzuzeigen, dass sie den Raum eines einzelnen Zeichens innerhalb der vertikalen Linienbox einnehmen. Dieser Wert wird jedoch in keinen Browsern 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]>? ]
<integer> =
<number-token>
Beispiele
Verwendung von 'all' mit horizontalem Text
Der Wert 'all' erfordert eine Markierung um jedes Stück horizontalen Text, wird jedoch derzeit von mehr Browsern unterstützt als der Wert '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;
}
Ergebnisse
Spezifikationen
| Spezifikation |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |