{"id":87,"date":"2022-12-23T16:00:54","date_gmt":"2022-12-23T16:00:54","guid":{"rendered":"https:\/\/www.joyokanjikai.com\/learning-japanese\/?p=87"},"modified":"2024-07-04T18:06:46","modified_gmt":"2024-07-04T18:06:46","slug":"how-to-write-furigana-in-html","status":"publish","type":"post","link":"https:\/\/www.joyokanjikai.com\/learning-japanese\/how-to-write-furigana-in-html\/","title":{"rendered":"How to Write\/Add Furigana in HTML? (Answered)"},"content":{"rendered":"\n

To write furigana (\u632f\u308a\u4eee\u540d)<\/a> in HTML, you can use the <ruby><\/code> element, which is a part of the HTML Ruby Extension<\/a>. The <ruby><\/code> 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.<\/p>\n\n\n\n

Here’s an example of how you can use the <ruby><\/code> element to write furigana in HTML:<\/p>\n\n\n\n

<ruby>\n  \u8aad<rt>\u3088<\/rt>\u3080\n<\/ruby><\/code><\/pre>\n\n\n\n
Which looks like this:<\/p>\n\n\n\n
\n
\n\n  \u8aad\u3088<\/rt>\u3080\n<\/ruby>\n<\/div>\n<\/div>\n\n\n\n
(meaning \u201cto read\u201d, pronounced in English as \u201cyomu\u201d).<\/p>\n\n\n\n
In this example, the kanji character “\u8aad” is surrounded by the <ruby><\/code> element, and the pronunciation of the character (written in hiragana as “\u3088”) is marked up with the <rt><\/code> (ruby text) element. The resulting furigana will then be displayed above the kanji character.<\/p>\n\n\n\n
Note that the <ruby><\/code> 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><\/code> element is not supported by the user’s browser. One way to do this is to use the <ruby><\/code> element in combination with the <rp><\/code> (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><\/code> element to provide a fallback for the <ruby><\/code> element:<\/p>\n\n\n\n
<ruby>\n  \u8aad<rp>(<\/rp><rt>\u3088<\/rt><rp>)<\/rp>\u3080\n<\/ruby><\/code><\/pre>\n\n\n\n
Which (once again) looks like this:<\/p>\n\n\n\n
\n
\n\n  \u8aad(<\/rp>\u3088<\/rt>)<\/rp>\u3080\n<\/ruby>\n<\/div>\n<\/div>\n\n\n\n
In this example, the <rp><\/code> elements are used to enclose the <rt><\/code> element in parentheses, which can be used as a fallback for browsers that do not support the <ruby><\/code> element. The resulting text will be displayed as “\u8aad(\u3088)\u3080” in browsers that do not support the <ruby><\/code> element.<\/p>\n\n\n\n
Easy!<\/p>\n\n\n\n
Note: for those wondering how to write Furigana within a WordPress blog post or page, check out this other post of ours!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
To write furigana (\u632f\u308a\u4eee\u540d) 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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[16,23],"tags":[21,20,24],"class_list":["post-87","post","type-post","status-publish","format-standard","hentry","category-kanji","category-katakana","tag-furigana","tag-html","tag-kana"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/posts\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":18,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"predecessor-version":[{"id":1193,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/posts\/87\/revisions\/1193"}],"wp:attachment":[{"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joyokanjikai.com\/learning-japanese\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}