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

Typography across macOS and iOS requires specialised glyph positioning when rendering mixed CJK text, proportional Latin numerals, and UI delimiters. Modern Japanese typefaces conforming to the JIS X 0213:2004 standard incorporate OpenType features for proportional kana alternates (pkna), 2004 revised character shapes (jp04), and contextual alternates (calt) designed to balance symbols like the vertical bar pipe delimiter (|). In traditional Japanese typography, the vertical bar sits centered in a wide, fixed-width em box, creating disjointed optical spacing in breadcrumb navigation, tables, or header tags. Safari Web Inspector provides specialized typography inspection tools to analyze and debug these substitutions. This tutorial explains how to configure, inspect, and validate JIS04 proportional kana and contextual vertical bar alternates.

OpenType Layout Features for Japanese Delimiters

Full-width Japanese punctuation can disrupt textual balance when mixed with proportional numerals and latin strings. OpenType feature tags address this through automated glyph substitutions:

• "jp04" 1: Enforces JIS X 0213:2004 character forms for 168 kanji ideographs.
• "pkna" 1: Enables proportional kana metrics, substituting monospaced Hiragana and Katakana glyphs with proportionally spaced variants.
• "calt" 1: Triggers contextual alternates, dynamically narrowing the vertical bar (|) advance width and vertically centring it against proportional x-heights.

Configuring Strict Typography Rules in CSS

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

/* JIS04 Proportional Kana and Contextual Vertical Bar Alternates */
.japanese-typographic-content {
  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;
}

/* Delimiter pipe contextual alignment wrapper */
.japanese-typographic-content .delimiter-pipe {
  font-feature-settings: "jp04" 1, "pkna" 1, "calt" 1, "pnum" 1;
}

Inspecting Glyph Substitution in Safari Web Inspector

Safari Web Inspector allows web authors to verify active OpenType feature tables on rendered DOM elements:

1. Open Safari and load the target Japanese page.
2. Ensure Developer features are enabled via Safari > Settings > Advanced > Show features for web developers.
3. Right-click the Japanese text containing the vertical bar and choose Inspect Element.
4. In the Styles panel on the right sidebar, click the Fonts tab (indicated by the capital ‘A’ icon).
5. Scroll to the Feature Settings subsection. Safari lists all detected OpenType features within the active font.
6. Verify that jp04, pkna, and calt toggle switches are enabled and highlighted.

Measuring Glyph Optical Alignment

To ensure that the contextual vertical bar alternate narrows properly against adjacent numerals rather than maintaining its default full-width advance width, apply a temporary diagnostic overlay:

/* Diagnostic overlay for glyph measurement */
.debug-pipe-alignment {
  display: inline-block;
  outline: 1px dashed rgba(255, 140, 0, 0.7);
  background-color: rgba(255, 248, 220, 0.3);
}

Using Web Inspector’s Box Model metrics, measure the advance width and horizontal margins of the vertical bar compared to neighbouring kana characters.

Comparison of OpenType Typography Settings

Following this inspection technique ensures clean, professional, and balanced typography across all Japanese web applications on Apple platforms.