HTML <ruby> tagS2C Home   « HTML <ruby> tag

Definition

The <ruby> tag allows spans of phrasing content to be marked with Ruby Annotations.

Ruby Annotations are short spans of text presented alongside base text that are primarily used in East Asian typography for guidance on pronunciation or inclusion of other annotations.

The <ruby> element must contain at least one or more of the following child elements <rp>, <rt> or <rtc>.

The <ruby> tag was introduced in HTML5.

Example


<ruby>
  伦 <rp>(</rp><rt>lún</rt><rp>)</rp>
  敦 <rp>(</rp><rt>dūn</rt><rp>)</rp>
  <rtc> London</rtc>
</ruby>
伦 (lún) 敦 (dūn) London

Attributes

The following attributes can be used with the <ruby> tag.


<ruby> Specific Attributes
Attribute Value Description Example
There are no required or optional attributes specific to the <ruby> tag.
<ruby> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<ruby class="name">Ruby Annotations</code>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<ruby id="name">Ruby Annotations</code>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<ruby style="color:red;">Ruby Annotations</code>
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<ruby title="Content info">Ruby Annotations</code>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<ruby accesskey="a">Ruby Annotations</code>
tabindexSpecifies a tab order for the element. 

<ruby tabindex="1">Ruby Annotations</code>
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<ruby dir="ltr">Ruby Annotations</code>
<!-- The text will flow from right to left -->
<ruby dir="rtl">Ruby Annotations</code>
langSpecifies a language code for the content of the element. 

<ruby lang="en">Ruby Annotations</code>
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<ruby spellcheck="true">Ruby Annotations</ruby>
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<ruby translate="no">Ruby Annotations</ruby>
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<ruby contenteditable="true">Ruby Annotations</ruby>
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<ruby draggable="true">Ruby Annotations</code>
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<ruby hidden>Ruby Annotations</ruby> 
<ruby hidden="hidden">Ruby Annotations</ruby>
<ruby> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<ruby oncopy="go()">Ruby Annotations</ruby>
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<ruby oncut="go()">Ruby Annotations</code>
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<ruby onpaste="go()">Ruby Annotations</code>
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<ruby ondrag="go()">Ruby Annotations</code>
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<ruby ondragend="go()">Ruby Annotations</code>
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<ruby ondragenter="go()">Ruby Annotations</code>
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<ruby ondragleave="go()">Ruby Annotations</code>
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<ruby ondragover="go()">Ruby Annotations</code>
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<ruby ondragstart="go()">Ruby Annotations</code>
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<ruby ondrop="go()">Ruby Annotations</code>
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<ruby onblur="go()">Ruby Annotations</code>
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<ruby onchange="go()">Ruby Annotations</code>
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<ruby oncontextmenu="go()">Ruby Annotations</code>
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<ruby onfocus="go()">Ruby Annotations</code>
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<ruby oninput="go()">Ruby Annotations</code>
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<ruby oninvalid="go()">Ruby Annotations</code>
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<ruby onreset="go()">Ruby Annotations</code>
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<ruby onselect="go()">Ruby Annotations</code>
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<ruby onsubmit="go()">Ruby Annotations</code>
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<ruby onkeydown="go()">Ruby Annotations</code>
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<ruby onkeypress="go()">Ruby Annotations</code>
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<ruby onkeyup="go()">Ruby Annotations</code>
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<ruby onabort="go()">Ruby Annotations</code>
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<ruby oncanplay="go()">Ruby Annotations</code>
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<ruby oncanplaythrough="go()">Ruby Annotations</code>
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<ruby oncuechange="go()">Ruby Annotations</code>
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<ruby ondurationchange="go()">Ruby Annotations</code>
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<ruby onemptied="go()">Ruby Annotations</code>
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<ruby onended="go()">Ruby Annotations</code>
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<ruby onloadeddata="go()">Ruby Annotations</code>
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<ruby onloadedmetadata="go()">Ruby Annotations</code>
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<ruby onloadstart="go()">Ruby Annotations</code>
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<ruby onpause="go()">Ruby Annotations</code>
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<ruby onplay="go()">Ruby Annotations</code>
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<ruby onplaying="go()">Ruby Annotations</code>
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<ruby onprogress="go()">Ruby Annotations</code>
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<ruby onratechange="go()">Ruby Annotations</code>
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<ruby onseeked="go()">Ruby Annotations</code>
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<ruby onseeking="go()">Ruby Annotations</code>
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<ruby onstalled="go()">Ruby Annotations</code>
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<ruby onsuspend="go()">Ruby Annotations</code>
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<ruby ontimeupdate="go()">Ruby Annotations</code>
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<ruby onvolumechange="go()">Ruby Annotations</code>
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<ruby onwaiting="go()">Ruby Annotations</code>
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<ruby onclick="go()">Ruby Annotations</code>
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<ruby ondblclick="go()">Ruby Annotations</code>
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<ruby onmousedown="go()">Ruby Annotations</code>
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<ruby onmousemove="go()">Ruby Annotations</code>
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<ruby onmouseout="go()">Ruby Annotations</code>
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<ruby onmouseover="go()">Ruby Annotations</code>
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<ruby onmouseup="go()">Ruby Annotations</code>
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<ruby onwheel="go()">Ruby Annotations</code>
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<ruby onscroll="go()">Ruby Annotations</ruby>
Window - NONE

Relevant HTML Tutorials

HTML Basics - Language Tags