ルビタグとスタイルシート

先日[ セン ジツ ]言及[ ゲン キフ ]した Netscape でのルビ表示[ ヘウ ジ ]代替策[ ダイ タイ サク ]であるが、ここは、原點[ ゲ'ン テン' ][ モド ]りルビの仕樣書[ シ ヤウ' シヨ ]見直[ ミ ナホ ]してみた。

ルビ表記[ ヘウ キ ]完全[ クワン ゼン ]文法[ ブン パフ ][ ツギ ]のとほりである。

(1) <ruby><rb>圍</rb><rp>(</rp><rt>ヰ</rt><rp>)</rp></ruby>

このなかに、代替策[ ダイ タイ サク ]として[ ツギ ]のやうな記述[ キ ジユツ ]がある。

rt:before { content: "(" }
rt:after { content: ")" }

ブラウザが CSS2 に對應[ タイ オウ' ]してゐれば、rp要素[ エウ ソ ]をわざわざ記述[ キ ジユツ ]する必要[ ヒツ エウ ]がなく、しかも、引用符[ イン ヨウ' フ ][ コノ ]みに[ オウ' ]じて[ アト ]から一括變更[ イツ カツ ヘン カウ' ]することもできる。それに、はてな日記[ ニツ キ ]閲覽[ エツ ラン' ]するやうなユーザが使[ ツカ ]ってゐるブラウザは CSS2 に對應[ タイ オウ' ]してゐるはずだ。でなければ、ルビ以前[ イ ゼン ]はてな日記[ ニツ キ ]のレイアウトが[ クヅ ]れて[]めなくなる。

となると、[ ツギ ]のやうに簡略化[ カン リヤク クワ ]できる。

(2) <ruby><rb>圍</rb><rt>ヰ</rt></ruby>

XML[ ナガ ]れを[]XHTMLでなく、SGML[ ナガ ]れを[]く HTML では、もつと過激[ クワ ゲキ ]簡略化[ カン リヤク クワ ]もできる。ルビタグ草稿案[ サウ カウ アン ]によると、究極[ キウ キヨク ][ ツギ ][ カタチ ]になる。

(3) <ruby>圍<rt>ヰ</ruby>

[ ジツ ]は、(3) こそ、日本人[ ニ ホン ジン ]が、當初[ タウ' シヨ ][ モト ]めてゐたルビタグ[ チカ ]いものであり、このぐらいシンプルだと、HTMLのソースをそのまま編集[ ヘン シフ ]することも[ ムヅカ ]しくない。ただ、この場合[ バ アヒ ][ ツギ ]のやうにスタイル宣言[ セン ゲン ]變更[ ヘン カウ' ]して、rtの終了[ シユウ' レウ ]タグが ruby終了[ シユウ' レウ ]タグを[][]すことを禁止[ キン' シ ]する必要[ ヒツ エウ ]がある。

ruby rt:before { content: "(" }
ruby rt:after { content: ")" }

しかし、これは、Explorerが CSS2 の擬似宣言[ ギ ジ セン ゲン ]一部[ イチ ブ ]をサポートしてゐなかつたり、Netscapeルビタグをサポートしないといふ[ ウシ ][]きの機能[ キ ノウ' ][]てにした對應[ タイ オウ' ]であり、[ カリ ]兩者[ リヤウ' シヤ ]がそれぞれに對應[ タイ オウ' ]してしまつたら、[ ツギ ]のやうな表示[ ヘウ ジ ]になるのではあるまいか?

これはこれで間拔[ マ ヌ ]けな状況[ ジヤウ' キ'ヤウ' ]だ。ブラウザが機能[ キ ノウ' ]アップして[ オホ ]くのユーザがハッピーになつたとき、この日記[ ニツ キ ][ ギヤク ]にアンパッピーな表示[ ヘウ ジ ]になつてしまふ。

また、ルビタグ草稿案[ サウ カウ アン ]では、過去[ クワ コ ]との互換性[ ゴ クワン セイ' ]重視[ ヂユウ' シ ]し、なはかつ一番簡潔[ イチ バン カン ケツ ]にした表記[ ヘウ キ ][ ツギ ]のやうになる。

(4) <ruby>圍<rp>(<rt>ヰ<rp>)</ruby>

[ ジツ ]は、この日記[ ニツ キ ]は、基本的[ キ ホン テキ ]にこのタグ[]けを採用[ サイ ヨウ' ]してゐた。しかし、終了[ シユウ' レウ ]タグを省略[ シヤウ' リヤク ]した表記[ ヘウ キ ]は、ユーザー定義[ テイ' ギ ]スタイルシートでカスタマイズするのが困難[ コン ナン ]で、モラル[ テキ ][ コノ ]ましくない。

といふことで、もう一度[ イチ ド ]スタイルシート原點[ ゲ'ン テン' ][ モド ]り、フォントのスタイルに注目[ チユウ モク ]する。ルビタグのフォントサイズは、rt要素[ エウ ソ ]は、ruby要素[ エウ ソ ][ タイ ]してデフォルトでは 55%の表示[ ヘウ ジ ]をすることになつてゐる。これに着目[ チヤク モク ]して、[ ツギ ]のやうに rt と rp に[ タイ ]してフォントサイズの指定[ シ テイ' ]をしてみる。

ruby rp { font-size:55%; }
ruby rt { font-size:55%; }

すると、Netscape表示[ ヘウ ジ ]した場合[ バ アヒ ]、ルビが、テキストの進行方向[ シン ギヤウ' ハウ' カウ' ]展開[ テン カイ ]されるといふ状況[ ジヤウ' キ'ヤウ' ][]はらないが、ルビの部分[ ブ ブン ]縮小表示[ シユク セウ ヘウ ジ ]されて、可讀性[ カ ドク セイ' ]向上[ カウ' ジヨウ ]する。また、Explorerでは、もともと 55%の[ オホ ]きさを再指定[ サイ シ テイ' ]しただけなので、表示[ ヘウ ジ ]変化[ ヘン クワ ]はない。

もちろん、可讀性[ カ ドク セイ' ]主觀的[ シユ クワン テキ ]規準[ キ ジユン ][ タヨ ]ることが[ オホ ]く、これでも、[ ユル ]せない[ ヒト ]大部分[ ダイ ブ ブン ]だらうが、このスタイルシート適用[ テキ ヨウ' ]される以前[ イ ゼン ]は、[ ワタクシ ]でさへ Netscape日記[ ニツ キ ][]むのを斷念[ ダン ネン' ]してゐたのが、[ スク ]なくとも、適用後[ テキ ヨウ' ゴ ]は、Netscapeでの日記[ ニツ キ ]もからうじて[]める状況[ ジヤウ' キ'ヤウ' ]になつてきた。[ ジツ ]は、これが一番[ イチ バン ]正攻法[ セイ' コウ ハフ ]だつた。

この正攻法[ セイ' コウ ハフ ]と (1)の完全表記[ クワン ゼン ヘウ キ ]使[ ツカ ]ふことで

  • ルビに對應[ タイ オウ' ]したブラウザでは、[ タダ ]しくルビが表示[ ヘウ ジ ]される。
  • ルビに對應[ タイ オウ' ]してゐないがスタイルシート使[ ツカ ]へるブラウザでは、ルビの部分[ ブ ブン ]括弧付[ カツ コ ヅ ]きで縮小表示[ シユク セウ ヘウ ジ ]になる。
  • ルビにもスタイルシートにも對應[ タイ オウ' ]してゐないブラウザでは、ルビの部分[ ブ ブン ]括弧付[ カツ コ ヅ ]きで通常大表示[ ツウ' ジヤウ' ダイ ヘウ ジ ]される。

といふ、次善[ ジ ゼン ]對應[ タイ オウ' ]可能[ カ ノウ' ]になつた。