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…