Master Vertical Text Layout: Writing‑mode, Text‑orientation & Text‑combine‑upright

Background

During a writer's inventory activity, the front‑end team needed to reproduce a visual design that featured vertically stacked text and upright numbers. The process revealed several CSS techniques for vertical typography.

Using writing-mode for vertical text

The writing-mode: vertical-rl property rotates the block flow from horizontal to vertical, enabling quick vertical text rendering.

Example markup:

<p class="text-vertical">爱交流，也爱独处</p>
.text-vertical {
  writing-mode: vertical-rl;
}

Ensuring numbers stay upright with text-orientation

Adding text-orientation: upright (and the WebKit prefixed version) makes characters within a vertical flow display upright, which is essential for numeric data.

Example markup:

<p class="text-vertical">999篇日记，12356万字</p>
.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
}

Combining characters for dates with text-combine-upright

The text-combine-upright: all property merges 2‑4 characters horizontally inside a vertical layout, ideal for compact date displays.

Example markup and CSS:

// html
<p class="text-vertical">
  <span class="upright-combine">10</span>月
  <span class="upright-combine">1</span>日时光日记上线
</p>

// css
.text-vertical {
   writing-mode: vertical-rl;
   text-orientation: upright;
}
.upright-combine {
   /* for IE11+ */
   -ms-text-combine-horizontal: all;
   /* for Chrome/Firefox */
   text-combine-upright: all;
   /* for Safari */
   -webkit-text-combine: horizontal;
}

Implementation steps:

Wrap the characters to be merged in an element.

Add text-combine-upright: all to that element.

Provide vendor‑specific fallbacks for IE11 (+) and Safari.

Alternative approaches

JS splitting method

Split all text nodes into individual <span> elements and set the container width to 1em. This forces vertical stacking and upright numbers without CSS rotation.

function text2html(element) {
  var treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
  var node;
  let list = [];
  while ((node = treeWalker.nextNode())) {
    list.push(node);
  }
  list.forEach(function(node) {
    var replaceArr = node.textContent.split('').map(function(str) {
      var newSpan = document.createElement('span');
      newSpan.textContent = str;
      return newSpan;
    });
    node.replaceWith.apply(node, replaceArr);
  });
}

Full‑width number conversion

Converting half‑width digits to full‑width makes them appear upright in vertical flow, but requires additional handling for calculations.

// 数字半转全 0-9 对应 半角48-57，全角65296-65305
function ToDBC(txtstring) {
    var newNumber = "";
    for (var i = 0; i < txtstring.length; i++) {
        if (txtstring.charCodeAt(i) <= 57 && txtstring.charCodeAt(i) >= 48) {
            newNumber = newNumber + String.fromCharCode(txtstring.charCodeAt(i) + 65248);
        } else {
            newNumber = newNumber + txtstring.substring(i, i + 1);
        }
    }
    return newNumber;
}

Key takeaways

Vertical layout can be quickly achieved with writing-mode.

Use text-orientation: upright to keep numbers upright.

For short numeric strings such as dates, text-combine-upright merges characters horizontally for better readability.