How to Inspect CSS font-feature-settings JIS04 Proportional Kana and Japanese JIS04 Mathematical Alternate Forms in Safari Web Inspector

Precision Japanese typography rendered across Apple Safari requires granular control over OpenType glyph substitution tables. When rendering mathematical proofs, scientific documents, and technical annotations, standard full-width glyph contours can produce visual awkwardness and inconsistent rhythm. By combining Japanese JIS X 0213:2004 (JIS04) glyph variants with proportional kana (pkna) and mathematical Greek/symbol alternates, front-end engineers can achieve balanced East Asian typesetting across macOS and iOS platforms.

Apple Safari provides deep typographic inspection tools through its Web Inspector. This guide demonstrates how to configure modern CSS OpenType feature strings and verify active glyph substitution using Safari’s dedicated Font Details panel.

Understanding JIS04 and Mathematical Kana Typography

The JIS04 standard specifies revised stroke geometry and historical glyph distinctions for 168 kanji ideographs. In professional Japanese web typography, pairing these glyph updates with proportional kana metrics eliminates excessive whitespace around hiragana and katakana characters without disrupting structural kanji alignments.

The primary OpenType tags and their CSS equivalents are summarised below:

Configuring Typographic Rules in CSS

To ensure robust cross-platform rendering across Safari and WebKit browsers, declare high-level properties alongside low-level font-feature-settings fallbacks:

.japanese-mathematical-spec {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.125rem;
  line-height: 1.85;
  text-rendering: optimizeLegibility;

  /* Standard CSS syntax */
  font-variant-east-asian: jis04 proportional-width;

  /* Explicit OpenType low-level tags */
  font-feature-settings: "jp04" 1, "pkna" 1, "mgrk" 1, "kern" 1;
}

.japanese-half-width-metric {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-variant-east-asian: jis04 alternate-half-width;
  font-feature-settings: "jp04" 1, "halt" 1;
}

Inspecting Glyph Substitution in Safari Web Inspector

Verify OpenType feature execution using Safari’s native typography tooling:

1. Launch Safari and navigate to Develop > Show Web Inspector (or press Option + Command + I).
2. Use the element selection tool (Shift + Command + C) to highlight the target Japanese text node.
3. In the right-hand panel, select the Fonts tab located alongside Styles and Computed.
4. Expand the Font Details section to examine active OpenType substitution tags.
5. Verify that JIS2004 Forms (jp04) and Proportional Kana (pkna) are highlighted in blue, indicating active font engine binding.