How to Inspect and Control CSS ruby-align in Safari Web Inspector

In East Asian typography—particularly in Japanese (furigana), Chinese (bopomofo/pinyin), and Korean literature—small phonetic annotations frequently appear above or alongside base ideographic characters. Known as ruby annotations, these glyphs are represented in HTML using the <ruby>, <rb>, and <rt> elements. While the ruby-position property governs whether annotations appear over, under, or beside the base text, the ruby-align property determines how annotation characters distribute their internal whitespace relative to their base characters. When formatting complex multilingual text on macOS and iOS, Safari Web Inspector provides visual tools to inspect ruby containers and control ruby-align distribution models.

Understanding ruby-align Distribution Models

The ruby-align property, defined in the W3C CSS Ruby Annotation Layout Module Level 1, controls the horizontal (or vertical, in vertical writing modes) justification of ruby text when the width of the annotation (<rt>) does not match the width of the underlying base text (<rb>). The primary distribution values include:

• space-around (Default): The annotation characters are evenly spaced across the full width of the base text, with half-width spacing margins positioned at the start and end of the ruby text run. This is the traditional standard in Japanese publishing.
• space-between: The first and last characters of the annotation align flush with the edges of the base text, with all remaining spacing distributed equally between the inner glyphs. If the annotation consists of only one character, it centers automatically.
• start: The ruby text aligns flush to the inline start edge of the base character container, leaving any remaining trailing whitespace at the end.
• center: The entire annotation run is centered above or below the base text without expanding letter spacing.

If an author attempts to justify ruby annotations using standard text-align, modern browser engines ignore the directive, as WebKit requires dedicated ruby layout properties to compute East Asian typography correctly.

Configuring Safari Web Inspector on macOS

To inspect and debug ruby typographic rendering in Safari, ensure developer features are active:

1. Open Safari on macOS and access Settings (Cmd + ,).
2. Select the Advanced tab.
3. Enable Show features for web developers.
4. Navigate to your webpage containing ruby text, right-click the annotation, and choose Inspect Element.

Inspecting HTML Ruby Elements in the DOM Tree

In the Elements tab of Safari Web Inspector, locate the structured ruby markup hierarchy. A canonical HTML implementation follows this pattern:

<ruby class="furigana-sample">
  <rb>東京都</rb>
  <rt>とうきょうと</rt>
</ruby>

<ruby class="kanji-item">
  漢字
  <rt>かんじ</rt>
</ruby>

And the accompanying CSS styling:

.furigana-sample {
  ruby-position: over;
  ruby-align: space-around;
}

.furigana-sample rt {
  font-size: 0.5em;
  color: #555555;
}

Select either the <ruby> container or the individual <rt> node. In the right-hand sidebar of Web Inspector, navigate to the Styles panel.

Testing ruby-align Values Dynamically

Using the Styles panel, you can inject and cycle through different alignment values to observe how WebKit redistributes glyph spacing in real time:

1. Click inside the CSS declaration block for the <ruby> or rt rule in the Styles panel.
2. Add the ruby-align property and set it to center:

   ruby-align: center;

3. Notice how the phonetic hiragana/katakana glyphs cluster tightly at the center of the underlying kanji ideograph rather than stretching out to meet its borders.
4. Change the value to space-between:

   ruby-align: space-between;

5. Observe that the leading character locks to the left margin and the trailing character locks to the right margin of the base text, expanding the letter spacing of inner characters to fill the exact typographic measure.
6. Return to the conventional standard:

   ruby-align: space-around;

Verifying Computed Values and Inheritance

In complex typographic layouts, ruby-align can be applied either to the parent <ruby> element (where it cascades to child annotation boxes) or specifically to individual <rt> tags when alternating styles are desired. To verify which value WebKit resolved, switch to the Computed panel:

1. With the <rt> element selected, type ruby-align into the filter field.
2. Verify whether the computed property displays space-around, space-between, center, or start.
3. Expand the cascading arrow next to the property to trace whether browser-agent stylesheets or inherited parent containers altered your typographic intention.

Combining ruby-align with Vertical Writing Modes

Traditional East Asian texts frequently use vertical typography. WebKit supports seamless integration between writing-mode: vertical-rl and ruby alignment rules:

.vertical-text {
  writing-mode: vertical-rl;
  ruby-position: over;
  ruby-align: space-between;
}

In vertical mode, Safari Web Inspector reflects the transformed coordinate space: “over” places ruby annotations to the right of the vertical glyph column, while space-between vertically justifies the ruby characters from the top of the kanji box to the bottom. Selecting the element in Web Inspector displays the vertical bounding box, allowing you to confirm that annotation ascent and descent metrics do not clip adjacent columns.