How to Inspect CSS font-feature-settings Full-Width Alternates (fwid) in Safari Web Inspector

East Asian documents—especially official Japanese forms, legal notices, and structured computational tables—frequently require Latin letters and digits to conform to exact full-width (1em square) em-box dimensions. The OpenType fwid (Full-Width Alternates) feature tag substitutes standard proportional or half-width glyphs with full-width equivalents. Safari Web Inspector provides native typographic inspection tools to preview and audit full-width glyph substitutions on macOS.

Typographical Role of Full-Width Alternates

In vertical and classical East Asian typesetting, standard proportional numbers break the rigid square grid. Activating font-feature-settings: "fwid" 1; ensures that numbers and Latin letters align perfectly with adjacent kanji ideographs on a unified character grid.

Configuring Full-Width Alternates in CSS

Implement full-width typography in your stylesheet:

.cjk-full-width {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-feature-settings: "fwid" 1;
  font-variant-east-asian: full-width;
  line-height: 1.8;
}

Inspecting Features in Safari Web Inspector

1. Open the webpage in Safari.
2. Right-click the target alphanumeric text block and choose Inspect Element.
3. Switch to the Font tab in Web Inspector’s right pane.
4. Locate Full-Width Alternates (fwid) under the Features list.
5. Toggle the switch to observe live glyph expansion rendered by CoreText across the character sequence.

Accessible Screen Reader Compatibility

Because OpenType substitutions operate exclusively at the graphic layout layer, the accessibility tree retains standard semantic text representation, ensuring optimal search indexing and screen reader performance.