{"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_feature_clip_id":0,"_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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t