HTML の <ruby> に思うこと

ニュースサイトから記事本文を抜き出して利用しようという作業をやってみて、<ruby> 要素がほかの要素に比べてかなり異質なものあることに気がつきました。

ニュースの本文は

...<p><span class="colorC"><ruby>気象庁<rt>きしょうちょう</rt></ruby></span>は「もっと<a href="javascript:void(0)" class="dicWin" id="id-0000"><ruby><span class="under">二酸化炭素</span><rt>にさんかたんそ</rt></ruby></a>を<ruby>出<rt>だ</rt></ruby>さないようにしなければなりません」と<ruby>話<rt>はな</rt></ruby>しています。</p>...

のようになっています。BeautifulSoup の .text で単純にタグを削除するだけでは

気象庁きしょうちょうは「もっと二酸化炭素にさんかたんそを出ださないようにしなければなりません」と話はなしています。

と、ルビが本文に混じってしまい、まともな文になりません。事前に rt 要素を削除しておく必要があります。

実際に行った作業は「HTML からタグを除去して本文を取り出す」なのですが、単純に行って得られるものは上記のとおりで、それを「本文」とは呼べないと思うのです。

マークアップ言語

はじめに、

気象庁は「もっと二酸化炭素を出さないようにしなければなりません」と話しています。

という“内容”そのものがあります。これに“意味”をつけるために、たとえば「気象庁」は固有名詞という意味をつけるためにこれを <span> で囲み、それからこの文ひとつでひとつの段落という意味をつけるためにこれを <p> で囲みます。これがマークアップであり、そのためのタグであるはずです。

次の段階で、これをどう表示するか、たとえば固有名詞は文字を赤色にし、段落はそのはじめに改行する、というものはさらに分離してスタイルシートで記述することになっています。

逆向きに考えてみます。ブラウザで表示されるもののソースから表現のスタイルを取り除き、“意味”づけのタグを取り除いたら、残るのは“内容”そのものでなければならないはずです。

ところが今回の例では上述のように、余計なものが残ったままになります。

ルビは“内容”か

私は「ふりがなは内容そのものではなく、それに付け加えているもの」と考えますので、「余計なもの」と書きました。たとえば、ここの言葉は重要と思って下線を付ける、固有名詞ははっきり分かるように文字の色を他と違える、というのと同じで、内容に対して何らか助けのために付け加えているものだと思います。ですから、そういったものを剥ぎ取ったときには残っていてはならないと考えます。

そう考えたときに、現在の仕様の <rt> はかなり異質です。下線や色付けがタグ内の属性(attribute)とそれに紐付けられるスタイルで表現されるように、ふりがなもタグではなく属性で示されるのが適当だと思います。

仮に <span>ruby という属性が定義されているとして

...<p><span class="colorC" ruby="きしょうちょう">気象庁</span>は「...」と<span ruby="はな">話</span>しています。</p>...

と書くのがもっとも自然のように感じます。

既存の仕様である <a> を逆に考えてみましょう。<a> にとって属性 href は、それがなければほとんど意味がないくらい重要なものです。

もっと<a href="example.html>二酸化炭素</a>を出さないようにしなければなりません

だからと言ってもしそれがタグになっていて

もっと<a>二酸化炭素<href>example.html</href></a>を出さないようにしなければなりません

と書かれるものだとしたら、その違和感がわかろうというものです。

<rt> のあり方

前節に書いたように、ルビは属性で指定されるのが自然だと思います。ではどうすればいいのか。

<ruby>関連要素って駄目駄目」に、この問題の歴史(なんと不幸な!)から対案まで解説されていました。この記事をぜひじっくり読んでいただきたい。

この記事の「脱法ルビ」が、当面の対応策です。仕様に反せず、仕様内でできる策です。現状ここまでできるのですから、ここに示されているスタイルをレンダリングエンジン側で装備し、属性名を data-ruby ではなく ruby とできるよう仕様のほうが改訂されたら、当分は現在の <ruby>, <rt> との共存期間があったとしても、もうほとんど解決ではないですか。

……と思ったら、このスタイル、すなわち display: ruby-text を実装しているのは Gecko (Firefox) だけで、Webkit (Safari)も Blink (Chrome) も未対応でした(2018年6月現在)。ひどい状況です。

