HTML5/CSS3 Feature: Ruby Annotation

<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.

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.

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>
						

.rubysimplerollover rt {
	color: #ffffff;
}
.rubysimplerollover:hover rt {
	color: #333333;
}
.rubysimplerollover:hover ruby {
	color: #aa0000;
}