To write furigana (振り仮名) in HTML, you can use the <ruby> element, which is a part of the HTML Ruby Extension. The <ruby> element is used to mark up ruby text, which is a type of small, annotated text that is used to provide pronunciation or other information about a character or word.
Here’s an example of how you can use the <ruby> element to write furigana in HTML:
<ruby>
読<rt>よ</rt>む
</ruby>Which looks like this:
(meaning “to read”, pronounced in English as “yomu”).
In this example, the kanji character “読” is surrounded by the <ruby> element, and the pronunciation of the character (written in hiragana as “よ”) is marked up with the <rt> (ruby text) element. The resulting furigana will then be displayed above the kanji character.
Note that the <ruby> element is not supported in all web browsers, so you may want to include a fallback solution in your HTML code in case the <ruby> element is not supported by the user’s browser. One way to do this is to use the <ruby> element in combination with the <rp> (ruby parenthesis) element, which can be used to provide a fallback for browsers that do not support ruby text. Here’s an example of how you can use the <rp> element to provide a fallback for the <ruby> element:
<ruby>
読<rp>(</rp><rt>よ</rt><rp>)</rp>む
</ruby>Which (once again) looks like this:
In this example, the <rp> elements are used to enclose the <rt> element in parentheses, which can be used as a fallback for browsers that do not support the <ruby> element. The resulting text will be displayed as “読(よ)む” in browsers that do not support the <ruby> element.
Easy!
Note: for those wondering how to write Furigana within a WordPress blog post or page, check out this other post of ours!
3 replies on “How to Write/Add Furigana in HTML? (Answered)”
While including okurigana inside the RUBY code works in this case, ….
読よむ
…, it’s safer to put it outside the RUBY tags.
御客様 (おきゃくさま) 御お客きゃく様さま
Note that this is absolutely necessary when the hiragana comes before the kanji in a word.
お客さま(おきゃくさま) お客きゃくさま
I’d suggest that you update your page, then delete my “reply”.
I noticed the the less-than and greater-than characters were treated as went as “raw” charaters so maybe this will be easier to read.
<ruby>
\b 読<rt>よ</rt>む
\b</ruby>
\b
\b御客様 (おきゃくさま) <ruby>御<rt>お<rt></ruby><ruby>客<rt>きゃく</rt>様<rt>さま</rt></ruby>
\b
\bお客さま(おきゃくさま) お<ruby>客<rt>きゃく</rt></ruby>さま
I’ll try once more.
Perhaps the first one got emailed to you unfiltered, so this isn’t necessary.
<ruby>
読<rt>よ</rt>む
</ruby>
御客様 (おきゃくさま) <ruby>御<rt>お<rt></ruby><ruby>客<rt>きゃく</rt>様<rt>さま</rt></ruby>
お客さま(おきゃくさま) お<ruby>客<rt>きゃく</rt></ruby>さま
Please delete my comments, and just rewrite your page a bit.
I don’t need credit, but others reading this page would benefit by knowing this information.