High-density East Asian typographical layouts—particularly financial receipts, compact catalog sidebars, and vertical index columns—frequently require punctuation marks and digits to compress into extreme quarter-width (0.25em) horizontal metrics. The OpenType qwid (Quarter-Width Alternates) feature tag substitutes standard characters with ultra-condensed variants. Safari Web Inspector provides dedicated controls to preview and audit quarter-width substitutions on macOS.
Typographical Role of Quarter-Width Alternates
In narrow multi-column tables, standard full-width (1em) or half-width (0.5em) punctuation consumes disproportionate space. Specifying font-feature-settings: "qwid" 1; activates Apple’s CoreText layout routines, squeezing parentheses, colons, and numerical figures into strict 0.25em widths without clipping.
Configuring Quarter-Width Alternates in CSS
Implement quarter-width metrics in your stylesheet:
.cjk-dense-table {
font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
font-feature-settings: "qwid" 1;
font-variant-east-asian: proportional-width;
letter-spacing: -0.02em;
}Inspecting Features in Safari Web Inspector
- Open the compact document in Safari.
- Right-click the target dense typography column and choose Inspect Element.
- Navigate to the Font tab in Web Inspector’s right pane.
- Locate Quarter-Width Alternates (qwid) under the Features list.
- Toggle the switch to observe live horizontal compression rendered by CoreText across the character sequence.
Accessible Semantic HTML Structure
Because OpenType substitutions operate exclusively at the graphic layout layer, the accessibility tree retains standard semantic text representation, ensuring optimal search indexing and screen reader performance.