W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

ruby ... ⁄ruby

Share it

ruby intro ruby parents - children ruby syntax

HTML5 ruby element

The ruby element allows you to mark up phrasing content for which you can provide ruby annotations (small annotations) » video
This content is usually East Asian content, in Chinese or Japanese, but not limited to it.

The ruby annotations (related to pronunciation or other aspects) will be provided through rt element.
The fallback content (content that displays in browsers that don't support ruby annotations) will be provided through rp element.

About ruby

Parents, children ruby

Attributes ruby

Syntax ruby

1<ruby> ... </ruby> »video

Attributes and Values ruby (comma separated)

<rubyattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<ruby accesskey="h"> ... </ruby>
2.class=class name»html »img<ruby class="class_name"> ... </ruby>
3.contenteditable="",  , true, false »html<ruby contenteditable="true"> ... </ruby>
4.contextmenu=menu id value»html<ruby contextmenu="menu_id_value"> ... </ruby>
5.data-*= value -<ruby data-http-error="404"> ... </ruby>
6.dir=ltr, rtl, auto»html<ruby dir="ltr"> ... </ruby>
7.draggable= true,  , false»img<ruby draggable="false"> ... </ruby>
8.dropzone= copy, move, link, string:, file: -<ruby dropzone="copy"> ... </ruby>
9.hidden= "",  , hidden»html »img<ruby hidden="hidden"> ... </ruby>
10.id=id name»html »img<ruby id="unique_id_name"> ... </ruby>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<ruby lang="en"> ... </ruby>
17.spellcheck="",  , true, false»html<ruby spellcheck="true"> ... </ruby>
18.style=CSS property:value»html »img<ruby style="color:red"> ... </ruby>
19.tabindex= integer »img<ruby tabindex="3"> ... </ruby>
20.title=text»html »link»style »abbr»dfn
»img »meter
<ruby title="html page"> ... </ruby>
21.translate="", yes, no»html »img<ruby translate="yes"> ... </ruby>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration ruby element

HTML5 ruby element: ruby annotations

min video details
00:00 video tutorial: ruby, rt, rp elements
00:02 ruby element allows you to mark up a base text and provide ruby annotations for it
00:08 these are the Japanese characters for Tokyo
00:11 and for each Japanese character we can provide these ruby annotations (in hiragana, a Japanese syllabary)
00:25 adding the base text (the 2 Japanese characters) inside ruby element
00:28 and only now, for each character, we can provide the corresponding ruby annotations through rt element
00:53 each base character has associated a ruby annotation, but in case these ruby annotations are not supported in browser, we can add parentheses around them between rp start and end tags
01:33 example: this one represents a ruby annotation
01:39 example: this one represents the base character (text) and goes inside the ruby element
01:44 example: this one represents the annotation for the base character (text) and goes inside rt element

For more information about the ruby element, please see the specs: W3CWHATWG