Click here to Skip to main content
14,926,224 members
Articles / All Topics
Technical Blog
Posted 1 May 2016

Tagged as

Stats

3.4K views

Text Level Semantics - Part 6

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
1 May 2016CPOL1 min read
Text level semantics

The ruby element allows text to be marked with ruby annotations.

Ruby annotations are used to provide pronunciation guides to text in East Asian languages. I know it as furigana in Japanese.

The ruby element is made up of a number of sub elements that define what the ruby element represents.

The basic structure for a ruby element is:

HTML
<ruby><rb>base text</rb><rt>annotation text</rt></ruby>

The base text is the original text that you are annotating with the annotation text being the annotation.

So to use a Japanese example, we could use:

HTML
<ruby><rb>地下鉄</rb><rt>ちかてつ</rt></ruby>

which is displayed as:

If you want the annotations to be displayed with a specific base character, then you can do this using multiple base elements such as:

<ruby><rb>地</rb><rt>ち</rt><rb>下</rb><rt>か</rt><rb>鉄</rb><rt>てつ</rt></ruby>

which is displayed as:

If you wish to provide another set of annotation to the words, then you can also use the rtc element which is a ruby text container.

If we wanted to provide the pronunciation of the word written in English, then we would use:

HTML
<ruby><rb></rb><rt></rt><rb></rb><rt></rt><rb></rb><rt>てつ</rt></ruby>

which in my browser is displayed as:

 

 

Some browsers do not support the ruby element and as such, the rp element exists to ensure that the text still makes sense.

The rp element is only shown in user agents that do not support the ruby element.

So using our original example of:

HTML
<ruby><rb>地下鉄</rb><rt>ちかてつ</rt></ruby>

we can make it work with user agents that do not support ruby by adding rp elements.

HTML
<ruby><rb>地下鉄</rb><rp>(</rp><rt>ちかてつ</rt><rp>)</rp></ruby>

which might be displayed as:

HTML
地下鉄 (ちかてつ)

Feel free to share your experiences and opinions related to this post in the comments and if you liked this blog post and can't wait to read more, bookmark this site or subscribe to the RSS Feed.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Member 12485502
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --