text-combine-upright
Quick Summary for 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.
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 valuenone
Applies tonon-replaced inline elements
Inheritedyes
Computed valuespecified keyword, plus integer if 'digits'
Animation typeNot 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> 
CSS
.exampleText {   writing-mode: vertical-lr;   text-combine-upright: digits 2;   font: 36px serif; } 
Results
ScreenshotLive 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> 
CSS
html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } 
Results
ScreenshotLive 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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
therock Somewhere along this crazy road I learned (often times the hard way) the most important things I can do is be authentic, trust my gut, be the hardest worker in the room, celebrate the mistakes, be a grateful man and always remember that it's nice to be important, but it's more important to be nice.
The Rock
Random CSS Property

:defined

The :defined CSS pseudo-class represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the CustomElementRegistry.define() method).
:defined css reference