Help us understand the problem. What is going on with this article?

CSSでruby要素に対応させる場合の、Firefoxと旧Opera用の最低限の記述

More than 5 years have passed since last update.

追記

概要

三日前、以下の投稿をしました。

HTML - CSSだけでFirefoxや旧Operaでruby要素(タグ)を有効にする - Qiita

この投稿で、私はsim2ruby.cssを紹介し、CSSだけでruby要素に対応する方法の一例を示しました。
しかしこのsim2ruby.css、メイリオフォントに対応していません。

サイトのCSSで基本フォントにメイリオを使用するように指定していると、ブラウザによってルビつきテキスト部分が上方向に0.2em~0.8em程度ずれて表示されることがあります。
sim2ruby側でこのずれを補正しようとすると、今度はメイリオがインストールされていないユーザ環境でMS Pゴシックなどの代理表示になった場合に逆に下方向にずれてしまうため、現在のところメイリオフォントを使用してなおかつルビ表示を全環境でそろえる方法はありません。

sim2ruby.cssでは、表示誤差を修正するため様々なプロパティが指定されています。
その中に、単位付きの数値で微調整を行っているものがあり、その影響でサイトで設定したフォントによってはうまくいかない場合があります。
font-sizeline-heightも上書きされており、サイト制作者の意図した文字サイズや行間にならない場合も存在します。

私のサイトではメイリオフォントを利用しており、sim2ruby.cssが利用できないため、自前でruby要素に対応するためのCSSを書きました。
CSSだけで対応するのは無理があると判断し、JavaScriptも併用しています。

本投稿では、私がruby要素に対応しながらメイリオフォントを利用するために作ったCSSを書く上で得た、Firefoxと旧Opera用の最低限の記述について記載します。
JavaScriptを合わせて動作させる事を前提としているため、対応ブラウザ用の記述については記載しません
ruby要素に対応している旧IE用の指定とか邪魔でしかないですし…

注意

HTML5ではrb要素が不要ですが、これが無いとルビに対応できません。
仕様に従いrb要素を使わない場合、以下のCSSセレクタのrbを変更してください。

…ただし、rb要素でないと、FirefoxのHTML Ruby 6.22.3で滅茶苦茶になります。

ruby要素非対応ブラウザのためのCSS

Firefox

ruby,
ruby rb,
ruby rt {
    text-align: center;
}

ruby {
    display: inline-table;
    vertical-align: bottom;
}

    ruby rb {
        display: table-row-group;
    }

    ruby rt {
        display: table-header-group;
        font-size: 50%;
    }

    ruby rp {
        display: none;
    }

これでいいの?
という程に簡単ですが、これでいいのだ。

旧Opera(Opera 15未満)

ruby,
ruby rb,
ruby rt {
    text-align: center;
}

ruby {
    display: inline-table;
    vertical-align: baseline;
    -o-table-baseline: 2;
}

    ruby rb {
        display: table-row-group;
    }

    ruby rt {
        display: table-header-group;
        font-size: 50%;
    }

    ruby rp {
        display: none;
    }

Firefoxと違うのは、ruby要素用の記述だけです。
-o-table-baselineという見慣れないプロパティが存在しますが、私もよく分かりません。
Opera版のHTML Rubyでこのようになっており、試したら上手くいっただけです。

注意点として、ruby要素のvertical-alignプロパティは初期値でなければなりません
vertical-alignプロパティの値にbaseline以外が指定されている場合、上下方向にずれます。

その他

その他のブラウザでは、場合によってvertical-align: bottomの指定通りに配置されず、上下方向のズレが発生する可能性があります。
(手持ちブラウザでは、Opera以外でこの現象は発生していません。)

その場合、vertical-alignプロパティに数値で値を指定する必要があるため、JavaScriptに頼る事になります。

Firefox & 旧Opera 両対応のCSS(@supports利用)

CSSの@supportsルールを利用することで、Firefoxと旧Operaに両対応したruby要素対応用のCSSが書けます。

ruby,
ruby rb,
ruby rt {
    text-align: center;
}

ruby {
    display: inline-table;
    vertical-align: bottom;
}

    ruby rb {
        display: table-row-group;
    }

    ruby rt {
        display: table-header-group;
        font-size: 50%;
    }

    ruby rp {
        display: none;
    }

@supports ( -o-table-baseline: 2 ) {
    ruby {
        vertical-align: baseline;
        -o-table-baseline: 2;
    }
}

@supportsルール-o-table-baseline: 2に対応しているか判定し、対応している場合、旧Opera用の記述に上書きしています。

ただし、@supportsルールはOpera 12.1からサポートされているため、それより古いOperaでは利用できません。
ニンテンドーDSブラウザーやニンテンドーDSiブラウザー、Wiiのインターネットチャンネルには対応できません。

この箇所は、JavaScriptで判定するのが一番でしょう。
以下は、JavaScriptで-o-table-baselineプロパティに対応しているか判定し、対応している場合にhtml要素にno-ruby-operaクラスを追加するコードです。

var html = document.documentElement;
if ('OTableBaseline' in html.style) {
    html.className += ' no-ruby-opera';
}
classListが使えるならこれもあり
var html = document.documentElement;
if ('OTableBaseline' in html.style) {
    html.classList.add('no-ruby-opera');
}
sounisi5011
最近はNode.jsでTypeScript製のライブラリ開発ばかりして遊んでる無職(大学院生)です。古のPHPや、HTML5、CSS3などの知識もあります。 正規表現もそれなりに扱えますが、JavaScriptとPHPで学んでいるので、アマチュアレベルの実力だと思っています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした