How to Inspect CSS font-variant-east-asian in Safari Web Inspector

In international web publishing, East Asian typography (encompassing Japanese Kanji, Chinese Hanzi, and Korean Hanja) contains complex historical and geographic glyph variants. In Japanese typography, standards such as JIS78, JIS83, JIS90, and JIS2004 dictate varying stroke shapes and radical configurations for identical Unicode code points. Furthermore, numbers and punctuation marks within CJK typefaces can render with either full-width (monospaced) or proportional spacing. The CSS font-variant-east-asian property provides control over OpenType CJK layout features. This guide demonstrates how to inspect and audit font-variant-east-asian in Safari Web Inspector.

The Mechanics of font-variant-east-asian

The font-variant-east-asian property maps to underlying OpenType feature tags including:

• jis78 (OpenType jp78): Activates Japanese JIS C 6226-1978 glyph shapes.
• jis90 (OpenType jp90): Activates JIS X 0208-1990 glyph standards.
• simplified (OpenType smpl): Renders simplified Chinese Hanzi glyph variants.
• traditional (OpenType trad): Renders traditional Chinese Hanzi glyph variants.
• proportional-width (OpenType pwid): Replaces full-width em-box glyphs with proportionally spaced characters.
• full-width (OpenType fwid): Enforces classic full-width em-square metrics.

Configuring CJK Typographic Rules in CSS

Implement culturally accurate typographic styling across multilingual article templates:

/* Traditional editorial Japanese publication */
article:lang(ja) {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-variant-east-asian: jis90 proportional-width;
  line-height: 1.8;
}

/* Classical traditional Chinese literature */
article:lang(zh-Hant) {
  font-family: "PingFang TC", "Songti TC", serif;
  font-variant-east-asian: traditional;
}

/* Slashed zero and proportional numeric formatting in CJK tables */
table.cjk-financial td.numeric {
  font-variant-east-asian: proportional-width;
  font-variant-numeric: tabular-nums;
}

Inspecting CJK Layout Features in Safari Web Inspector

1. Launch Safari on macOS and navigate to your multilingual web page.
2. Right-click any CJK heading or paragraph and select Inspect Element.
3. In Web Inspector, open the Elements tab and locate the Computed pane in the right sidebar.
4. Filter by east-asian and confirm that font-variant-east-asian resolves to jis90 proportional-width.
5. Scroll down to the Fonts section and expand the OpenType Features drawer.
6. Safari Web Inspector confirms whether the active font binary includes the corresponding jp90 and pwid glyph substitution tables.

Auditing Glyph Variant Transformations Live

1. In the Styles panel, select the font-variant-east-asian rule.
2. Change the value from jis90 to jis78.
3. Observe how specific Kanji characters (such as “逢” or “辻”) subtly update their radical strokes (e.g. single-dot versus double-dot shin-nyō radical) to conform to older historical orthography.
4. Toggle between proportional-width and full-width to verify that latin numbers and punctuation adapt seamlessly between flowing text and structured tabular matrices.