text-combine-upright CSS property
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
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;
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]>? ]
<integer> =
<number-token>
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
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;
}
Results
Specifications
| Specification |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-combine-upright
|
|
|
|
|
|
|
|
|
|
|
|
|
all
|
|
|
|
|
|
|
|
|
|
|
|
|
none
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- See implementation notes.
- Uses a non-standard name
- Has more compatibility info.