Multi-language technical publications and mathematical texts frequently combine East Asian ideographs with Latin mathematical notations and superscript references. When rendering Japanese text paired with numerical exponents or footnote indicators, combining the jp04 (JIS X 0213:2004 forms), pkna (proportional kana), and sups (superscripts) OpenType layout tags ensures optimal visual rhythm. Safari Web Inspector provides specialized typographic inspection panels to validate and debug these glyph substitutions live in WebKit.
Understanding OpenType Feature Tags: jp04, pkna, and sups
Modern OpenType fonts define precise lookup substitution tables that instruct CoreText to alter glyph presentation:
- jp04 (JIS2004 Forms): Selects contemporary Japanese glyph standards defined in the 2004 JIS revision for designated kanji characters.
- pkna (Proportional Kana): Replaces monospace, full-width Japanese hiragana and katakana glyphs with proportionally spaced equivalents designed for fluid horizontal reading.
- sups (Superscript): Replaces standard numerals and alphabetic characters with true superscript glyphs engineered with calibrated optical weights to prevent strokes from appearing excessively faint.
While the standard CSS property font-variant-position: super exists, combining it with Asian font variants requires precise configuration of font-feature-settings.
Authoring the Typographic CSS Stack
To implement proper proportional kana alongside true typographic superscripts, structure your CSS as follows:
/* Multi-Script Scientific Typography Rule */
.scientific-japanese-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;
/* High-Level CSS Variant Declarations */
font-variant-east-asian: jis04 proportional-width;
font-variant-position: super;
/* Explicit Low-Level OpenType Feature Settings */
font-feature-settings: "jp04" 1, "pkna" 1, "sups" 1;
}
Inspecting Glyphs with Safari Web Inspector
To inspect and verify active OpenType substitutions in Apple Safari:
- Ensure developer features are enabled: In Safari, go to Settings > Advanced and check Show features for web developers.
- Right-click the target element and choose Inspect Element.
- In the Web Inspector right sidebar, select Styles and scroll down to the Font section.
- Click the typographic properties icon to open the OpenType feature settings inspector.
- Under East Asian Spacing, confirm that Proportional Kana is highlighted.
- Under Position, toggle the Superscript control to confirm that glyphs switch between standard baseline characters and true optical superscripts.
Diagnosing Missing OpenType Tables
If characters appear shifted upward using CSS scaling rather than true glyph substitution, examine the Fonts Used section. If the active font lacks a sups table, WebKit synthesizes a scaled fallback glyph. Utilizing Safari Web Inspector allows developers to immediately confirm whether true OpenType glyph substitutions are active.