Supporting Multiple Ruby Annotation Rows With Markup and CSS

This page present an incremental development of an approach to supporting multiple rows of annotations with Ruby markup and CSS styling properties. The page also serves to test the level browser support for the approach taken.

While some browser do support the nesting of Ruby markup to present multiple rows of annotation; nesting is not an option when the positioning and decoration of annotation text at one level does not occur fully within the boundaries of the other. For example, the upper annotation level may begin midway within the boundaries of the lower level annotation, and extend beyond the termination of the lower level's annotation. Handling these scenarios leads us into the overlapping markup problem which presently does not have a solution supported by W3C standards.

The approach taken here handles multiple rows of annotation by duplicating the base text and formatting each copy with a single row of Ruby annotation independently. These independently annotated copies of the base text are then overlaid on top of one another so that the base text is superimposed precisely and only a single copy of the base text remains visible. The position of the Ruby annotation text is then raised to successively higher levels on each copy, creating the effect of multiple rows of overlapping annotation.

A solution for multiple rows of independently bound and formatted annotation is needed to support the Zaima interlinear notation, which is fully described in the developing model document.

Baseline

Reference Lines As Undecorated Text

The sample text that we will be working with:

ABCDEFGHIJKLMNOPQURSTUVWXYZ

ሀለሐመሠረሰሸቀቐበቨተቸኀነኘአከኸወዐዘዠየደጀገጠጨጰጸፀፈፐ

Four Overlays Without Rubies

We will rely on CSS layers set with the z-index property to overlay independent Ruby annotations on top of one another (with offsets) to create the Zaima rows. Establish here that layers work as expected. Text may appear bolder:

Repeat with visibility: hidden; in z-index layers 2-4 to reduce bolding:

Ruby Support for Non-Asian Scripts

We review here how well is Ruby markup supported for simple cases. We need to determine if Ruby layout supported for non-Asian writing systems.

Regular Japanese Ruby Sample (Katana over Kanji)

これは日に本ほん語ごです。

Mized Ruby Sample (Latin over Kanji)

これは日に本BC語ごです。

Mized Ruby Sample (Katana over Latin)

これは日にBCほん語ごです。

Mized Ruby Sample (Latin over Latin)

これは日にBCBC語ごです。

Zaima Ruby Sample (Ethiopic over Ethiopic)

ሀለሐመሠረሰሸቀቐበቨተቸኀነኘአከኸወዐዘዠየደጀገጠጨጰጸፀፈፐሀለሐመሠረሰሸቀቐበቨተቸኀነኘአከኸወዐዘዠየደጀገጠጨጰጸፀፈፐ

Four Overlays with Rubies

Adding Annotation Rows

Chrome 60 Solution:

Chrome 61 Solution:

Unfortunately layout policies appear to have changed under Chrome 61 and the positioning of Ruby text (via bottom:npx) also impacts the position of the base text. Ruby text can no longer be raised indepently of the base text by the approach used previously. Until a better solution is found, a work around is to simply ignore the raising of the base text along with the annotation text. This approach appears to work by virtue of the base text being hidden from view but may have other consequences on layout.

Repeat Approaches with <rb style="visibility: visible">

Exposing the base text again to reveal their position with respect to the anchor (base text of first row) and to help understand any layout side effects (numeric indexes are added to the base text for clarity):

Chrome 60 Solution:

Chrome 61 Solution:

The raised based text along with the Ruby text is now exposed in the Chrome 61 solution: