Wednesday, April 16 2008

More fun with furigana and jQuery

When I first started playing with pop-up furigana, I was aware of the official method of specifying them in HTML, using the RUBY, RB, and RT tags. They’re only supported in IE, though, and the standard half-size presentation simply doesn’t make sense for the low resolution of displays, even with good anti-aliasing.

Some folks are using them anyway, like the University of Virginia Library Japanese Text Initiative, which is another good source of free literature. If you’re not running IE (or the Firefox extension that they say works), the furigana degrade relatively gracefully into full-sized kana in parentheses following the glossed word, with no indication of how many of the preceding kanji are being glossed.

Tonight, I had the sudden urge to adapt my system to work with the will-eventually-work-in-other-browsers RUBY tags. This turned out to be pretty easy, for the simple case. I just added this code right before my gloss script:

$(document).ready(function(){
$("ruby").each(function(){
	var rb=$(this).children("rb").eq(0).text();
	var rt=$(this).children("rt").eq(0).text();
	var gloss=$('<span class="gloss">' + rb + '</span>');
	$(gloss).attr('title',rt);
	$(this).replaceWith(gloss);
})});