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 March 2022.

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 der Benutzeragent 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 eine Wirkung.

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

Syntax

css
/* 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 der Box horizontal zu setzen, sodass sie den Raum eines einzelnen Zeichens innerhalb der vertikalen Linie der Box einnehmen.

Hinweis: Das Modul CSS-Schreibmodi 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 der vertikalen Linienbox einnehmen. Dies wird jedoch in keinem Browser unterstützt.

Formale Definition

Initialer Wertnone
Anwendbar aufnicht ersetzte Inlineelemente
VererbtJa
Berechneter Wertangegebenes Schlüsselwort plus Ganzzahl, falls 'digits'
AnimationstypNot animatable

Formale Syntax

text-combine-upright = 
  none                         |
  all                          |
  [ digits <integer [2,4]>? ]

Beispiele

Verwendung von 'all' mit horizontalem Text

Der all-Wert erfordert eine Markierung um jedes Stück horizontalen Textes, wird jedoch derzeit von mehr Browsern unterstützt als der digits-Wert.

HTML

html
<p lang="zh-Hant">
  民國<span class="num">105</span>年<span class="num">4</span>月<span
    class="num"
    >29</span
  >日
</p>

CSS

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

BCD tables only load in the browser

Siehe auch