How to Write/Add Furigana in HTML? (Answered)

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!