How to Inspect CSS font-feature-settings JIS04 Proportional Kana and Japanese JIS04 Contextual At Sign Alternates in Safari Web Inspector

Typography on the modern web demands rigorous rendering precision across multilingual orthographies. In Japanese typography, the JIS X 0213:2004 (JIS04) specification introduced significant revisions to standard glyph shapes, stroke counts, and orthographic alignments compared to legacy JIS78, JIS83, and JIS90 standards. When formatting editorial layouts, technical specifications, and legal documentation in Japanese, typographers combine JIS04 OpenType feature tags ("jp04") with Proportional Kana ("pkna") and contextual commercial at sign (@) glyph alternates. Apple’s CoreText layout engine in macOS and iOS renders these OpenType features natively inside WebKit. This comprehensive guide demonstrates how to configure, inspect, and debug JIS04 proportional kana and contextual at sign alternates in Safari Web Inspector.

OpenType Typography Engine Architecture in WebKit

WebKit delegates font layout and glyph substitution to Apple’s CoreText framework. When CSS specifies font-feature-settings or high-level properties such as font-variant-east-asian, CoreText queries the font’s GSUB (Glyph Substitution) and GPOS (Glyph Positioning) tables.

The "jp04" tag selects the JIS X 0213:2004 glyph forms, while "pkna" alters fixed-width em-square kana glyphs into visually harmonious proportional forms. When coupled with at-sign glyph alternates—frequently used in email handles, social handles, and command syntax within Japanese text runs—CoreText applies contextual alternate substitution rules. Inspecting these substitutions directly in Safari Web Inspector verifies whether the target font provides native glyph representations or falls back to synthetic rendering.

Configuring JIS04 and At Sign Alternates in Modern CSS

Apply both standard modern CSS properties and explicit low-level OpenType feature tags to ensure cross-platform fidelity and graceful degradation:

/* JIS04 Proportional Kana with Contextual At Sign Alternates */
.japanese-editorial-typography {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 1.125rem;
  line-height: 1.85;
  font-kerning: normal;

  /* Modern high-level East Asian variant specification */
  font-variant-east-asian: jis04 proportional-width;

  /* Explicit low-level OpenType feature mapping */
  font-feature-settings: 
    "jp04" 1,  /* JIS X 0213:2004 glyph alternates */
    "pkna" 1,  /* Proportional Kana spacing */
    "vert" 0,  /* Horizontal orientation baseline */
    "ss02" 1,  /* Stylistic Set 02 (contextual at-sign alternate) */
    "calt" 1;  /* Contextual alternates */
  
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

Inspecting Active Glyphs in Safari Web Inspector

Safari Web Inspector provides dedicated typographic diagnostic tools to examine applied OpenType features and glyph metrics:

• Open Safari Web Inspector (press Option + Command + I on macOS).
• Select the target text element using the DOM tree inspect tool.
• In the right-hand panel, select the Fonts tab located alongside Styles and Computed.
• Scroll to the Font Features accordion section. WebKit displays active OpenType feature tags, including jp04, pkna, and ss02, alongside their boolean enablement toggles.
• Verify that the font name displayed in the Rendered Fonts list is indeed the requested typeface (e.g., “Hiragino Mincho ProN”) rather than a fallback font lacking JIS04 table definitions.

Validating Contextual Substitutions Across macOS and iOS

To confirm that glyph shapes conform to JIS04 requirements, compare the rendering of characteristic kanji characters containing modified stroke configurations (such as 辻 with one dot versus two dots, or 飴 with specific radical variations). Use the Computed tab to confirm that font-variant-east-asian has not been overridden by parent container cascade rules, and test responsive layouts to verify proportional kana tracking across variable container widths.