Scientific publications and chemical formula documentation frequently require complex multilingual typesetting combining East Asian kanji/kana with subscript scientific notations (such as Hâ‚‚O or COâ‚‚). When styling these documents, combining the jp04 (JIS X 0213:2004 forms), pkna (proportional kana), and sinf (scientific inferiors) OpenType feature tags delivers typographic balance and proper stroke weighting. Safari Web Inspector provides comprehensive tools to inspect and live-debug these OpenType substitutions inside Apple WebKit.
Understanding OpenType Feature Tags: jp04, pkna, and sinf
Modern OpenType layout shapers like Apple CoreText parse font feature tables to execute glyph replacements:
- jp04 (JIS2004 Forms): Enforces the modern Japanese orthographic glyph forms ratified in the JIS X 0213:2004 standard.
- pkna (Proportional Kana): Replaces rigid full-width Japanese hiragana and katakana glyphs with proportionally spaced variants designed to fit naturally against kanji.
- sinf (Scientific Inferiors): Replaces baseline numerals with true subscript glyphs positioned specifically below the baseline, engineered with heavier stroke weights to match surrounding text color.
While the standard CSS property font-variant-position: sub exists, it often scales down standard glyphs if the font file lacks explicit positioning tables. Declaring sinf in font-feature-settings ensures explicit OpenType substitution.
Authoring the Multilingual Typography CSS Stack
To ensure consistent cross-platform typography in Safari, declare your font styling using both high-level CSS properties and low-level feature settings:
/* Scientific Multilingual Formula Styling */
.scientific-japanese-formula {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "PingFang SC", system-ui, sans-serif;
font-size: 1.25rem;
line-height: 1.6;
text-rendering: optimizeLegibility;
/* Standard CSS Font Variant Declarations */
font-variant-east-asian: jis04 proportional-width;
font-variant-position: sub;
/* Explicit Low-Level Feature Settings Fallback */
font-feature-settings: "jp04" 1, "pkna" 1, "sinf" 1;
}
Inspecting Glyphs with Safari Web Inspector
To inspect and live-debug these OpenType substitutions in Apple Safari on macOS:
- Enable developer tools: In Safari, navigate to Settings > Advanced and check Show features for web developers.
- Right-click the scientific formula and select Inspect Element.
- In the Web Inspector right-hand sidebar, navigate to the Styles panel and scroll to the Font section.
- Click the typographic properties icon to open the OpenType Feature Settings inspector.
- Confirm that Proportional Kana is highlighted under East Asian Spacing.
- Under the Position category, inspect the Subscript / Scientific Inferior control to verify that true OpenType glyphs are actively substituted rather than simulated with CSS scaling.
Diagnosing Incomplete Font Tables
If Safari displays standard baseline numerals or synthetically scaled numbers, inspect the Fonts Used card in Web Inspector. System fonts or third-party web fonts lacking a dedicated sinf glyph table cannot execute true substitutions. Safari Web Inspector enables engineers to rapidly identify whether layout anomalies originate from CSS rules or underlying font file limitations.