Is there a way to add pinyin/furigana to a class with css/javascript?
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>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