LoginSignup
4

More than 5 years have passed since last update.

ルビ<ruby>非対応のFirefoxで、<rp>でお茶を濁さずにCSSだけで非表示にする方法。

Posted at

HTML5の最終勧告から日が浅いので、今後のブラウザ実装次第ではすぐに使い物にならなくなる可能性はありますが…。
以下の簡単なCSSだけで、Firefoxでのルビ振り自体を非表示にできます。

ご存知の通り、普通に<ruby>タグで表示させると、

html
アナと<ruby><rt>ゆき</rt></ruby><ruby>女王<rt>じょうおう</rt></ruby>

Chrome、Safari、Internet Explorer
 アナと雪の女王

Firefox
 アナと雪ゆきの女王じょうおう

Firefoxでは<rt>タグが無視されてしまうわけで、
大抵の場合は<rp>タグで非対応ブラウザ向けに括弧を付与して回避するわけです。

html
アナと<ruby><rp></rp><rt>ゆき</rt><rp></rp></ruby><ruby>女王<rp></rp><rt>じょうおう</rt><rp></rp></ruby>

Firefox
 アナと雪(ゆき)の女王(じょうおう)

というふうになります。これでルビの役目は果たしますが、
ここまでやるほどそこまでルビは重要じゃないよね。といったケースもあります。
で、それならば、Firefoxだけ非表示にしてしまおう。というときには簡単なCSSだけで解決できます。

css
@-moz-document url-prefix() {
  rt, rp {
    display: none;
  }
}

Firefox
 アナと雪の女王

Mozillaの独自拡張 @-moz-document url-prefix で、
無視されていた<rt>タグを(すでに利用していたら<rp>タグも)そのまま非表示にするだけです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4