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 legt die Kombination von Zeichen in den Raum eines einzelnen Zeichens fest. Wenn der kombinierte Text breiter als 1em ist, muss die Benutzeroberfläche den Inhalt innerhalb von 1em anpassen. Die resultierende Komposition wird für Layout und Dekoration als einzelnes aufrechtes Glyph behandelt. Diese Eigenschaft hat nur in vertikalen Schreibrichtungen einen Effekt.
Dies wird verwendet, um einen Effekt zu erzeugen, der auf Japanisch als tate-chū-yoko 縦中横
oder auf Chinesisch als 橫向文字
bekannt ist.
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
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
none-
Es erfolgt 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 text-combine-upright Eigenschaft, um zwei bis vier aufeinanderfolgende ASCII Ziffern (U+0030–U+0039) so darzustellen, dass sie den Raum eines einzelnen Zeichens innerhalb des vertikalen Linienkastens einnehmen, jedoch wird dies in keinem Browser unterstützt.
Offizielle Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | nicht ersetzte Inlineelemente |
| Vererbt | Ja |
| Berechneter Wert | angegebenes Schlüsselwort plus Ganzzahl, falls 'digits' |
| Animationstyp | Not animatable |
Offizielle Syntax
text-combine-upright =
none |
all |
[ digits <integer [2,4]>? ]
<integer> =
<number-token>
Beispiele
Verwendung von 'all' mit horizontalem Text
Der all-Wert erfordert eine Markierung um jedes Stück horizontalen Text, wird jedoch 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
| Spezifikation |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |