Jul 192011

This is a quick test of ruby display in web browsers. If your browser can handle it, you should see this site’s name 中网 with pinyin transliteration above it. Ideally the browser will display the hanzi and pinyin one over the other. As a fallback, you may see the pinyin in parentheses.

中 网 ( zhōng wǎng )

It should look like this picture:

This is how the ruby text looks in Safari

Here is the code used:

<ruby> <rb> 中 网 </rb> <rp> (</rp> <rt> zhōng wǎng </rt> <rp>) </rp> </ruby>

Note: WordPress does not seem over-fond of the html markup for this. If you switch to the Visual editor, the tags seem to get stripped out, but it displays the “fallback” option of having the contents of the rt placed in parentheses after the rb. Publishing right from the html editor seems to keep everything.

  One Response to “Ruby text in the browser?”

  1. [...] code revealed (unsurprisingly) that the ruby pinyin is added by means of the HTML tags discussed in this post. This means that how the ruby text displays in any mail client depends on how the client treats the [...]

 Leave a Reply



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>