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 CSS-Eigenschaft text-combine-upright fasst Zeichen auf dem Raum eines einzelnen Zeichens zusammen. Ist der zusammengefasste Text breiter als 1em, muss der User Agent den Inhalt in diesen Raum einpassen. Die resultierende Zusammensetzung wird bei Layout und Gestaltung als eine einzelne aufrechte Glyphe behandelt. Diese Eigenschaft wirkt sich nur in vertikalen Schreibrichtungen aus.
Damit lässt sich ein Effekt erzeugen, der im Japanischen als Tate-chū-yoko 縦中横
und im Chinesischen 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
Für diese Eigenschaft wird einer der folgenden Schlüsselwortwerte angegeben:
none-
Es erfolgt keine besondere Verarbeitung.
all-
Versucht, alle aufeinanderfolgenden Zeichen innerhalb der Box horizontal zu setzen, sodass sie innerhalb der vertikalen Zeile der Box den Raum eines einzelnen Zeichens einnehmen.
Hinweis:
Das Modul CSS writing modes definiert für die Eigenschaft text-combine-upright einen Wert digits <integer>. Damit werden zwei bis vier aufeinanderfolgende ASCII-Ziffern (U+0030–U+0039) so dargestellt, dass sie innerhalb der vertikalen Zeilenbox den Raum eines einzelnen Zeichens einnehmen. Dieser Wert 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]>? ]
<integer> =
<number-token>
Beispiele
all mit horizontalem Text verwenden
Der Wert all erfordert Markup um jeden horizontalen Textabschnitt, wird derzeit aber 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;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |