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

Mastering East Asian digital typography requires exacting control over OpenType font feature tables, particularly when designing editorial layouts that incorporate contemporary Japanese glyph variants. The Japanese Industrial Standard 2004 (JIS X 0213:2004, commonly referred to as JIS04 or OpenType feature tag jp04) establishes definitive character representations for hundreds of ideographs and kana glyphs. When rendering sophisticated typographic hierarchies that pair proportional kana (pkna) with contextual half-width alternates (halt/hwid), web authors must ensure cross-browser fidelity. Apple’s CoreText layout engine in Safari handles these font features with extraordinary nuance, but subtle cascading errors can disrupt baseline metrics. This guide details how to inspect, debug, and configure JIS04 proportional kana and contextual alternate features in Safari Web Inspector.

Typography Fundamentals: JIS04, Proportional Kana, and Half-Width Alternates

Traditional CJK typesetting adheres to a strict square grid (the em-box), where every character occupies an identical advance width. However, modern Japanese editorial styles often utilise proportional kana: while kanji remain on a full-width square grid, hiragana and katakana glyphs adopt variable proportional advance widths based on their natural anatomical strokes. This behavior is unlocked using the pkna (Proportional Kana) feature tag.

Simultaneously, contextual half-width alternates (hwid or halt) reduce the advance width of Japanese punctuation marks, parentheses, and numerals from full-width (zenkaku) to half-width (hankaku) when adjacent to proportional text. When coupled with the jp04 tag, the font activates the JIS04 glyph variants specified by the Ministry of Education. If these tags are declared haphazardly via low-level font-feature-settings, browser synthesisation or feature collisions can occur.

Configuring OpenType Tags in CSS

While the low-level font-feature-settings property allows direct manipulation of four-character OpenType feature tags, modern W3C specifications strongly advocate using high-level properties such as font-variant-east-asian wherever possible. Below is the resilient declaration hierarchy supporting both modern and legacy CoreText parsers:

/* Standard high-level declaration with robust fallback */
.japanese-editorial-typography {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Source Han Serif", serif;
  font-variant-east-asian: jis04 proportional-kana;
  /* Low-level fallback for precise contextual control */
  font-feature-settings: "jp04" 1, "pkna" 1, "halt" 1;
  text-rendering: optimizeLegibility;
  font-size: 1.125rem;
  line-height: 1.85;
}

/* Specific class targeting mixed numeric/kana half-width runs */
.japanese-editorial-typography .contextual-half {
  font-feature-settings: "jp04" 1, "hwid" 1;
}

Inspecting OpenType Features in Safari Web Inspector

Safari offers dedicated typographic debugging tools designed specifically to interrogate OpenType tables managed by CoreText. Follow these steps to audit your layout:

1. Enable Developer Menu: Open Safari, go to Safari > Settings > Advanced, and tick the box for Show features for web developers.
2. Attach Web Inspector: Right-click the Japanese text element and choose Inspect Element.
3. Open the Font Details Panel: In the right sidebar of the Elements tab, select the Font subsection. Here, Safari displays the active font family, postscript name, and physical font file loaded.
4. Examine Feature Tags: Scroll down to the OpenType Features group. Safari breaks down features into East Asian, Ligatures, Letter Forms, and Numbers. Verify that JIS2004 Forms (jp04), Proportional Kana (pkna), and Alternate Half Widths (halt) are actively checked.
5. Verify Glyph Fallback: CoreText provides a visual glyph map. Check whether any character rendered via system fallback (e.g., Apple SD Gothic Neo or Lucida Grande) rather than your designated primary Japanese font.

Diagnosing CoreText Glyph Metric Irregularities

When working with proportional kana in Safari, subtle visual artifacts may arise:

• Feature Overwrite Clashes: Declaring font-feature-settings: "pkna" 1; in a child element will completely wipe out any parent font-feature-settings: "jp04" 1; unless all tags are explicitly restated. To prevent cascade loss, always utilise font-variant-east-asian for broad properties.
• Synthetic Font Transformations: If a custom webfont lacks genuine JIS04 glyph definitions, CoreText will not synthesise the missing contours, falling back silently to JIS90 forms. Check the Computed tab to confirm whether the physical font contains the table.
• Justification Jitter: Pairing pkna with text-align: justify; can cause uneven spacing gaps around punctuation. Mitigate this by pairing with hanging-punctuation: allow-end; in Safari.

Validating Typography Cross-Platform

Test the rendered layout across multiple macOS versions and iOS Safari devices. Use Safari’s Responsive Design Mode (Cmd+Option+R) to verify that font scaling, vertical baseline rhythm, and contextual punctuation compression behave harmoniously across standard and Retina displays.