Vertical Rhythm インスパイア Vertical InRitsuをSASSで書いたよ

VERTICAL INRITSU（バーチカル韻律）！　NINJITSU！　的なノリです。どうも。

このブログをリニューアルするときも意識して、普段からも意識してるのがWebで日本語を読みやすくする工夫ってどんなことができるだろうと。黄金比（フィボナッチ数）を使ったジャンプ率とVertical Rhythmが2大セオリーだと勝手に思ってるんだけど、実際使ってみるとなんだかしっくりこない。なんかしっくりくるのを自分で、使いやすい形にしてみようということで。

Vertical InRitsu

コンセプトとしては日本語特化ということ。やっぱりアルファベットと日本語ではいろいろ違う。InRitsuというは韻律です。で、やりたいのは一定比率に基づいた段階的な文字サイズによるジャンプ率の実現と、いい感じに文字間を調節してくれる仕組み。

勝手にCompassとBourbonを2大便利CSSツールだと思ってるけど、Bourbonにはmodular scaleがある、CompassにはVertical Rhythmがある。でも片方づつしか持ってない状態なのがちょっと残念。

Vertical Rhythmの概念は日本語でも役に立つものだと思っていて、詳細はググればいろいろわかると思うけど、とりあえずLIGさんの記事見ればなんとなくわかるかな。要は、ベースユニットの倍数で文字間とを一定に処理していくと、規則性が生まれて読み易くなるよ、っていうセオリー。

このVertical RhythmをWebにまんま採用するのはじつは少し無理があって、大きい見出し文字などで複数行に渡ったときに行間が空きすぎて逆に読みにくくなる現象がおこる。Webの場合そこに入る文字数が可変だったり表示サイズが可変であるので、複数行にならない想定にするのは無理がある。

大きい文字を一定比率で扱って、かつ、行間もそれなりにしたい。そうだ比率は白銀比（大和比）がいいな。ジャンプ率も大きくなりすぎちゃうから段階を細かくしよう、そんなこんなをよしなに調整してくれるのが、Vertical InRitsu。

Power Function（塁乗）

SASSには累乗計算が用意されてないので、自分で設定しなきゃいけないらしい。CSS Trickの詳細記事を見てほしいんだけど、ざっくり説明すると、まず単純な累乗関数を設定して、これだとマイナスの累乗に対応できいないからこう、でもまだ整数の累乗しか扱かえないから、少数も扱えるようにするにはBourbonのmodular scaleが完璧だ、という答え。

ちなみに使い方はpow(ベースの数値,累乗数)と設定。

Vertical InRitsuの仕組み

コード

vertical-inritsu.sass

  =vertical-inritsu($in-scale: 0, $with-margin-top: 1, $with-margin-bottom: 1, $with-padding-top: 0, $with-padding-bottom: 0)
    $base-font-size: 1rem !default
    $base-ratio: 1.414 !default
    $in-fz: $base-font-size * pow($base-ratio, ($in-scale / 4))
    $in-base-unit: ($base-font-size * pow($base-ratio, 2)/ 4)
    $in-lh: $in-base-unit
    @while ($in-lh - $in-fz) < $in-base-unit
      $in-lh: $in-lh + $in-base-unit
    font-size: $in-fz
    line-height: $in-lh
    margin-top: ($in-base-unit * 4) * $with-margin-top
    margin-bottom: ($in-base-unit * 4) * $with-margin-bottom
    padding-top: ($in-base-unit * 4) * $with-padding-top
    padding-bottom: ($in-base-unit * 4) * $with-padding-bottom

使用

先に紹介した、bourbon式のpow関数を読みこませておくようにして（vertical-inritsuより前に読むように書けばOK）使うときは、+vertical-inritsu(指数, 上マージン, 下マージン, 上パディング, 下パディング)(SCSS記法なら@include）で設定する。デフォルト値も設定してあるので、全部引数は用意しなくても大丈夫。

指数は、大きくなりすぎないように4分の1づつ累乗してるから基本的には整数で指定してあげる感じ。上記のpow関数を使った累乗だからマイナスや少数でも可。つまりに0で等倍、1以上でその数だけ段階的に大きくなるという使い方。デフォルトでは0（0でもline-heightは算出されます）

マージンとパディング設定は指定する場合0~1の範囲で基本で設定します。1でベースのline-hightと同じだけの高さの空白を作り出します。デフォルトは上下マージンが1で、パディングは0。これは倍数なのでもちろん少数でも可。0.5づつとったりなんてのも良いと思う。

以上をふまえて基本は+vertical-inritsu(1)とか整数を設定してあげればいいと思う。0にすると基準なのでベースとなるところに+vertical-inritsu(0)とかもいいと思います。

解説

$base-font-sizeはよく使われる設定で、それを取り入れてます。設定されてなければデフォルト値として1remを取ります。余談だけど、僕は18px前後の表示が文字大きめで好き。

$base-ratioは大和比の近似値であるデフォルト値として1.414を定数的に設定してる。当然ほかの比率や変数的扱いも考えたけど、まずはシンプルなほうがいいかと思って、大和比に限定。しかも比率を変えると見え方も変わるから行間とかにも調整が必要だし。

$in-fzで基準のフォントサイズにvertical-inritsuの第一引数（スケール指数）の4分の1だけ累乗します。4分の1じゃなくてそのままだとbourbonのmodular-scaleと同じだと思うんだけど、それだと大きくなりすぎちゃったりするし、引数は整数で設定してやるほうが理解しやすいと思ったので。

$in-base-unitは一般基準のベースフォントサイズの16pxぐらいの時に、大和比を2乗してやってかけるとだいたい良い感じのline-heightになる（約2em）、それだと細かいことができないのでそれを4分の1にして1つ分のベースユニット値を算出。4分の1にしたのは日本は伝統的に四拍子が基本らしいから。INRITSU(韻律）！

$in-lhとか最初に上で算出したベースユニットを入れて、あとはwhileでフォントサイズ（in-fz）との差大きくなるまで増やして、最終的なline-heightを算出。実は当初このロジックじゃなかったんだけど、line-heightとfont-sizeが近い値になると複数行になったときに文字間がなさすぎてキツキツになり、逆にほぼ倍とかだと空きすぎちゃう。なので最低でフォントサイズの4分の1、最高で半分だけ大きくなるように調節してます。Vertical Rhythm的には整数比じゃなくてもOKっぽいので、4分の1ならなんとか気持ち良さが残る範囲かな。と。

($in-base-unit * 4) * $with-marginとかのところでは引数でのマージンやらパディングやらの設定。余白は指数が0の時の1行分と等しくなるので、デフォルトで1つ分になるようにここで$in-base-unitを1度4倍にして戻してあげてて、それに引数で持ってきた係数でかけてあげる感じ。基本的には係数は真偽値的な0or1で良いようにしてる。実は当初true,falseの真偽値にしてたけど、細かい調整が効いて汎用性が上がるようにした。

最後に

CSS Trickで紹介されているpow関数はSCSS、僕の作ったVertical InRitsuはSASS記法で書かれてるので注意。どっちかをどっちかにコンバートして使ってください。僕はCSSからSCSSを経てSASS書いてるクチだけど、SASSのほうがincludeが楽！　HTMLもslimとかで書いてるとインデントで書くやり方に慣れるし。でもゆくゆくはPug+Stylusがいいなーと思ってます。

gistにも上げておいたのでそちらのほうがよければそちらで。

僕なんかが、と思うことはやめて何も怖くなかったあの頃のようにこれからもなんかあったらこういうのも書いていきます。