{"id":1658,"date":"2010-10-29T00:17:18","date_gmt":"2010-10-29T04:17:18","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=1658"},"modified":"2015-05-18T12:43:48","modified_gmt":"2015-05-18T16:43:48","slug":"cross-browser-html5-ruby-annotations-using-css","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2010\/10\/29\/cross-browser-html5-ruby-annotations-using-css\/","title":{"rendered":"Cross Browser HTML5 Ruby Annotations Using CSS"},"content":{"rendered":"
\"An<\/a><\/p>\n

An example of ruby text, from a photo<\/a> by Flickr user eliazar<\/a>.”<\/p>\n<\/div>\n

When talking about Ruby Annotations<\/strong>, I don’t mean Ruby on Rails, or anything related to the Ruby programming language. I am talking about ruby characters<\/strong><\/a> which are used to annotate text with supplementary information.<\/strong> For example if some readers wouldn’t know what the term “WWW” means, we can use ruby annotations to help them out like this:<\/p>\n

\n I love the WWW<\/rb> \uff08<\/rp>World Wide Web<\/rt>\uff09 <\/rp><\/ruby>.\n<\/div>\n

The ruby base<\/strong> (in this case “WWW”) is annotated by ruby text<\/strong> (“World Wide Web”). In this case, the ruby text appears in a small font-size above the base. Traditionally, ruby annotations have been used in Chinese, Korean and Japanese text-books to help students of those languages sound out more complicated characters:<\/p>\n

\n \u6771\u4eac<\/rb> \uff08<\/rp>\u3068\u3046\u304d\u3087\u3046<\/rt>\uff09 <\/rp><\/ruby>\u306b\u884c<\/rb> \uff08<\/rp>\u3044<\/rt>\uff09 <\/rp><\/ruby>\u304d\u305f\u3044\u3002\n<\/div>\n

In the text above, the ruby base is written in Kanji<\/strong>, many of which are only readable by Japanese with a high-school education. The ruby text is written in Hiragana<\/strong>, which all Japanese grade-schoolers can understand. <\/p>\n

I can hear you saying to yourself “Who cares? I’m not Japanese! I can’t read any of it!”<\/strong>. Ruby annotations can also be used to help those who don’t speak the language at all. An author can use ruby to help English speakers pronounce Japanese … <\/p>\n

\n \u6771\u4eac<\/rb> (<\/rp>t\u014d ky\u014d<\/span><\/rt>) <\/rp><\/ruby> \u306b (<\/rp>ni<\/span><\/rt>) <\/rp><\/ruby>\u884c\u304d (<\/rp>iki<\/span><\/rt>) <\/rp><\/ruby>\u305f\u3044 (<\/rp>tai<\/span><\/rt>) <\/rp><\/ruby>\u3002\n<\/div>\n

.. or, for that matter, any other language, like Ukrainian.<\/p>\n

\n\u0417\u043e\u043b\u0442\u0430\u043d <\/rb> (<\/rp>zol-tan<\/rt>)<\/rp><\/ruby> \u0404\u0432\u0433\u0435\u043d\u043e\u0432\u0438\u0447 <\/rb> (<\/rp>yew-hen-o-vich<\/rt>)<\/rp><\/ruby> \u0413\u0430\u0432\u0440\u0438\u043b\u044e\u043a <\/rb> (<\/rp>how-real-luke<\/rt>)<\/rp><\/ruby>.\n<\/div>\n

It can also allow an author to give translations on top of foreign words.<\/p>\n

\n \u6771\u4eac \u306b \u884c\u304d \u305f\u3044<\/rb> (<\/rp>I want to go to Tokyo.<\/span><\/rt>) <\/rp><\/ruby>\u3002\n<\/div>\n

But I Have a Hard Enough Time With English!<\/h2>\n

Ruby text can also be used for help foreign students pronounce English words that may difficult to read:<\/p>\n

\nHis communication <\/rb> (<\/rp>kə-myoo<\/span>-nĭ-kā´<\/strong>-shən<\/rt>) <\/rp><\/ruby> skills are quite bad.\n<\/div>\n

It can be also be used to help English speakers read intimidating Eastern European surnames transliterated into English:<\/p>\n

\nMy name is Zoltan Hawryluk<\/rb> (pronounced: <\/rp>how-real-luke<\/rt>)<\/rp><\/ruby>.\n<\/div>\n

(An aside note to telemarketers:<\/strong> if you call my home and ask my to speak to “Mister Have —- um — uk” , “Mister Hawww — ahh — uhhh” or especially “Mr. Zoltar”<\/em><\/strong>, I will hang up immediately. If you actually pronounce my name correctly, I’ll give you at least five minutes of my time. I mean it.)<\/p>\n

Okay, how is this coded?<\/h2>\n

Let’s take a look at the markup of the above example:<\/p>\n

\n
\r\nMy name is Zoltan\r\n<ruby>\r\n   <rb>Hawryluk<\/rb>\r\n   <rp> (<\/rp>\r\n   <rt>how-real-luke<\/rt>\r\n   <rp>) <\/rp>\r\n<\/ruby> \r\n<\/pre>\n<\/blockquote>\n
Let’s break down what each of these tags do:<\/p>\n\n\n\n\n\n\n\n\n
Tag<\/th>\nName<\/th>\nFunction<\/th>\n<\/tr>\n<\/thead>\n
\n<ruby><\/code>\n<\/td>\nRuby Tag<\/td>\nUsed to specify a Ruby Annotation.<\/td>\n<\/tr>\n
\n<rb><\/code>\n<\/td>\nRuby Base Tag<\/td>\nUsed to specify the text that is to be annotated.<\/td>\n<\/tr>\n
<rt><\/code><\/td>\nRuby Text<\/td>\nThe actual ruby text, which contains the actual annotation.  By default, it appears above the actual text.<\/td>\n<\/tr>\n
<rp><\/code><\/td>\nRuby Parenthesis<\/td>\nThese are displayed to browsers that cannot display ruby text, and permits graceful degradation.  It also allows the text to be copied and pasted into another document without the formatting.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
To illustrate the last point about the <rp><\/code> tag, copy and paste the following ruby text into notepad, vi or any other plain text editor:<\/p>\n
\nMy name is Zoltan Hawryluk<\/rb> (pronounced: <\/rp>how-real-luke<\/rt>)<\/rp><\/ruby>.\n<\/div>\n
You will see the following in your text editor:<\/p>\n
\n
\r\nMy name is Zoltan Hawryluk (pronounced: how-real-luke).\r\n<\/pre>\n<\/blockquote>\n
This is because the of how the <rp><\/code> tags are defined:<\/p>\n
\n
\r\nMy name is Zoltan <ruby><rb>Hawryluk<\/rb><rp> (pronounced: <\/rp><\/span><rt>how-real-luke<\/rt><rp>)<\/rp><\/span>\r\n<\/pre>\n<\/blockquote>\n
Browser Support<\/h2>\n
So what browsers support these tags?  Originally, the <ruby><\/code> tag was a proprietary Microsoft tag that worked in IE 5+.  Since then it has become a part of HTML5 and WebKit based browsers like Safari and Chrome now support it as well.  In order for Firefox and Opera to join the party, I remixed a stylesheet<\/a> developed for Prince XML<\/a> by George Chavchanidze<\/a> of Opera Software.  Below are some screenshots of how the ruby text looks in the various browsers with or without the stylesheet.<\/p>\n\n\n\n\n\n\n\n\n\n
<\/th>\nWith stylesheet set<\/th>\nWithout stylesheet set<\/th>\n<\/tr>\n<\/thead>\n
IE 6.0+<\/th>\n\"example<\/td>\n\"example<\/td>\n<\/tr>\n
Firefox 3.6+<\/th>\n\"example<\/td>\n\"example<\/td>\n<\/tr>\n
Safari 5.0+<\/th>\n\"example<\/td>\n\"example<\/td>\n<\/tr>\n
Chrome 7.0+<\/th>\n\"example<\/td>\n\"example<\/td>\n<\/tr>\n
Opera 10.63+<\/th>\n\"example<\/td>\n\"example<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Download the stylesheet used in the examples on this page<\/a><\/p>\n
I took George’s excellent<\/strong> work and added a few additional features:<\/p>\n