Cross-regional East Asian documentation and multilingual software interfaces frequently require granular control over CJK (Chinese, Japanese, Korean) unified ideographs. When styling documents combining Japanese proportional kana with traditional Chinese character variants (such as Taiwan or Hong Kong orthographic standards), pairing the jp04 (JIS X 0213:2004 forms), pkna (proportional kana), and trad (traditional forms) OpenType feature tags allows typography designers to enforce exact character rendering without font switching. Safari Web Inspector provides specialized typography inspection panels to validate and debug these glyph substitutions live in WebKit.
Understanding OpenType Feature Tags: jp04, pkna, and trad
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 2004 JIS revision.
- pkna (Proportional Kana): Replaces rigid full-width Japanese hiragana and katakana glyphs with proportionally spaced variants designed to fit naturally against kanji.
- trad (Traditional Forms): Substitutes simplified or regional CJK ideographs with their standardized traditional Chinese equivalents.
While the standard CSS property font-variant-east-asian: traditional exists, combining it with Japanese font variants requires precise configuration of font-feature-settings.
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:
/* Regional CJK Editorial Typography Rule */
.cjk-editorial-heading {
font-family: "PingFang TC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
font-size: 2.25rem;
line-height: 1.4;
text-rendering: optimizeLegibility;
/* Standard CSS Font Variant Declarations */
font-variant-east-asian: traditional proportional-width;
/* Explicit Low-Level Feature Settings Fallback */
font-feature-settings: "jp04" 1, "pkna" 1, "trad" 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 typography element 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 East Asian Variants category, toggle traditional forms to verify that CJK unified ideographs map correctly to traditional glyphs.
Diagnosing Missing OpenType Tables
If Safari displays un-substituted simplified glyphs despite CSS declarations, inspect the Fonts Used card in Web Inspector. System fonts or third-party web fonts lacking a dedicated trad table cannot execute traditional substitutions. Safari Web Inspector enables engineers to rapidly identify whether layout anomalies originate from CSS rules or underlying font file limitations.