ブラウザは須く一部のCSS3 rubyを実装すべし

webkitがrubyを実装して、喜んでいたのだが、依然私は、以下のようなユーザースクリプトを用いている。

(function(){
　　　　if ( document.getElementById( "hito_hide_ruby" ) )
　　　　　　　　return undefined ;

　　　　var s = document.createElement( "style" ) ;
　　　　s.id = "hito_hide_ruby" ;
　　　　s.type = "text/css" ;
　　　　s.appendChild( document.createTextNode( "rp{display:none;} rt{display:none;}" ) ) ;
　　　　document.getElementsByTagName( "head" )[0].appendChild( s ) ;

　　　　return undefined;
})() ;

理由は、rubyの表示が汚いのだ。たとえば、以下の例を、rubyをサポートしたブラウザで見てもらいたい。

俺は邪気眼(ダーク・セイクレッド・サード・アイ)を持っている。

この例では、「邪気眼」という単語に、「ダーク・セイクレッド・サード・アイ」というルビがかかっている。

さて、まず問題なのは、ルビのオーバーハングである。

　　　ダーク・セイクレッド・サード・アイ
俺は　　　　　　　邪気眼　　　　　　　　を持っている。

と表示されたことと思う。しかし、これは読みにくいと感じる人もいるかもしれない。例えば、

ダーク・セイクレッド・サード・アイ
俺は邪気眼を持っている。

となっているほうが読みやすくないだろうか。

あるいは、前者を好む人もいるかもしれぬ。出来ることなら、この表示を変更できるようにしたい。

そこで、CSS3のruby-overhangプロパティである。これを使えば、ルビがオーバーハングするかどうかを指定できる。

次に、アラインの問題がある。ルビのオーバーハングをしない指定にしたとしよう。その場合、二つの表示方法がある。

　　　ダーク・セイクレッド・サード・アイ
俺は　　　　　　　邪気眼　　　　　　　　を持っている。

　　　ダーク・セイクレッド・サード・アイ
俺は　　　　邪　　　　気　　　　眼　　　を持っている。

どちらがいいかは、人それぞれだろうと思う。ただし、rubyの規格では、デフォルトの表示がどちらであるか、決めていないのだ。

そこで、ruby-alignの出番である。これを使えば、アラインを指定できる。

いうまでもなく、ルビというのは日本語の表示に欠くべからざるものである。もし日本人が最初にHTMLやCSSを考案、実装していたのならば、ワードワラップなどうち捨てて、ルビを最優先で実装したことであろう。哀しい哉、日本はWebに出遅れ、かかる憂き目を見るとは。