CSSでルビを振る

2010年1月29日 (金)

CSSでルビを振る

カテゴリ: ウェブデザイン | コメント (3) | トラックバック (0) | |

　私のペンネームは「かのう神路(しんぢ)」であって、けっして「かのう神路(かみじ)」ではありません。
　……我ながら紛らわしい当て字だこと。
　こんな読みづらい名前なので、ルビ振らないと誰も読めないんですが、IE 以外のブラウザはほとんど <ruby> タグに対応してません。
　Firefox のアドオンで対応する手もありますが、ユーザーにいちいち「拡張機能入れてたも」と言うわけにもいきません。まあ、対応してなければ単に「かのう神路(しんぢ)」と表示されるだけなんですが、やはり見栄えがよろしくない。

　ってなわけで、実は二年ほど前からIE以外でもルビを表示できるよう、CSS にちょっと仕掛けをしてあります。
　XHTML 1.0 では使えませんが、1.1 なら <ruby> タグが定義されてますので、HNがよく誤読される人などは参考にしてみてください。

超手抜き！　ルビ設定

　仕掛けといっても、やってることは単純です。以下のCSSを見てください。

ruby.css: ルビ設定ファイル (IE 以外に適用)

/***********************************************
 * ルビ
 */

ruby
{
  position: relative;
}

rb
{
  font-size: 13px;
  line-height: 22px;
}

rt
{
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  white-space: nowrap;
  font-size: 8px;
  text-align: center;
}

rp
{
  display: none;
}

　赤字の部分は、ご自分のサイトに合わせて調整してください。
　上記の例はうちのサイトのフォントサイズ (13px) に合わせてあります。
　（ぶっちゃけ私のピクセル単位で指定するクセは、あまり真似しない方がいいかと。「font-size: 0.9em」とか書いた方がスマートです）

　要は<rt>タグ（ルビ文字列の指定タグ）の位置を上に数ピクセルずらすだけです。
　この際、‘position: absolute’ で絶対位置指定にしないと、まともに表示されないのでご注意あれ。
　これだけで Firefox や Opera でもルビが表示されますが、このままでは元々ルビが表示できる IE の設定を殺してしまうので、以下のようなPHPファイルで処理分けします。
　（別にCSSハックやIEコメントハックなどの裏技で処理分けしてもいいですが、素直にスクリプトで分けた方が安全です）

ruby_css.php: ruby.css の読み込み用スクリプト

<?php
/**
 * CSS Loader
 */
header('Content-Type: text/css; charset=utf-8');

// IE 以外のブラウザに適用する
// (USER_AGENT ヘッダに 'MSIE' が含まれていないブラウザ)
if(strstr('/MSIE/', $_SERVER['HTTP_USER_AGENT']) === false)
  include_once('ruby.css'); // ruby.css を読み込む
?>

　こうすることでIE (Sleipnir などのIE系描画エンジンを持つブラウザも含みます) 以外のブラウザに対してのみ、先ほどの「ruby.css」を読み込むようになります。
　あとは HTML ファイルの<link>タグで上記の「ruby_css.php」を指定するだけです。

使用例

　いまどきHTMLタグ打ちしてる人なんて何人いるかわかりませんが、たとえば以下のようなHTMLの場合。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>ルビを振ってみるテスト</title>
  <link rel="stylesheet" type="text/css" href="ruby_css.php" />
</head>

<body>
  <p>
  かのう<ruby><rb>神路</rb><rp>(</rp><rt>しんぢ</rt><rp>)</rp></ruby>のウェブサイト<br />
  <ruby><rb>不良少年</rb><rp>(</rp><rt>ふりょうしょうねん</rt><rp>)</rp></ruby>へようこそ！
  </p>
</body>

</html>

　こんな感じで表示されます。

かのう神路(しんぢ)のウェブサイト
不良少年(ふりょうしょうねん)へようこそ！

　ううむ、もっとCSSで行間あけるべきでした。読みづれえ……。
　あまりルビに頼るサイトもどうかと思いますが、なきゃないでやっぱり困るのがルビ。
　どうしてもルビが欲しいという方はぜひお試しあれ！
　……難点は将来ブラウザがルビに対応したとき、いちいち「ruby_css.php」を修正しなきゃならんとこですが。（泣）

トラックバック

TrackBack URL :

日	月	火	水	木	金	土
« 6月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

CSSでルビを振る

2010年1月29日 (金)