CSS text-transform full-width in CJK Typography

The CSS property text-transform: full-width is a typographic tool designed to harmonize Latin and half-width characters within East Asian (Chinese, Japanese, and Korean) layouts. This article explains how the property operates by mapping standard half-width Latin glyphs to their full-width Unicode equivalents, how it preserves the traditional square grid of CJK typography, and its specific behavior in both horizontal and vertical text modes.

The Unicode Mapping Mechanism

Standard Latin characters, numbers, and basic punctuation marks originate from the ASCII character set (Unicode range U+0020 to U+007E). In standard proportional fonts, these characters have variable, narrow widths.

When text-transform: full-width is applied, the browser dynamically transforms these standard characters into their counterparts in the Halfwidth and Fullwidth Forms Unicode block (U+FF01 to U+FF5E). For example, a standard Latin letter "A" (U+0041) is rendered as full-width "Ａ" (U+FF21). This is purely a visual transformation; the underlying text in the DOM remains standard ASCII, meaning accessibility tools, copy-paste operations, and search functions are not broken by corrupted text strings.

Preserving the CJK Typographic Grid

East Asian typography traditionally operates on a strict square grid system known as an em-box. Every Chinese character (hanzi), Japanese kanji/kana, and Korean hangul glyph occupies a uniform square cell.

When proportional Latin characters are inserted into CJK body text, they disrupt this rhythm because they occupy significantly less horizontal space. Applying text-transform: full-width forces Latin characters to occupy an entire square em-box, matching the width, baseline, and spacing of adjacent East Asian ideographs. This is especially common in Japanese typography, where mixed alphanumeric data—such as model numbers, addresses, or dates—is expected to conform to the monospaced grid.

Behavior in Vertical Writing Modes

The effect of text-transform: full-width is prominent in vertical writing modes (writing-mode: vertical-rl or vertical-lr):

• Standard Latin Text: By default, Latin words in vertical layouts are often rotated 90 degrees clockwise to run sideways along the column.
• Full-Width Transformed Text: Full-width characters are treated as native East Asian ideographs. Instead of being rotated sideways, each character stays upright and is stacked sequentially from top to bottom, perfectly centered on the vertical line.

Implementation

The property is implemented directly via CSS:

.cjk-mixed-content {
  text-transform: full-width;
}

This declaration affects all Latin letters, ASCII digits, half-width katakana, and basic symbols inside the targeted element, ensuring an even visual distribution across mixed-language typography.