Currently (January 2010), ruby elements are supported in Internet Explorer, Google Chrome and in the latest Webkit development versions. Both Chrome and Webkit currently only support the HTML elements, but not yet the ruby CSS3 properties.

Basics

Here is an example of a ruby element: ruby base (ruby text) with the ruby text annotation above it.

<ruby>ruby base<rp> (</rp><rt>ruby text</rt><rp>) </rp></ruby>

This is a basic example of a ruby element, where within a ruby element we are creating one ruby base and one ruby text <rt> element.

The optional <rp> elements add paranthesis that will not be shown if a browser supports ruby, but will be shown as paranthesis on browsers that do not support any of the ruby elements to allow for graceful degredation - in that case the example will be rendered as "ruby base (ruby text)".

Please Note:
The original Microsoft version of this specifcation (from the IE5 days) also had a <rb> tag which signified the base of a complete ruby element - this tag has been removed
from the final HTML5 specification. If a <rb> tag is present, it will be ignored by the browser.

Current (January 2010) most browser implementations are still incomplete, so this will look like the example above. Once the browsers have caught up, the "long annotation" example will use the ruby-overhang property, which allows the neighboring words to scoot in under the annotation to avoid the large white spaces.

The W3C CSS3 recommendation has a great overview of all the different new layout properties that will come with the ruby element.

Simple Use Case

Outside of the traditional Japanese and Chinese use for ruby as pronounciation guide, a simple use case could be as part of language training. Roll over the German sentence below to see English translations for each word: