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.

Layout

Lorem ipsum dolor sit amet, nec ultricies dui rhoncus vel (long annotation) . Curabituronim (short) ipsum. Proin eu libero laoreet turpis suscipit ultrices eget eu risus.

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.

Lorem ipsum dolor sit amet, nec ultricies dui rhoncus vel (long annotation) . Curabituronim (short) ipsum. Proin eu libero laoreet turpis suscipit ultrices eget eu risus.

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 (this) deutsche (german) Satz (sentence) hat (has) englische (english) Übersetzungen (translations) für (for) alle (all) Wörter (words) .

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

Name *:        Email *:       

Sorry, but we have to trick the spambots... How much is 2+1? *:

URL:
SUBMIT
no comments yet...