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 der Benutzeragent den Inhalt innerhalb von 1em anpassen. Die resultierende Komposition wird als ein einzelnes aufrechtes Glyph für Layout und Dekoration behandelt. Diese Eigenschaft hat nur in vertikalen Schreibmodi Wirkung.
Dies wird verwendet, um einen Effekt zu erzeugen, der in Japanisch als tate-chū-yoko 縦中横
bekannt ist, oder als 橫向文字
in Chinesisch.
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 writing modes Modul 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 einzelnen Zeichens innerhalb des vertikalen Linienkastens einnehmen. Dies wird jedoch 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 ein Markup um jedes Stück horizontalen Text, wird aber derzeit von mehr Browsern unterstützt als der digits Wert.
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 |
Browser-Kompatibilität
Loading…