How to Inspect CSS font-feature-settings JIS04 Proportional Kana and Ordinals in Safari Web Inspector

Sophisticated multi-script typography demands meticulous control over OpenType font tables, especially when pairing East Asian scripts with European typographic conventions. When documents combine Japanese kana with Latin numerical ordinals (such as 1st, 2nd, or Spanish 1.º and 2.ª), web designers frequently employ a combination of jp04 (JIS X 0213:2004 forms), pkna (proportional kana), and ordn (ordinals). Safari Web Inspector provides specialized tools to inspect, toggle, and validate these OpenType feature interactions live in the browser.

OpenType Specifications: jp04, pkna, and ordn

Modern OpenType layout engines implement designated four-character feature tags that dictate how text shapers substitute glyphs:

• jp04 (JIS2004 Forms): Replaces standard JIS90 kanji glyphs with revised JIS2004 forms compliant with contemporary orthographic guidelines.
• pkna (Proportional Kana): Replaces rigid full-width Japanese hiragana and katakana glyphs with proportionally spaced variants tailored for balanced text flow.
• ordn (Ordinals): Automatically substitutes standard alphabetic characters following numbers with raised, superscript ordinal indicators (e.g. converting “1st” into a stylized numeral and raised indicator).

While standard CSS provides high-level properties such as font-variant-east-asian and font-variant-numeric, combining these across multilingual passages often requires fine-tuning via font-feature-settings.

Authoring the Multilingual Typography CSS Stack

To ensure robust cross-platform rendering across Apple WebKit environments, structure your CSS declarations using both standard variant properties and low-level feature tags:

/* Composite Typography Styling for Japanese & Ordinals */
.editorial-multilingual-text {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "PingFang SC", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;

  /* Standard CSS Font Variant Declarations */
  font-variant-east-asian: jis04 proportional-width;
  font-variant-numeric: ordinal;

  /* Explicit Low-Level Feature Settings Fallback */
  font-feature-settings: "jp04" 1, "pkna" 1, "ordn" 1;
}

Inspecting OpenType Glyphs in Safari Web Inspector

To inspect and debug the rendered glyph substitutions on macOS:

1. Enable Web Inspector: In Safari, navigate to Settings > Advanced and check Show features for web developers.
2. Right-click the target element containing kana and ordinals, then select Inspect Element.
3. In the Web Inspector sidebar, navigate to the Styles tab and scroll down to the Font card.
4. Click the typographic properties icon to reveal the OpenType Feature Settings inspector.
5. Locate the East Asian Spacing section and verify that Proportional Kana is active.
6. Locate the Numeric section and toggle the Ordinals checkbox to observe immediate glyph remapping in the rendered viewport.
7. Confirm that superscript ordinal glyphs retain proper vertical alignment without colliding with adjacent Japanese punctuation marks.

Troubleshooting Missing OpenType Table Capabilities

If Safari displays default full-width kana or standard inline ordinal letters despite valid CSS declarations, check the Fonts Used section in Web Inspector. System fonts or web fonts lacking explicit ordn or pkna lookup tables cannot render these substitutions; CoreText will silently render standard glyphs. Using Safari Web Inspector ensures rapid diagnosis of font capability constraints across Apple platforms.