CSS text-combine-upright Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The text-combine-upright property controls how adjacent glyphs are visually grouped when text is laid out upright in vertical writing. Its primary role is typographic: it lets short runs of characters (such as numbers, dates, or short abbreviations) be rendered as a compact unit that occupies the space of a single character box in the vertical flow, producing a tighter, more traditional vertical appearance instead of stacking each character separately. This makes vertical text blocks look more natural in East Asian typography and helps keep short sequences from breaking the rhythm and alignment of a line of vertical text.

Because this behavior is specific to vertical upright text, writing-mode and text-orientation settings determine when the combination can take effect: it only applies when characters are laid out upright rather than rotated sideways. In practice that means you get the intended combined appearance only in vertical writing modes with upright text orientation; with sideways orientation the browser can’t or won’t form the same compact glyph grouping. The property also interacts with layout metrics such as line box sizing and line-height, because a combined run is treated as a single typographic unit for spacing and line alignment, which can affect how adjacent lines and inline boxes are positioned.

From a content and accessibility perspective, using text-combine-upright is best reserved for short, typographically conventional sequences (dates, small numeric groups, short abbreviations). Combining characters can change selection, breakpoints, and how assistive technologies present the text, so provide clear markup and fallbacks where semantics matter (for example, use explicit spans, language tags, or aria-labels when the visual grouping would obscure the intended reading order). Also be mindful of font support: the visual result depends on available glyphs and the UA’s fallback behavior, so test with the target fonts to ensure combined glyphs render clearly and do not produce unexpected metrics or line-breaking behavior.

Definition

Initial value: none
Applies to: Non-replaced inline elements
Inherited: Yes
Computed value: Specified keyword
Animatable: No
JavaScript syntax: object.style.textCombineUpright

Interactive Demo

text-combine-upright: none;
writing-mode:vertical-rl;

text-combine-upright: all;
writing-mode:vertical-rl;

2023年12月8日から楽しい

Syntax

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

Values

noneThere is no special processing.
allAttempts 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.

Example

HTML

<div class="wrapper">

    <div class="example">

        <div class="label">text-combine-upright: none;</div>

        <div class="box none">2026年</div>

    </div>



    <div class="example">

        <div class="label">text-combine-upright: digits 2;</div>

        <div class="box digits">2026年</div>

    </div>



    <div class="example">

        <div class="label">text-combine-upright: all;</div>

        <div class="box all">2026年</div>

    </div>

</div>

CSS

/* Example showing text-combine-upright in vertical text */
.wrapper {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    background: #f5f7fa;
}

.example {
    text-align: center;
}

.label {
    margin-bottom: 8px;
    font-size: 13px;
    color: #333;
}

.box {
    writing-mode: vertical-rl;       /* set vertical flow */
    text-orientation: upright;      /* keep characters upright */
    border: 1px solid #d0d7de;
    background: #ffffff;
    padding: 12px 10px;
    font-size: 28px;
    min-height: 120px;
    display: inline-block;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

/* Variants */
.box.none {
    text-combine-upright: none;
}

.box.digits {
    text-combine-upright: digits 2; /* combine two digits into one vertical glyph */
}

.box.all {
    text-combine-upright: all;      /* combine all consecutive characters into one cell */
}

/* small responsive tweak */
@media (max-width: 520px) {
    .wrapper { flex-direction: column; gap: 12px; }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-combine-upright property. Hover over a browser icon to see the version that first introduced support for this CSS property.