Lopan.jp

ふりがなを振る。
ふりがなのスタイル

サイトのデザインによっては、ふりがなをもうちょっと小さめにしたい場合もあるかもしれませんね。タイトルとかのふりがなでは、 頭揃えにしたり、お尻揃えにしたいかもしれません。そんなふりがなのスタイルを調整したい時のためのまとめです。

文字サイズと文字間

まずは手短なところから。

ルビテキストの文字サイズは、デフォルトだとルビベースの半分の文字サイズ50%になってる(下サンプル上段)んですけれど、このサイズは、普段のテキストと同様に、font-sizeプロパティを使って調整することができます。
下のサンプル(下段)では、ルビベースの30%の文字サイズになるように、指定しています:)

rt { font-size: 30%; }

一方、ふりがなの文字間を調整する場合はというと、普段のテキストと同様にletter-spacingプロパティで調整しようとしても、上手くいきません…。下のサンプルでは、ルビテキストの文字間を0.2文字分詰まるように指定してるのですけれど、あまり変化が見られませんね…:(

rt { letter-spacing: -.2em; }

実は、ふりがなのレイアウトは、ルビベースの文字幅に合わせてバランスよく配置されるよう、既にふりがなごとに文字間が調整されているんです。
文字間を調整する場合には、次の項で紹介するふりがなの寄せ方の指定と、合わせて指定しなくちゃいけません。下のサンプルは、寄せ方をcenterとしてから、改めて文字間を調整してみました。
ぎゅっと寄りましたね;)

ruby {
	ruby-align: center;
}
rt {
	letter-spacing: -.2em;
	text-align: center;
}

ページトップへ戻る

ふりがなの寄せ方

ルビテキストの寄せ方は、特に何も指定しなければ、ルビベースの文字幅内にバランスよく並ぶよう、レイアウトされます。前項でやったみたいに、文字間を調整したかったり、はたまた、ルビベースと頭揃えしたかったり、お尻揃えしたい場合もあるやもしれません。
ふりがなの左右の位置(寄せ方)を調整する方法をまとめます:)

ruby-alignプロパティを使う

ふりがなの寄せ方を指定するには、ruby-alignプロパティを使います。値は以下の4つが用意されていて、start(頭揃え)center(中央揃え)space-between(両端揃え)space-around(初期値)という感じ。

.start ruby { ruby-align: start; }
.center ruby { ruby-align: center; }
.between ruby { ruby-align: space-between; }
.around ruby { ruby-align: space-around; }
Firefox64での表示

space-betweenspace-aroundとで、パッと見て違いがわかりませんが、よぅく見てみると、space-betweenの方が、ルビベースの文字幅の端から端までふりがなが広がってるのが分かります(下図)

space-betweenspace-aroundの違い

上のサンプルだと、IE/Edgeでは、centerしか効いていないようですけれど、IE/Edgeには早期草稿が実装されていて、別の値を使うことで、Firefoxと同じようにレイアウトすることができます。
用意されている値は、left(左揃え)right(右揃え)center(中央揃え)distribute-letter(両端揃え)distribute-space(初期値)の5つ。なるほど、centerだけは共通してたんですねー:D
こちらはrightがあるから、お尻揃えもできますね!;D

.start ruby { ruby-align: left; }
.end ruby { ruby-align: right; }
.center ruby { ruby-align: center; }
.between ruby { ruby-align: distribute-letter; }
.around ruby { ruby-align: distribute-space; }
Edge18での表示

ruby-alignプロパティについて詳しくは以下のページを参照のこと。
ruby-align - CSS: カスケーディングスタイルシート | MDN

ここまで、Chrome/Safariで見ている人は、なんじゃらほいと思われていることでしょう、そう、Chrome/Safariはruby-alignプロパティに対応していないんです:(。なので、代わりにtext-alignプロパティを使って指定することになります。

ページトップへ戻る

text-alignプロパティを使う

文章の行揃えを指定するためのプロパティtext-alignを使って、ふりがなの寄せ方を指定します。
ここでは、ruby-alignプロパティの時と同じ要領で、text-alignプロパティに置き換えて、指定してみます。

.start ruby { text-align: start; }
.end ruby { text-align: end; }
.center ruby { text-align: center; }
.left ruby { text-align: left; }
.right ruby { text-align: right; }
.justify ruby { text-align: justify; }

うまくいかないですね…:(
Chromeのデベロッパー ツールで、rt要素の「user agent stylesheetユーザーエージェント・スタイルシート」を見ると、text-align: startが指定されてました。なので、ここでは、上の指定はそのままに、rt要素のtext-align親要素の値を継承するように、inheritインハーリットを指定しておくことにします:)

rt要素のtext-alignの値を上書き
rt { text-align: inherit; }
Chrome71での表示

指定した通り、ふりがなが寄りましたね!justify最終行には適用されない値なので、一行だけのふりがなには効果がなくてleftと同じ結果になりました。
ruby-alignプロパティが効かない割に、デフォルトの状態でruby-align: space-aroundを指定したのと同じようにレイアウトされるので、実質できないのはspace-betweenだけ、ということになります。

けれど、endrightは同じ結果なのに、startleftが違う結果なのが不思議ですね…:o
text-alignプロパティの初期値はstartで、普段のテキストではleftと同じように左揃えになりますが、ふりがなの場合には、ruby-alignプロパティの初期値space-aroundと同じようにレイアウトされています。つまり、startあくまで初期値って事なんですねー:D

ページトップへ戻る

ふりがなの寄せ方まとめ

ルビテキストの寄せ方を指定するのにベストな書き方は以下に決定ということにします;D(2018.12現在)
Chrome/Safariのために、rt要素に対してtext-align: inheritを指定した上で、ruby要素に、Chrome/Safari、IE/Edge、Firefoxそれぞれのための指定を並べて書きます。
ruby-alignプロパティはChrome/Safariで効果がないし、text-alignプロパティはFirefox/IE/Edgeで効果がないので、併記しちゃって問題ないのですね;9

※Firefoxでお尻揃えend、Chrome/Safariで両端揃えspace-betweenは、できないので、しょうがないですX)

rt { text-align: inherit; }
.start ruby {
	text-align: left;
	ruby-align: left;
	ruby-align: start;
}
.end ruby {
	text-align: end;
	ruby-align: right;
}
.center ruby {
	text-align: center;
	ruby-align: center;
}
.between ruby {
	text-align: start;
	ruby-align: distribute-letter;
	ruby-align: space-between;
}
.around ruby {
	text-align: start;
	ruby-align: distribute-space;
	ruby-align: space-around;
}

以上、ふりがなのスタイルについてでした。最後まで読んでいただきありがとうございました!

Comment & Pingback

1 Comment for ふりがなのスタイル

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください