HTML5 the definition of ruby tags and how to use them (examples are introduced)

This article mainly explains the HTML5 in a new label, HTML5 Ruby label, although not new, but also in the HTML5 new tags, html5 the definition of Ruby tags and specific usage examples are in this article, I hope you read carefully

HTML5 the definition and usage of ruby tags:

<ruby> tags define ruby annotations (Chinese phonetic notation or characters).

Used in East Asia, the pronunciation of East Asian characters is displayed.

Use with <ruby> and <rt> tags:

A RUBY element consists of one or more characters (requiring an explanation/pronunciation) and an RT element that provides that information, and an optional RP element that defines what is displayed when the browser does not support the "Ruby" element.

HTML5 <ruby> Tag Examples

A ruby comment:

<ruby> <rt><rp> (</rp>ㄏㄢˋ<rp>) </rp></rt></ruby>

HTML5 use of Ruby tags (compatibility under different browsers)

This label is used because the Japanese phonetic notation needs to be displayed in the Web page.

<rp> tags are used in ruby annotations to define what is displayed by browsers that do not support ruby elements.

HTML5: <ruby> <rt><rp> (</rp>ㄏㄢˋ<rp>) </rp></rt></ruby>

Html4:none

<rt> tags define the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).

HTML5: <ruby> <rt>ㄏㄢˋ</rt></ruby>

Html4:none

<ruby> tags define ruby annotations (Chinese phonetic notation or characters).

HTML5: <ruby> <rt><rp> (</rp>ㄏㄢˋ<rp>) </rp></rt></ruby>

Html4:none

However, some browsers support the tag is not enough, originally thought that the lower version of IE, the label will expire, who knows from ie6-9 all support the label,

Another thing I unexpectedly is that Firefox does not support the label, although Chrome under the support, but there is a problem, is to remove the RP tag, if

Plus the phonetic notation does not appear in the head of the text. Finally, after loading the page, then use JS to remove the RP tag.

To determine the Chrome browser, replace the RP tag, but in the Chrome browser, the font always has a fixed minimum font size, through the following two scripts can solve the problem

if (Window.navigator.userAgent.indexOf ("Chrome")! =-1) {    $ ("Ruby"). each (      function (i, O) {    $ (o). HTML ($ (O ). HTML (). Replace (/<rt><\/rt><rp>\ (<\/rp> (. *) <rp>\) <\/rp>/gmi, "<rt>$1 </rt> "));});    $ ("HTML"). CSS ("-webkit-text-size-adjust", "none");    $ ("Ruby RT"). CSS ("Font-size", "9px");

HTML5 <ruby> Comment Tags:

Today's Ruby tags in the HTML5, find it interesting to record a bit.

Ruby can be used as an annotation tag with an internal RP and RT tag.

<ruby> tags define annotations or phonetic transcription.

<rp> tells those browsers that don't support ruby elements how to display them.

The <rt> tag defines the content text for Ruby annotations.

The first response to this tag is that I have the means to make kana comments for those Japanese words that can't be read!!!

The code below, to give a small comment on a Japanese sentence:

<! DOCTYPE html>
The HTML5 Ruby tag works as follows:


Some browsers do not support <ruby> tags, this time the <rp> tag is particularly important,<rp> I understand the meaning of "character". A good-character browser is displayed in the form of a comment above, as in the case of a bad character, a <rp> tag is needed to supplement the comment.

The text in <rp> is not displayed when the browser is compatible, only the text in the <rt> appears in the notation above. In the case of incompatibility, the text of the comment inside the,<rt> will be shown later, as if the contents of the <rp> package can be displayed.

The HTML5 Ruby tag works as follows:


Tip: Browsers that support the "Ruby" element do not display the contents of the "RP" element.

Differences between HTML 4.01 and HTML 5

The <ruby> tag is a new label for HTML 5.

Browser support

IE + +, Firefox, Opera, Chrome and Safari support <ruby> tags.

Note: IE 8 or earlier versions of IE browser do not support <ruby> tags.

"Small series of related articles"

What does the HTML noscript tag mean? How much do you know about the use of <noscript> tags?

What is the var tag for HTML? A detailed description of the definition and usage of the Var tag