How to Inspect CSS font-variant-east-asian Simplified and Traditional Forms in Safari Web Inspector

In internationalized web applications targeting East Asian locales—specifically Chinese, Japanese, and Korean (CJK) typography—the same Unicode ideographic codepoints frequently have different regional or historical standard forms. For instance, Simplified Chinese (mainland China) and Traditional Chinese (Taiwan, Hong Kong) often use distinct character strokes for identical semantic meanings. In modern CSS Fonts Module Level 4, the font-variant-east-asian property provides declarative access to OpenType smpl (Simplified) and trad (Traditional) glyph tables. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate East Asian glyph substitutions in real time.

Understanding CJK OpenType Variants

OpenType fonts targeting East Asian scripts incorporate specialized regional and historical variant lookup tables:

• simplified: Triggers OpenType smpl, rendering simplified character strokes according to mainland Chinese orthographic standards.
• traditional: Triggers OpenType trad, rendering classic traditional character strokes according to historical or Taiwanese standards.
• jis78, jis83, jis90, jis04: Renders Japanese character shapes according to specific JIS standard revisions.

Using font-variant-east-asian: simplified or traditional allows web authors to display appropriate cultural glyphs without altering underlying text encoding.

Configuring Strict East Asian Typography in CSS

To style East Asian text passages with appropriate orthographic forms:

/* Apply Traditional Chinese glyph variants */
.classical-chinese-text {
  font-family: "PingFang TC", "Songti TC", serif;
  font-variant-east-asian: traditional;
  line-height: 1.8;
}

/* Apply Simplified Chinese glyph variants */
.mainland-chinese-text {
  font-family: "PingFang SC", "Songti SC", sans-serif;
  font-variant-east-asian: simplified;
}

Inspecting East Asian Glyphs in Safari Web Inspector

Safari Web Inspector allows web authors to verify active OpenType East Asian tables directly from the visual browser interface:

1. Launch Safari and navigate to Develop > Show Web Inspector (Cmd+Option+I on macOS).
2. Select the Elements panel and click on an element containing CJK characters.
3. In the right-hand details pane, click the Font icon in the inspector toolbar.
4. Scroll down to the Font Variant and OpenType Features sections.
5. Locate the East Asian Variant category, including Simplified (smpl) and Traditional (trad) toggles.
6. If the active font contains OpenType East Asian lookup tables, Safari highlights active selections with blue status indicators. You can toggle switches directly to preview visual transformations in real time.

Diagnosing Typography Support Pitfalls

If East Asian glyph variants fail to display or fall back to default shapes, consider these troubleshooting steps:

• Font file table availability: The OpenType smpl and trad tables are supported in comprehensive Pan-CJK fonts (such as Noto Sans CJK, PingFang, or Source Han Sans). Western fonts do not contain these tables.
• HTML language attributes: Always pair CSS declarations with appropriate language tags (e.g. lang="zh-Hant" or lang="zh-Hans") so that text rendering engines apply correct fallback font priority.