htmlcsscharacter-encodingruby-characters

Is there a way to add pinyin/furigana to a class with css/javascript?

I've been scouring the web for a while now, on how to add pinyin/furigana to Chinese and Japanese respectively. I'd really love to just add like a class like class="furigana" to the texts that require it. I'm making a language learning game that will need to be able to display this information. Can anyone shed any light on this matter? Thanks a lot!

Solution

  • pinyin/furigana can be added using the ruby HTML element which is part of a W3C Recommendation and is supported on about 95% of web browsers as of July 2017.

    Example:

    <ruby>漢字<rt>かんじ</rt></ruby>

    Edited to change link to W3C recommendation instead of draft and change browser support