The <ruby>
tag displays a ruby annotation which indicates the pronunciation or meaning of the text.
The annotation appears in very small font above the text.
This tag is mostly used in East Asian publications.
This <ruby>
element displays the pronunciation (Hai) about the Japanese text 'はい'.
<ruby>
はい
<rp>(</rp><rt>Hai</rt><rp>)</rp>
</ruby>
The <ruby>
tag is used to display ruby annotations.
Ruby annotations are rendered in very small text which indicates the pronunciation or meaning.
This element is placed above, below, or next to the base text it is associated with.
The <ruby>
tag works with these two tags:
<rt>
- provides the pronunciation or further explanation to the text<rp>
- displays text when the <ruby>
tag is not supported by the browser.
Phrase tags highlight the meaning of a small piece of text (i.e. a phrase).
The <ruby>
tag is one of them, but there several others.
A list of all HTML Phrase tags.
Tag | Description |
---|---|
<em> | Indicates emphasized text |
<strong> | Indicates important text |
<code> | Indicates computer code |
<samp> | Indicates sample output from a computer program |
<ruby> | Indicates a ruby annotation (used to display text pronunciation or meaning) |
<var> | Indicates a variable |
The tag <ruby>
is used to specify ruby annotations.
The word ruby came from a unit of measurement used by typesetters.
It represents the smallest text size which can be printed on newsprint while still being readable.
This annotation is most commonly used in Japanese publications.
The <ruby>
tag is part of a group of tags
that are used to create and format text documents.
This group is referred to as the Text tag group.
Together, they allow you to create comprehensive HTML text documents.
Here is a list of text tags.
Element | Description |
---|---|
<h1>-<h6> | Defines text headings in 6 different sizes |
<p> | Creates a paragraph |
<span> | Container for one or more inline text elements |
<br> | Creates a line break |
<sup> | Specifies superscript text |
<sub> | Specifies subscripted text |
<u> | Specifies underlined text |
<i> | Specifies italic text |
<b> | Specifies bold text |
<em> | Marks text that needs emphasis |
<strong> | Indicates text that is important or with high urgency |
<del> | Defines deleted text |
<ins> | Defines inserted text |
<kbd> | Specifies keyboard input, such as, CTRL or ALT |
<ruby> | Represents a small annotation with pronunciation of text |
<wbr> | Specifies a preferred word-break location for long words |
Here is when <ruby>
support started for each browser:
Chrome
|
5.0 | May 2010 |
Firefox
|
38.0 | May 2015 |
IE/Edge
|
5.5 | Jul 2000 |
Opera
|
15.0 | May 2013 |
Safari
|
5.0 | Jun 2010 |