Ruby markup demo

The problem: to present some characters that might not be known to the user, or might not be seen by the user, giving some auxiliary information like transcription (romanization).

Ruby markup could be used for this. In Internet Explorer 6, there is (limited) support to the Ruby module, so this demo should work as such on IE 6. On Mozilla Firefox, try viewing this page first normally, then with the alternate stylesheet “Ruby support”. The style sheet is based on the suggestions in Masayasu Ishikawa’s note Implementing the Ruby Module as modified by Alan J. Flavell.

Using the title attribute

This is just lorem ipsum text in order to have some text surrounding the interesting expression, namely , so that it appears in the middle of running text. If you move the pointer over the special character, your browser may display a tooltip that contains a transcription.

Using unstyled Ruby markup

This is just lorem ipsum text in order to have some text surrounding the interesting expression, namely (chá), so that it appears in the middle of running text. The character is enclosed in Ruby markup, so your browser either shows a transcription in parentheses after the character or displays it as ruby text.

Using unstyled Ruby and title

This is just lorem ipsum text in order to have some text surrounding the interesting expression, namely (chá), so that it appears in the middle of running text. Here the two above-mentioned methods have been combined so that the title attribute is associated with the ruby block (ruby element). The idea is that the ruby text might be too small to the user to read but a sufficient hint so that the user moves the pointer over it.

Using styled Ruby markup

This is just lorem ipsum text in order to have some text surrounding the interesting expression, namely (chá), so that it appears in the middle of running text. This approach combines Ruby markup with CSS code that is meant to make the ruby annotation more legible (by setting the font size and family).