Ruby furigana in pure css

I’m not entirely sure about the nature of the ruby tag within HTML, but I know that it is used by many Japanese sites for including furigana. If you stumbled upon this post then you are probably aware what furigana is (and can skip the rest of this paragraph). If not, well in Japanese many Chinese characters are used. Those characters are called kanji. The Japanese also have 2 phonetic alphabets, hiragana and katakana. The problem with kanji is that unless you know the character (and in some cases the whole word), you will have no idea how to pronounce it (many Japanese names are written using the same characters but pronounced differently, not to mention foreigners and Japanese kids who are just learning kanji will have trouble with more than just names). To help overcome this problem the Japanese use furigana in some of their written text. Furigana are small hiragana characters (though small katakana or kanji characters are also used occasionally) placed above a kanji (in horizontal text) or to its right (in vertical text). You can find more about furigana on wikipedia.

Anyway, to correctly display furigana enclosed in a ruby tag, you will need a plugin like HTML Ruby for Firefox. Without such plugin the furigana (enclosed between parentheses) will be placed inline behind the kanji.

Here is a sample of HTML containing some ruby furigana.

<ruby><rb>私</rb><rp>(</rp><rt>わたし</rt><rp>)</rp></ruby>はパンを<ruby><rb>買</rb><rp>(</rp><rt>か</rt><rp>)</rp></ruby>った。

Without a furigana plugin it will render as:

私(わたし)はパンを買(か)った。

If you’re using a browser on a desktop computer, you can just install a plugin for your browser and be done with it, but what if you need to display ruby furigana on a machine\browser that doesn’t have such plugin, or what if you are writing a PhoneGap application?

It turns out you can style ruby furigana to display correctly using css alone. The biggest obstacle in getting this to display correctly is reversing the order in which kanji and furigana are displayed. The plugins achieve this through use of translate (within the transform style). This method has some limitations, but there is another way to do this.

The trick is to use table-header-group display method on the furigana. This is “equivalent” to making an element behave like a thead tag, effectively making it display at the top of it’s container (in this case the ruby tag).

Obviously this css furigana isn’t perfect (there is no support of dot furigana), but should be good enough to use in most cases. The code for ruby css is below:

ruby
{
	display:inline-block;
	text-align:center;
	padding-top:0.2em;
	word-wrap:normal;
	vertical-align: bottom;
}

ruby rp
{
	display:none;
}

ruby rb, ruby rt
{
	display:block;
	text-align:center;
	vertical-align:bottom;
}

ruby rt
{
	display: table-header-group;
	font-size:0.5em;
	line-height:1.5em;
}

ruby rb
{
	display: table-row-group;
	vertical-align:bottom;

 

Update: Turns out “newer” versions (4 and up) of android have Ruby support in the native browser, making this trickery unnecessary. I think FireFox too has added support for Ruby recently.

Rikaikyun – a reader app for Japanese text on Android

On desktop computer there are such wonderful browser plugins like Rikaichan, Rikaikun and Rikaisama that will translate Japanese words for you if you move your mouse over them.

Apparently Rikaichan might have (or have not) worked in an older version of FireFox for Android, but currently your best bet, when it comes to dictionary supported reading of Japanese on your Android device of choice is Jade Reader (it even works on a E Ink Android device like Onyx Boox T68 Lynx). However, this app haven’t seen an update in ages and is missing quite a few functions. The source code is available on the internet here. I tried my luck altering the code, but I only managed to make small alterations to an older version of the app. The never version uses different external libraries and it’s not well documented, so I had issues even compiling it…

I was trying to make an app that uses Rikaichan (Rikaikun to be exact) in Node-Webkit and by accident I found out that the Rikaichan core code runs even if I run it directly on a html page. This made me believe that it might be possible to run Rikaichan in PhoneGap. As it turned out, it can be used inside PhoneGap (I suspect it won’t work on any Android younger than 4.0.4 due to the amount of RAM it requires)!

Above I mentioned core code, what I meant by that is that I didn’t manage to make Rikaichan work as a whole, but just the dictionary module (data.js). Thankfully the dictionary module can be used on it’s own and the fancy display can be always recreated from scratch. Using it is actually quite simple, though I had hard time telling what is what inside Rikaikun plugin. Maybe I’ll make another post about that.

So, I started a new project name Rikaikyun. Currently it’s not very impressive as it just loads first chapter of Genji Monogatari (you can’t pick a specific file yet) while offering no customization whatsoever, but the point is the basic functionality is there. By basic functionality I mean, you can tap a word and it will open a dictionary popup. I have big plans for this app (furigana, word stats etc.), but I’m not sure how far I can push the thing performance-wise (PhoneGap isn’t the most efficient platform, though newer devices Android devices seem to handle it well enough).

Anyway, the project is still in a very early stage and it can be found at https://github.com/jahu00/Rikaikyun. It should be possible to even test it without putting it on your Android device. Both Chrome (with –allow-file-access-from-files option) and FireFox should be able to handle the file (though touch events and zoom won’t work in FireFox). To test it on desktop just run the index.html found in www folder. For android, you would have to make PhoneGap build it for you, or use the PhoneGap developer app.

If there is any progress with this app, I’ll try posting info about it here.

Referrerless redirect in JavaScript

In the world of Google Analytics referrers are important as they tell where did the visit came from. Normally you don’t really want to hide it, but many sites do that because of how outgoing links affect your position on Google index. The typical way to achieve this is through a redirect script that is placed on the server. Then you redirect by calling the script like this*:

http://yoursite.com/redirect.php?url=example.com

Such script would generate html that would look more or less like this:

<meta http-equiv="refresh" content="1; url=http://example.com/">
Redirecting to <a href="http://example.com/">example.com/</a>

The thing is most browsers will lose referrer when refresh is used. If one redirected using a http header, the referrer would be retained. Here is an example of such redirect in php:

$url = $_GET['url'];

// The line below might or might not be required.
// It depending on whether PHP already decoded query parameters for you.
$url = urldecode($url);

// Handling other protocols might be required
if (strpos($url, 'http://') === false)
{
    $url = 'http://'.$url;
}

header("HTTP/1.1 301 Moved Permanently");
header("Location:".$url);
header("Connection: close");

I guess this is enough introduction, so let’s get to the core of the problem.


Let’s say you write a userscript and for whatever reason you don’t want the referrer to be passed when you redirect (like you don’t want to make the owners of the site, to which you want to redirect to, wonder how come they have users coming from their competitor’s site). The standard way to redirect using JavaScript is through window.location.href, for example:

window.location.href = "http://example.com";

Turns out that if you use this method the referrer is retained. So how to get rid of the referrer while redirecting using JavaScript?

Of course you can place a redirect script on some external server or rely on an existing service that offers such redirects, but either solution relies on resources that are separate from the script and might break at any time.

Thankfully you can make a referrerless redirect in JavaScript. The trick is to use Data URI. Basically instead of putting a new url in window.location.href you put a redirect page directly there (yes, you put html there). The code might look like this:

window.location.href =
	'data:text/html;charset=utf-8,' +
	encodeURIComponent(
	    '<meta http-equiv="refresh" content="1; url=http://example.com/">' +
	    'Redirecting to <a href="http://example.com/">example.com/</a>'
	);

With this your redirect is referrer free. Maybe later I’ll share my userscript for checking referrer and\or turn the above code into a jquery plugin.