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

Typography across macOS and iOS requires specialised glyph positioning when rendering mixed CJK text, proportional Latin numerals, and closing punctuation marks. In traditional Japanese typesetting, the right parenthesis ()) occupies an entire 1-em square, trailing half an em of blank space after the enclosed glyph. When closing a parenthetical statement around proportional kana or numerals, this excessive trailing whitespace impairs typographic rhythm. 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 closing parenthesis. 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 right parenthesis alternates.

OpenType Layout Features for Japanese Closing Punctuation

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 trimming trailing whitespace on the right parenthesis ()) and optically aligning 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 Right Parenthesis 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;
}

/* Parenthetical closing contextual alignment wrapper */
.japanese-typographic-content .closing-paren {
  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 right parenthesis 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 right parenthesis alternate trims trailing whitespace properly against adjacent numerals rather than maintaining its default full-width advance width, apply a temporary diagnostic overlay:

/* Diagnostic overlay for glyph measurement */
.debug-paren-close-alignment {
  display: inline-block;
  outline: 1px dashed rgba(60, 179, 113, 0.7);
  background-color: rgba(240, 255, 240, 0.3);
}

Using Web Inspector’s Box Model metrics, measure the advance width and horizontal margins of the right parenthesis 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.