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

In East Asian digital typography (CJK), characters are historically designed to occupy rigid square em-boxes (full-width or Zenkaku). However, mixing Latin alphanumeric characters, punctuation marks, and Latin loanwords into full-width Chinese or Japanese paragraphs often produces awkward spacing when punctuation and digits occupy overly wide em-squares. The font-variant-east-asian property provides declarative access to OpenType width substitution tables—such as proportional-width (pwid) and full-width (fwid). Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate East Asian character width substitutions in real time.

Understanding East Asian Width Options

OpenType fonts targeting East Asian languages incorporate specialized width lookup tables:

• proportional-width: Triggers OpenType pwid. Ideographs and kana glyphs adjust to their organic optical widths, significantly improving readability in running narrative prose and mobile layouts.
• full-width: Triggers OpenType fwid. Alphanumeric characters and punctuation expand to fill uniform square em-boxes, matching classical tabular Japanese and Chinese layouts.
• jis04 or jis90: Selects specific orthographic glyph revisions alongside width substitutions.

Configuring Strict East Asian Width Variants in CSS

To style modern Japanese prose with organic proportional spacing while enforcing full-width punctuation in legal headers:

/* Apply proportional widths to Japanese article text */
.japanese-editorial-body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-variant-east-asian: proportional-width;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* Enforce traditional full-width characters across tabular headers */
.traditional-table-header {
  font-family: "Hiragino Mincho ProN", serif;
  font-variant-east-asian: full-width;
}

Using proportional-width removes unsightly spacing around parentheses, quotation marks, and commas without requiring specialized typesetting plugins.

Inspecting Width Variants 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 Japanese or Chinese text.
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 Width category, containing Proportional Width (pwid) and Full Width (fwid) toggles.
6. If the active font contains OpenType width 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 width variants fail to render as anticipated, consider these troubleshooting steps:

• Font file table availability: The OpenType pwid and fwid tables are supported in professional Japanese and Chinese typefaces (such as Hiragino, Yu Gothic, or Noto Sans JP). Standard Latin fonts do not contain these tables.
• HTML language tagging: Ensure the enclosing HTML element declares appropriate language tags (e.g. lang="ja" or lang="zh-CN") to assist Safari in selecting appropriate glyph substitution tables.