Sometimes, additional information is good to have. In Japanese, they sometimes use ruby text above kanji characters so that the reader can be given the correct reading, as kanji have numerous readings depending on the usage in a sentence.

For example, 中 has the kun reading: なか naka, and on reading: チュウ chū.cz

中島 【なかじま】 {nakashima} island in a pond or river

宮中 【キュウチュウ】 {kyūchū} imperial court

In print, it is common to find the kana placed aboved the kanji:



中 ( なか )

島 ( じま )





宮 ( キュウ )

中 ( チュウ )



To achieve this in HTML, the mark-up language used for ruby text uses the the following tags

<ruby></ruby> This declares the content as being subject to ruby text positioning

<rp></rp> This declare the ruby parenthesis, for older browsers that cannot interpret ruby markup, the ruby text is placed within parenthesis, which the coder needs to include

<rt></rt> Ruby text goes inside these tags

So, for our examples above we have

<ruby>

中 <rp>(</rp><rt>なか</rt><rp>)</rp>

島 <rp>(</rp><rt>じま</rt><rp>)</rp>

</ruby>

<ruby>

宮 <rp>(</rp><rt>キュウ</rt><rp>)</rp>

中 <rp>(</rp><rt>チュウ</rt><rp>)</rp>

</ruby>

But it is possible, also, to write them as long line of tags as follows

<ruby> 中 <rp>(</rp><rt>なか</rt><rp>)</rp> 島 <rp>(</rp><rt>じま</rt><rp>)</rp> </ruby>

<ruby> 宮 <rp>(</rp><rt>キュウ</rt><rp>)</rp> 中 <rp>(</rp><rt>チュウ</rt><rp>)</rp> </ruby>

External Links:

W3Schools example : https://www.w3schools.com/tags/tag_rp.asp

WordPress supports Ruby tags : https://en.forums.wordpress.com/topic/ruby-text-in-wordpress?replies=4

Uses For Other Chinese Dialects and Sino-Xenic readings.

Now we know the ins-and-outs of using the Ruby tags in HTML, we can adapt the use for indicating character pronunciations for Chinese dialects, such as Hakka or possibly for non-Chinese readings from Vietnam, Korea or Japan.

For tones, I prefer the numerical superscript appearing to the top right of the romanised syllable. The superscript tag in HTML is <sup></sup>. For example:

宋 sung4

is obtained by writing the following

<ruby>宋<rp>(</rp><rt>sung<sup>4</sup></rt><rp>)</rp></ruby>

(N.B. It can appear as 宋 (sung4) in browsers which do not support Ruby tags.)

In the Hakka romanisation I usually employ, the maximum number of characters for a romanised syllable reading is seven characters: six for the the longest romanised syllable (e.g. ngiong) and one for the tone (e.g. 2)

Adding spaces between the <rt> tags allow for better ruby text spacing between adjacent entries.

If we add spacing either side of the romanised syllable, for single characters, it doesn’t matter very greatly.

娘 ngiong2 : Without

娘 ngiong2 : With spacing

In multiple character string, it allows the ruby text to be seperated from it’s neighbour.

娘 ngiong2 娘 ngiong2 : Without spacing multiple characters



娘 ngiong2 娘 ngiong2 : With spacing multiple characters

The increase in tags within your article can make editing somewhat of a challenge especially when proof reading and trying to edit mistakes in spelling. The close proximity of the superscript to the previous line of text also provides legibility problems if the text is not spaced properly.



六 ( liuk5 )

六 ( liuk5 )

三 ( sam1 )

十 ( sip6 )

六 ( liuk5 )



<ruby>

六 <rp>(</rp> <rt> liuk<sup>5</sup> </rt> <rp>)</rp>

六 <rp>(</rp> <rt> liuk<sup>5</sup> </rt> <rp>)</rp>

三 <rp>(</rp> <rt> sam<sup>1</sup> </rt> <rp>)</rp>

十 <rp>(</rp> <rt> sip<sup>6</sup> </rt> <rp>)</rp>

六 <rp>(</rp> <rt> liuk<sup>5</sup> </rt> <rp>)</rp>

</ruby>