ルビを実際に使う人やデザイナのほとんどは、ほんの少し首をかしげるくらいはあっても、仕様に従って使うだけで、そのしようがどうあるべきかまで問い返したりはしません。そもそも世界のうちでごく限られた言語だけでしか知られておらず、その中でも使う人はごく少数ですから、問題にする人も滅多にいなければ対応もぜんぜん進まないのでしょう。ほんとうに不幸です。

2013年に読まれた記事トップ10

流行っているみたいなので、自分のところでも見てみました。Jetpack のサイト統計情報の1年分です。

2012-12-31 to 今日

  1. gdm でのシャットダウンの禁止 (2007年10月)
  2. GNOME でのシャットダウンの禁止—最近の流儀 (2011年6月)
  3. 2台所有する自動車の1台を手放すとき、保険は等級の高いほうを残すことができる (2013年2月)
  4. WordPress 3.6 日本語版 (2013年8月)
  5. WordPress: フィルターより前にショートコードを実行させる (2013年3月)
  6. wp-login.php への攻撃に対処する (2013年9月)
  7. 公開 Jabber/XMPP サーバー (2011年7月)
  8. 日本語スタイルガイド項目別比較一覧表 (2012年3月)
  9. ja.po のコメント欄に見る WordPress 日本語版の歴史 (2013年5月)
  10. Jabber と WordPress (前編) (2010年11月)
  11. Firefox に新しいプロトコルを教える (2012年2月)

1位の記事はとても古くて、そこから誘導している改訂版みたいな内容が2位なので、これらは実質同じもの。この情報は公式に近いところに見られないのでこちらに来ているのでしょうか。こういうちょっとした設定をしたいのにとてもわかりにくい GNOME の傾向はなんとか変わってくれないものかと思います。

3位の自動車保険の話も、意外と他所では見つけにくい情報なのでしょう。

4位の WordPress 日本語版リリースリーダーの話は、twitter や facebook で広めてもらった(自分の記事としては)ようです。

5位は、いまこのリストを見て自分でも意外でした。これも他所にはあまりない情報なのかなあ。

7位と10位は古い記事ですが、Jabber/XMPP の情報は日本語ではとても少ないので、ここにたどり着くのでしょう。公開サーバー STEP.im をよろしくお願いします。

9位は、WordPress 10周年に寄せて書いたものです。

1位と2位が実質ひとつなので、11位まで掲載しました。

このブログを継続的に見ている人はたぶんほとんどなく、検索でその記事だけ単発にたどり着くのが大部分だと思っています。あたりまえのことですが、他所にない情報がよく見られているということですね。来年もそんな記事をいくつか書ければと思います。

Firefox に新しいプロトコルを教える

前の記事のようにして、WordPress の記事に xmpp: のリンクを書けるようになりました。しかし、それを読む側のブラウザが「そんなの知らん」と言っては役に立ちません。

手元の環境は Linux (Debian) 上の Firefox (Debian では Iceweasel という名前) ですので、それについて書きます。その他の環境については、wiki.xmpp.org に情報があります (ただし Firefox の例を見てもやや古い情報のようです)。

ブラウザ

Firefox について、mozillaZine の Register protocol を参考にしました。

  1. ロケーションバーに about:config と入力します。
  2. 右クリック→新規作成→真偽値 とします。
  3. 「設定名」を network.protocol-handler.expose.xmpp とし、値を false とします。
  4. 次にこの xmpp: のリンクをクリックしたときに、どのアプリケーションでこのリンクを開くか、聞いてきます。これはあとで 編集→設定→プログラム のところで変更できます。

Chromium (Chrome) については、常用していないので詳しくありません。ヘルプを見ると、設定→高度な設定→コンテンツの設定 の「ハンドラ」あたりでどうにかするのでしょうか。

XMPPクライアント

ところで、この方法ではアプリケーションに URL が渡されるのですが、それを受け取って開きながら起動できる XMPP アプリケーションを2つ紹介します。

ひとつは Gajim です。ただし gajim-remote handle_uri %s という形で呼び出すのですが、Firefox から URL 以外の引数を渡せないようなので、ラッパーを介することにしました。

