-ms-text-combine-horizontal property

Allows for the combination of multiple characters into the space of a single character in vertical writing modes.

This property is read/write.

Syntax

-ms-text-combine-horizontal: none | all | [ digits <integer> ? ]

Property values

One of the following values:

none: Initial value. No special processing requested.
all: Within a vertical writing mode, attempt to display the entire contents of an inline element horizontally within the vertical line box.
digits: Each sequence of consecutive ASCII digits (U+0030–U+0039) with equal or fewer characters as the specified integer value will be treated within the element like an anonymous inline box with 'text-combine-horizontal: all'. If no integer is specified, 2 is used.
integer: The number of consecutive ASCII digits to treat as a single character to display in horizontal writing mode. Default value is 2.

CSS information

Applies To	non-replaced inline elements
Media	visual
Inherited	true
Initial Value	none

Standards information

CSS Writing Modes Module Level 3, Section 9

Remarks

This property only takes effect in vertical writing modes.

This property has no effect on elements containing child elements. In these cases, the element and any descendants are treated as if 'text-combine-horizontal: none' were specified.

Even if the contents of the elements are wider than 1em, Internet Explorer will attempt to fit everything within a 1em width. The resulting composition is treated as a single glyph for the purposes of layout and decoration.

Examples

The following code demonstrates the use of this property with the digits value. The "Text" will display vertically, while all of the digit sequences, except "12345" will display horizontally. The "12345" sequence will display vertically, because it contains more characters than the specified digits value of 4.

CSS


<head>
    <style>
        #container {
            writing-mode: tb-rl;
            border: 1px solid black;
            height: 12em;
            width: 9em;
            padding: 1em;
        }
    </style>
</head>
<body>
    <div id="container" style="-ms-text-combine-horizontal: digits 4">
        Text Text Text Text Text Text Text Text Text Text Text Text Text.
        Text Text Text Text Text Text Text Text Text Text Text Text Text.
        1 12 123 1234 12345. Text Text Text Text Text Text Text.
    </div>
</body>