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.
The text-combine-upright CSS property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.
This is used to produce an effect that is known as tate-chū-yoko 縦中横
in Japanese, or as 橫向文字
in Chinese.
Try it
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;
Values
none-
There is no special processing.
all-
Attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.
Note:
The CSS writing modes module defines a digits <integer> value for the text-combine-upright property to display two to four consecutive ASCII digits (U+0030–U+0039) such that it takes up the space of a single character within the vertical line box, however, this is not supported in any browsers.
Formal definition
| Initial value | none |
|---|---|
| Applies to | non-replaced inline elements |
| Inherited | yes |
| Computed value | specified keyword, plus integer if 'digits' |
| Animation type | Not animatable |
Formal syntax
text-combine-upright =
none |
all |
[ digits <integer [2,4]>? ]
Examples
Using 'all' with horizontal text
The all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.
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;
}
Results
Specifications
| Specification |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |
Browser compatibility
Loading…