Menu
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!
677
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
97
You can add it to a custom HTML tag with CSS which is what I did.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
fg:before {
content: attr(t);
display: block;
font-size: 50%;
text-align: start;
line-height: 1.5;
}
fg {
display: inline-block;
text-indent: 0px;
line-height: normal;
-webkit-text-emphasis: none;
text-align: center;
line-height: 1;
}
</style>
</head>
<body>
<fg t="わたし">私</fg>はケンです。<br><br>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
