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

Typography in Japanese digital design demands sophisticated control over glyph shapes and character metrics. The Japanese Industrial Standard 2004 (JIS X 0213:2004, represented in OpenType by the feature tag jp04) establishes modernized letterforms for kanji and kana. When pairing JIS04 glyphs with proportional kana (pkna) and proportional alternate metrics (palt), web authors can achieve book-quality Japanese editorial typesetting. However, when these features interact with complex punctuation marks, glyph collision and kerning inconsistencies can occur in Apple’s CoreText rendering engine. This guide explains how to inspect, debug, and configure JIS04 proportional kana and proportional alternate glyphs using Safari Web Inspector.

OpenType East Asian Typography: jp04, pkna, and palt

Traditional CJK text rendering places every glyph on a rigid square grid (the em-box). However, natural handwriting and modern book publishing favor proportional kana, where phonetic hiragana and katakana characters occupy variable advance widths tailored to their visual weight, while ideographic kanji remain full-width. The pkna feature enables this behaviour.

To further refine text appearance, the palt (Proportional Alternate Metrics) feature applies proportional spacing to full-width punctuation marks, parentheses, and ideographic glyphs without swapping their contours. When both jp04 and palt are active, punctuation marks can shift closely against preceding glyphs, occasionally resulting in glyph collision if the font’s kerning tables are incomplete or conflicting. Safari’s CoreText engine handles these OpenType features with extreme precision, making Safari Web Inspector an indispensable tool for typographic debugging.

Authoring Resilient Typography in CSS

Modern CSS specifications strongly recommend the high-level font-variant-east-asian property over low-level font-feature-settings declarations. The following stylesheet demonstrates the standard syntax alongside low-level fallback rules:

/* Standard high-level typography rule */
.japanese-editorial-layout {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Source Han Serif", serif;
  font-variant-east-asian: jis04 proportional-kana;
  /* Contextual proportional spacing */
  font-feature-settings: "jp04" 1, "pkna" 1, "palt" 1;
  text-rendering: optimizeLegibility;
  font-size: 1.125rem;
  line-height: 1.9;
}

/* Isolated punctuation class to prevent collisions */
.japanese-editorial-layout .safe-punctuation {
  font-feature-settings: "jp04" 1, "pkna" 1, "halt" 1;
}

Inspecting Font Features in Safari Web Inspector

Follow these operational steps to audit your typography inside Safari:

1. Open Web Inspector: Launch Safari, enable developer options via Settings > Advanced > Show features for web developers, right-click the target paragraph, and select Inspect Element.
2. Navigate to the Font Panel: In the right-hand panel of the Elements tab, locate the Font section. Safari displays the rendered font family, PostScript identifier, and loaded font resources.
3. Audit OpenType Feature Switches: Expand the OpenType Features group. Safari lists all available features detected in the loaded font file. Verify that JIS2004 Forms (jp04), Proportional Kana (pkna), and Proportional Alternates (palt) are properly activated.
4. Inspect Glyph Fallback: Confirm that characters are not rendered via system fallback fonts (such as Apple SD Gothic Neo or Lucida Grande). A clean typographic stack renders all glyphs using the declared primary typeface.

Troubleshooting Common Typographic Clashes

When pairing proportional kana with proportional alternates in Safari, consider these diagnostics:

• Property Cascading Conflicts: Low-level font-feature-settings does not merge properties down the DOM cascade; child declarations completely overwrite parent tag lists. Always declare all required tags together (e.g., "jp04" 1, "pkna" 1, "palt" 1) or rely on font-variant-east-asian.
• Punctuation Collisions: If quotation marks or parentheses overlap adjacent kana characters, replace palt with halt (Alternate Half Widths) to enforce half-em spacing rather than continuous proportional kerning.
• Baseline Jitter: Ensure that line-height is specified as a unitless multiplier (e.g., 1.85) to allow CoreText to compute vertical glyph metrics uniformly across mixed kanji and kana runs.

Cross-Device Verification

Verify font rendering across both macOS and iOS using Safari’s Responsive Design Mode (Cmd+Option+R). Check that glyph advance widths, kerning pairs, and punctuation spacing remain visually balanced across varying display densities.