text-combine-upright
Quick Summary for text-combine-upright
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.
Code Usage for text-combine-upright
/* Keyword values */ text-combine-upright: none; text-combine-upright: all; /* Digits values */ text-combine-upright: digits; /* fits 2 consecutive digits horizontally inside vertical text */ text-combine-upright: digits 4; /* fits up to 4 consecutive digits horizontally inside vertical text */ /* Global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: revert; text-combine-upright: unset; More Details for text-combine-upright
text-combine-upright
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.
/* Keyword values */ text-combine-upright: none; text-combine-upright: all; /* Digits values */ text-combine-upright: digits; /* fits 2 consecutive digits horizontally inside vertical text */ text-combine-upright: digits 4; /* fits up to 4 consecutive digits horizontally inside vertical text */ /* Global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: revert; text-combine-upright: unset; Syntax
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.
digits <integer>? Attempts to display a sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range of 2-4 are invalid.
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
none | all | [ digits <integer>? ]
Examples
Example using "digits"
The digits value requires less markup than the all value when digits are being combined, but it is currently not very widely supported by browsers.
HTML<p lang="ja" class="exampleText">平成20年4月16日に</p> .exampleText { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } | Screenshot | Live sample |
|---|---|
Example using "all"
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> html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } | Screenshot | Live sample |
|---|---|
Specifications
| Specification |
|---|
| CSS Writing Modes Level 4 # text-combine-upright |
See also
writing-mode, text-orientation Last modified: Feb 5, 2022, by MDN contributors
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
Random Quote
"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."
I just checked google books for BFG, and the dedication is there.
https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1
Roald Dahl, 1986
