不良少年 » ウェブサイト »

CSSでルビを振る

Atom RSS

CSSでルビを振る

 私のペンネームは「かのう神路(しんぢ)」であって、けっして「かのう神路(かみじ)」ではありません。
 ……我ながら紛らわしい当て字だこと。
 こんな読みづらい名前なので、ルビ振らないと誰も読めないんですが、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($_SERVER['HTTP_USER_AGENT'], 'MSIE') === 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」を修正しなきゃならんとこですが。(泣)

関連記事

トラックバック

コメント

comment シキシマヒロタカ。 さん - 2010年1月30日 (土) 7:56:35

かみじって呼ばれちゃったのねwしんちゃんなのにねぇw

comment 天城雲龍 さん - 2010年1月30日 (土) 9:03:12

「じんろ」とも読めますね。ってそれは焼酎・・・
ちなみに自分は最初からちゃんと読めましたよ。ええ、そうですともww

comment かのう神路 さん - 2010年1月30日 (土) 10:07:30

> ヒロタカ。さん
実はかなり以前から誤読されたり読めなかったりで、読み方知ってる古い友人以外は「かのうさん」と読まざるをえないそうな。
大阪にも「神路(かみじ)」って地名があるらしいし。ホンギャー!

> 天城さん
ジンロ! それはたのしーいオタク!
おお! 天城さんは読めましたか! ひゃっほう!
実は四人に一人くらいしか読めないんですよね。ボクのHN。(泣)

コメント投稿フォーム

※ スパム防止の為、コメント内に2個以上のリンクがあった場合、サイト管理者 (かのう神路) が承認するまで表示されません。

ページの先頭に戻る