読者です 読者をやめる 読者になる 読者になる

素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

abbrをルビとして表示する

javascript

Firefoxの拡張、
HTML Ruby for Firefox
ではXHTML Ruby Supportのようにabbrをルビとして表示する機能はサポートされていないので、自分で書く必要がある。この拡張は更新頻度が高いのでソースコードを直接弄るのは避け、abbrをruby要素に変換する方式を取る。
userContent.css

abbr[title] {
  -moz-binding: url("abbr-to-ruby.xml#run");
}

と書き、同じchromeディレクトリにabbr-to-ruby.xmlという名前で下記の内容を保存する。

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="run">
<implementation><constructor><![CDATA[
var d = this.ownerDocument;
var r = d.createRange();
r.selectNodeContents(this);
var ruby, rb, orp, rt, erp;
ruby = d.createElement("ruby");
rb = d.createElement("rb");
rb.appendChild(r.extractContents());
r.detach();
orp = d.createElement("rp");
orp.appendChild(d.createTextNode("("));
rt = d.createElement("rt");
rt.appendChild(d.createTextNode(this.title));
erp = d.createElement("rp");
erp.appendChild(d.createTextNode(")"));
ruby.appendChild(rb);
ruby.appendChild(orp);
ruby.appendChild(rt);
ruby.appendChild(erp);
this.parentNode.replaceChild(ruby, this);
]]></constructor></implementation>
</binding>
</bindings>