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

East Asian typography frequently blends full-width ideographs with western alphanumeric characters, mathematical operators, and punctuation. The OpenType hwid (Half-Width Alternates) feature tag substitutes full-width glyph forms with half-width (0.5em) counterparts. Safari Web Inspector provides dedicated typographic controls to preview and audit half-width glyph substitutions on macOS.

Typographical Role of Half-Width Alternates

Legacy encoding standards often include full-width Latin letters (such as Ａ, Ｂ, Ｃ) and full-width digits. Specifying font-feature-settings: "hwid" 1; activates Apple’s CoreText substitution routines, compressing wide ideographic letters into standard half-width metrics without altering underlying text strings.

Configuring Half-Width Alternates in CSS

Implement half-width typography in your stylesheet:

.cjk-half-width {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-feature-settings: "hwid" 1;
  font-variant-east-asian: half-width;
  line-height: 1.6;
}

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 Half-Width Alternates (hwid) under the Features list.
5. Toggle the switch to observe live glyph compression rendered by CoreText across the character sequence.

Verifying Proportional Text Balance

Ensure that half-width digits align harmoniously with adjacent full-width kanji, maintaining disciplined typographic color and spacing.