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

In East Asian typography, ruby annotations are small phonetic guides or pronunciation glosses positioned alongside base ideographic characters (such as Japanese Kanji, Chinese Hanzi, or Taiwanese Bopomofo). While standard HTML structures ruby annotations using semantic tags (<ruby>, <rb>, and <rt>), layout requirements vary significantly depending on writing mode, educational context, and regional publishing traditions. In Japanese horizontal text, furigana is typically placed above the base Kanji (over), but in bilingual textbooks or multi-line glosses, annotations may appear underneath (under). In traditional Chinese Bopomofo or Taiwanese textbooks, annotations run vertically alongside characters as inter-character ruby. The ruby-position CSS property provides authors with declarative control over this spatial placement. Using Safari Web Inspector on macOS and iOS, developers can live-inspect ruby line boxes, evaluate vertical rhythm, and debug ruby positioning cascades.

Understanding ruby-position Values and WebKit Support

Apple WebKit has long maintained first-class support for internationalized typography and ruby layout specifications. The ruby-position property supports the following values:

• over: Positions the ruby text (<rt>) along the over/top edge of the base text in horizontal writing modes, or to the right in vertical writing modes (writing-mode: vertical-rl). This is the standard publishing default for Japanese furigana.
• under: Renders the ruby text along the under/bottom edge of the base character in horizontal mode, or to the left in vertical mode. Frequently used for secondary translations, vocabulary notes, or bilingual educational editions.
• inter-character: Positions the annotation text between base characters. Commonly used in Taiwanese educational texts for vertical phonetic guides (Bopomofo) when rendered in vertical writing modes.
• alternate: When multiple ruby annotations are attached to a single base character, alternates placement between over and under.

Configuring ruby-position and Alignment in Stylesheets

Pair ruby-position with ruby-align to ensure harmonious typographic spacing:

/* Standard Japanese furigana placed above Kanji */
ruby {
  ruby-position: over;
  ruby-align: space-around;
}

/* Secondary vocabulary gloss placed under base characters */
.bilingual-gloss ruby {
  ruby-position: under;
  ruby-align: center;
}

/* Traditional vertical Chinese ruby positioning */
.vertical-text-container {
  writing-mode: vertical-rl;
}

.vertical-text-container ruby {
  ruby-position: over; /* Appears to the right of characters in vertical-rl */
}

/* Micro-typographic adjustments for ruby text size */
rt {
  font-size: 0.5em;
  line-height: 1;
}

Inspecting ruby-position via Safari Web Inspector

To inspect active ruby positioning in Safari on macOS or iOS:

1. Launch Safari and navigate to your webpage containing East Asian ruby markup. Open developer tools via Develop > Show Web Inspector (or press Cmd + Option + I).
2. Select the <ruby> or <rt> node using the Element Inspector.
3. Navigate to the Styles panel on the right sidebar and select the Computed tab.
4. Filter for ruby-position. Confirm that the computed property evaluates to over or under as declared in your cascade.

/* Console verification in Web Inspector */
window.getComputedStyle(document.querySelector('ruby')).rubyPosition;
// Returns: "over"

Auditing Ruby Line-Box Metrics and Spacing

Because ruby annotations add vertical height to base characters, they can disrupt paragraph line-height and lead to uneven line spacing if not properly accommodated. In Safari Web Inspector:

1. Select the parent paragraph element containing the ruby text.
2. In the right-hand inspection drawer, click the Layout panel.
3. Enable Show Layout Overlays and observe the line-box boundaries.
4. Notice how Safari automatically expands the line box to accommodate the <rt> element without character clipping.
5. To prevent inconsistent spacing between lines with and without ruby, ensure the parent paragraph declares sufficient baseline line-height:

   p.ruby-body {
     line-height: 2.2; /* Ample headroom for over and under annotations */
   }

Debugging Multi-Line Ruby Wraps and Fallback Cascades

When long ruby annotations exceed the width of short base Kanji, WebKit can either overhang adjacent text or expand the base spacing. In Safari Web Inspector:

• Inspect the ruby-align computed value. Using ruby-align: space-around or ruby-align: space-between ensures base Kanji characters distribute whitespace evenly beneath elongated furigana.
• Test viewport wrapping in Responsive Design Mode (Develop > Enter Responsive Design Mode). Confirm that ruby base pairs do not split awkwardly across line boundaries.

Leveraging ruby-position and auditing rendering through Safari Web Inspector ensures East Asian phonetic annotations render with linguistic precision, visual clarity, and flawless line geometry across Apple devices.