2017-04-11

SVGアイコンのサイズと位置

ヘッダーのリンクにはSVGの虫眼鏡のアイコンを流用した。vertical-alignプロパティーで文字位置と、line-heightとfont-sizeプロパティーの値を使って文字サイズと、それぞれ揃うように調節している。

$ratio-text-size-header: 0.79412;
$line-height-header: 2.125;

.global-navigation svg {
  height: (1 / $ratio-text-size-header / $line-height-header * 100%);
  vertical-align: text-bottom;
}

文字サイズはem単位で拾えるが、そのまま使うと「あれっ？」となることが多々ある。行ボックスという概念があるためだ。そのためこのように文字サイズの係数と行の高さの係数を使い、行ブロックに対して文字がどれくらいの割合になっているかを計算し、それを高さとするような実装になっている。

行の高さに対する割合でアイコンの大きさを決定すると、「揃っている」状態に近くなる。真っ当な解決法は、フォントのグリフのように仮想ボディ他を考慮した形でSVGアイコンを作成することだろう。他で使えなくなるのが難点だ。

位置揃えではmiddleにするとディセンダーの関係でずれる(ずれて見える)ブラウザーがある。歴史的に安定動作しそうなtext-bottomで揃うことを祈るのが無難という印象だが、この辺りは複雑なので、%を使ってアイコンごとに指定する方が正しいかもしれない。

SVGアイコンのサイズを、文字サイズではなく文字そのもののサイズと揃えるために、cap heightを取得できるcap単位が早く欲しい。

svg {
  height: 1cap;
  vertical-align: baseline;
  width: auto;
}

理論上はこのように書くときっちり揃うはずだ。漢字の幅(のようなもの)を取得できるic単位と共に細部のレイアウトにおいて大いに役に立つことだろう。