Login/Register
Is there a way to add pinyin/furigana to a class with css/javascript?
Asked Answered
Solved htmlcsscharacter-encodingruby-characters
W

2

14

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!

Waltraudwaltz answered 17/11, 2013 at 9:50 Comment(2)
You cannot do this simply by adding a class, you'll have to provide the content as well. Especially furigana are not fixed, a kanji can potentially have many different readings based on context. If you're just asking for the right markup for ruby (not to be confused with the Ruby programming language), there's an answer for that though. – Holography
Oh, they're different? I kind of skipped over those cause I thought it was the programming language. – Waltraudwaltz
R
32

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

Resistencia answered 23/2, 2014 at 12:49 Comment(2)
Firefox does now support this. also make sure to use <meta charset="UTF-8"> in your head, otherwise the browser might assume a different charset like mine did and give some really strange characters. – Amatol
The W3C working draft link is outdated, newer information can be found here: w3c.github.io/i18n-drafts/articles/ruby/markup.en – Rudolfrudolfo
D
6

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>
Digraph answered 23/1, 2019 at 10:22 Comment(1)
It got my attention due to the custom tag. I wonder if you had any problems with it. I have read that valid custom tags should contain a hyphen character, like .e.g. <custom-ruby>. – Liquidity

© 2022 - 2024 — McMap. All rights reserved.