ruby ... ⁄ruby
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
- is an optional element
- multiple ruby elements allowed per HTML5 document
Parents, children ruby
- ruby nested within elements »ruby parents
- elements nested within ruby »ruby children
»examples
Attributes ruby
- required: none
- optional: global attributes, event attributes
Syntax ruby
| 1 | <> ... </> »video |
Attributes and Values ruby (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | < accesskey="h"> ... </> | |
| 2. | class | = | class name | »html »img | < class="class_name"> ... </> | |
| 3. | contenteditable | = | "", , true, false | »html | < contenteditable="true"> ... </> | |
| 4. | contextmenu | = | menu id value | »html | < contextmenu="menu_id_value"> ... </> | |
| 5. | data-* | = | value | - | < data-http-error="404"> ... </> | |
| 6. | dir | = | ltr, rtl, auto | »html | < dir="ltr"> ... </> | |
| 7. | draggable | = | true, , false | »img | < draggable="false"> ... </> | |
| 8. | dropzone | = | copy, move, link, string:, file: | - | < dropzone="copy"> ... </> | |
| 9. | hidden | = | "", , hidden | »html »img | < hidden="hidden"> ... </> | |
| 10. | id | = | id name | »html »img | < id="unique_id_name"> ... </> | |
| 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 | < lang="en"> ... </> | |
| 17. | spellcheck | = | "", , true, false | »html | < spellcheck="true"> ... </> | |
| 18. | style | = | CSS property:value | »html »img | < style="color:red"> ... </> | |
| 19. | tabindex | = | integer | »img | < tabindex="3"> ... </> | |
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < title="html page"> ... </> | |
| 21. | translate | = | "", yes, no | »html »img | < translate="yes"> ... </> | |
| 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 element, please see the specs: W3C ⁄ WHATWG