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

International typography on macOS and iOS demands rigorous fidelity when rendering complex CJK glyphs. Modern Japanese fonts adhering to the JIS X 0213:2004 (JIS04) specification support diverse OpenType layout features, including proportional kana alternates (pkna), JIS2004 forms (jp04), and contextual mathematical alternates (calt) designed for balanced mathematical and currency alignment. When developing multi-lingual user interfaces or technical documentation sites, engineers must inspect how Apple’s CoreText layout engine and WebKit interpret these features. Safari Web Inspector provides specialised typography tooling to isolate and verify these subtle glyph replacements. This tutorial explains how to inspect and validate JIS04 proportional kana and contextual plus sign (+) alternates in Safari.

OpenType Feature Tags for Japanese Typography

Standard Japanese glyphs are traditionally spaced on a uniform square em grid (full-width). However, body typography frequently benefits from proportional kana (Hiragana and Katakana) glyphs that dynamically adjust horizontal advance widths to match Latin numerals and proportional symbols:

• "jp04" 1: Enables JIS X 0213:2004 glyph shapes (standardised orthography for 168 kanji characters).
• "pkna" 1: Enables Proportional Kana metrics, replacing monospaced glyphs with proportionally spaced equivalents.
• "calt" 1: Activates contextual alternates, ensuring symbols like the plus sign (+) automatically adjust their vertical alignment and optical weight when placed adjacent to full-width or proportional Japanese numerals.

Configuring Strict CSS Feature Rules

To enforce these features across WebKit, declare both high-level CSS font variant properties and low-level font-feature-settings fallbacks:

/* JIS04 Proportional Kana and Contextual Plus Sign Alternates */
.japanese-typographic-sample {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-variant-east-asian: jis04 proportional-width;
  font-feature-settings: "jp04" 1, "pkna" 1, "calt" 1;
  font-size: 1.125rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  text-rendering: optimizeLegibility;
}

/* Explicit fallback container for mathematical plus sign alignment */
.japanese-typographic-sample .math-inline {
  font-feature-settings: "jp04" 1, "pkna" 1, "calt" 1, "pnum" 1;
}

Inspecting Glyph Substitution in Safari Web Inspector

Safari offers dedicated panels to examine OpenType feature tables active on any DOM node:

1. Open Safari and navigate to the target web page.
2. Ensure Developer features are enabled via Safari > Settings > Advanced > Show features for web developers.
3. Right-click the Japanese text segment and select Inspect Element.
4. In the Styles sidebar on the right pane, locate the Fonts tab (represented by a capital ‘A’ icon or expandable panel).
5. Scroll to the Feature Settings sub-section. WebKit lists all detected OpenType features present in the rendered typeface.
6. Verify that jp04, pkna, and calt toggle switches are highlighted and enabled.

Validating Optical Alignment with WebKit Metrics Overlays

To confirm that the contextual plus sign alternate shifts vertically to align with proportional kana ascenders rather than standard Latin baselines:

/* Visual diagnostic boundary box */
.debug-glyph-bounds {
  display: inline-block;
  outline: 1px dashed rgba(255, 99, 71, 0.7);
  background-color: rgba(255, 228, 196, 0.2);
}

By applying this diagnostic rule in the Web Inspector live style editor, developers can measure the exact bounding box and advance width of + compared to surrounding kana glyphs.

Comparison of Japanese OpenType Settings

Applying this inspection workflow guarantees that Japanese editorial and commercial interfaces display crisp, well-aligned typographic elements on all macOS and iOS devices.