html-furigana.wht (1279B)
1 # HTML furigana 2 3 For providing furigana (kana on top of 世界(せかい)) for kanji or similar style 4 markup `<ruby>` [1] tag can be used. 5 6 Structure of `<ruby>` tag might seem complicated at first but it's rather 7 simple when you learn what each tag does. 8 9 The above example can be shown as: 10 11 ```html 12 <ruby>世界<rp>(</rp><rt>せかい</rt><rp>)</rp></ruby> 13 ``` 14 15 However it can also be shown as: 16 17 ```html 18 <ruby> 19 世界 20 <rp>(</rp> 21 <rt>せかい</rt> 22 <rp>)</rp> 23 </ruby> 24 ``` 25 26 Each of lines provides certain function, `<ruby>` tag itself wraps the 27 furigana, `<rp>` tag provides support for legacy browsers to display 28 furigana beside the kanji 世界(せかい) and `<rt>` provides furigana itself. 29 30 If one would want to split furigana between kanji it can be easily done 31 inside a single tag. 32 33 世(せ)界(かい) = World 34 35 36 ```html 37 <ruby title="World"> 38 世 39 <rp>(</rp> 40 <rt>せ</rt> 41 <rp>)</rp> 42 界 43 <rp>(</rp> 44 <rt>かい</rt> 45 <rp>)</rp> 46 </ruby> 47 ``` 48 49 [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ruby