もうひとつは、ウェブアプリの Jappix です。Jappix の オプション→一般→XMPPリンク の「JappixでXMPPリンクを開く」をクリックすると、Firefox の、どのアプリケーションでこのリンクを開くかという選択肢に Jappix が入ります。

Firefox での印刷時の背景色

Firefox (Iceweasel) で、背景色を白以外(薄い灰色)に指定して使用している。プリンタへの印刷の際には「背景色を印刷しない」設定ができる。そのはずなのだが、しばらく前からこれが印刷されるようになってしまっていた。

検索してみて、もじら組フォーラムから Bug 652914 という情報にたどり着いた。いまだ解決されていないようだ。背景色を白以外に設定していて、かつ、プリンタに印刷することのある人というのはかなり少数なのだろうか。

自分の userContent.css に

@media print {
        * {background-color: white;}
}

と書いたら、とりあえず背景色は印刷されなくなった。この程度で回避できるくらいなら、すぐにも修正されそうな気もするのだが。

Mozilla Firefox のサイドバー

数日前から Firefox (Debian では Iceweasel) のサイドバーに
asahi.comのネットスケープ用サイドバーは、2009年6月5日で終了します。RSS、ツールバーなどをご利用ください。
と表示されるようになりました。 サイドバーは確か Netscape 6 からだったでしょうか。その後 Firefox には引き継がれず、衰退してしまいました。私は拡張機能のイージーSidebarを利用しています。asahi.com のサービスがなくなれば、購読しているまともなサイドバー対応のサービスはスラッシュドットジャパンくらいです。 しかしサイドバーは、携帯サイトを表示させればちょうどいいサイズです。便利に使っているのは河川情報の「レーダー雨量」の履歴動画です。

テーマを作る (3)

header.php つづき

WordPress 2.1に附属のテーマ default からいただいてきて改造する。 まず、Another HTML-lintの忠告に従い、
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
を加える。

linkrelプラグイン

WordPress 2.1 に移行してLink Relプラグイン動かなくなっていた。エラーを見るとSQLを組み立てられなくなっていたようだ。WP-PageNaviプラグイン 2.10を参考にして、preg_matchの部分を
if(!is_category()) {
	preg_match('#FROMs(.*)sORDER BY#siU', $request, $matches);
} else {
	preg_match('#FROMs(.*)sGROUP BY#siU', $request, $matches);
}
としたら動くようになった。 しかし、ときどきリンクを間違える。ID順にリンクするらしく、記事のあいだに(静的)ページを作ったりするとそちらにリンクを向けてしまう。 この際なので新たに作ることにした。([2009-06-15]新しいバージョンに置き換えた) 前半はWP-PageNaviプラグインからいただき、これは !is_single() なので、is_single() の場合は wp-includes/link-template.php より previous_post_link(), next_post_link() をいただいて <a href=… > … のかわりに <link rel=… href=… /> を出力するようにした。
linkwidgets
linkwidgets
ところでこのサイトナビゲーションは流行らなくなっていくのだろうか。Mozillaの頃は<link rel=…> にも対応していたのだが、Firefoxになってからは削除されてしまった。そこでLink Widgetsという拡張機能を入れている。 なおこの絵のように、Status Buttonsという拡張機能で、ツールバーのボタンをステータスバーに持ってくることができる。

seoプラグイン

SEO Title Tagプラグインを入れるので
<title><?php if (function_exists('seo_title_tag')) { seo_title_tag(); } else { bloginfo('name'); wp_title();} ?></title>
と対応させておく。

Chatzilla

ML第三回WordPress交流会のお知らせがあったので顔を出してみた。都合があってほんの30分ほどしか参加できなかったのだが、皆さんありがとうございました。

さて、もうずいぶん長いこと使っていない IRC だったので、クライアントを探して入れるところからだった。いくつか試してみて、手っ取り早く使いやすかったのは Chatzilla。Mozilla Suite から Firefox になってなくなってしまったかと思っていたら、拡張としてちゃんと存在していた。日本語化されているにょずらのものを入れた。

[2007年6月25日追記] にょ☆ずらの URI が変更になっていたので、現在のものに変更した。