The HTML5 ruby element allows a word or phrase to be annotated with a small text above or below the original line.
The origin of ruby is in the Chinese and Japanese languages, where ruby annotations in simplified script or roman characters are being used as pronounciation guides for complex Chinese characters.
Here is some relevant documentation about ruby:
WHATWG Blog Ruby Article
W3C CSS3 Ruby Implementation
W3C Ruby Annotation Recommendation
Wikipedia article about ruby characters
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
Layout
By default, the annotation is centered over the width of the ruby base. If the annotation is wider than the base, the annotation defines the width of the complete ruby element.
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:
Dieser deutsche Satz hat englische Übersetzungen für alle Wörter.
The power of the ruby elements here is that the translations are always centered over the correct word without any programming effort. The rollover itself is a simple CSS hover state definition:
HTML:
<ruby class="rubysimplerollover">Dieser<rp> (</rp><rt>this</rt><rp>) </rp></ruby>
CSS:
.rubysimplerollover rt {
color: #ffffff;
}
.rubysimplerollover:hover rt {
color: #333333;
}
.rubysimplerollover:hover ruby {
color: #aa0000;
}
Discussion
Sorry, but we have to trick the spambots... How much is 2+1? *:
URL:
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.