There are two aspects to dealing with ruby text: the first is to provide structural information through markup that relates the ruby and its base text; the second is to address presentational (styling) questions, such as whether long ruby text overlaps adjacent base text, whether short ruby text is centered or left aligned over a long base text, etc. In this section we look at expressing the structure using markup.

The W3C Recommendation Ruby Annotation (also available in Japanese) describes markup that can be used for ruby support.

The specification defines two variants of ruby markup, called simple ruby markup and complex ruby markup. Simple ruby markup associates a single run of ruby text with a run of base text.

The example at the top of the slide shows the desired visual result, followed by the markup that should produce that.

We are looking to place the hiragana sequence かみしばい over the top of the base text 紙芝居, which is part of a longer sentence. The annotation is usually in a small font size.

The first step is to surround both the base text and the annotation with ruby markup. Then, within that, add the base text to a rb (ruby base) element, and the annotation to a rt (ruby text) element, in that order. And that's it. Whether your user agent knows how to display this markup is another question, which we will get to later.

The markup for the whole sentence would therefore be: