Sketch の Spacing Line を CSS の line-height に変換する方法
9 years ago
Sketch の Spacing Line
と CSS の line-height
は若干扱いが異なります.
そのため, Sketch のデータを渡されてその値のとおり指定して Web ページを作ると 若干位置がズレることがあります.
zeplin なんかは, この Spacing Line
の値をそのまま鵜呑みにして CSS の line-height
として吐き出しちゃってるのでそのまま作るとぜったい同じ見た目にならないという...
この違いに困らされたフロントエンドエンジニアさん多いのではないでしょうか. そんな人のために今回は, それぞれの扱いの違いについて触れつつ, 変換する方法を紹介します.
Sketch 上での Spacing Line の扱い
行の中心から次の行の中心までの距離になります.
CSS 上での line-height の扱い
line-height の場合, 自身のフォントサイズからあぶれた分のサイズが
上下均等に割り振られます.
Spacing Line を line-height の値に変換する方法
違いを見て分かるとおり, Spacing Line からテキストの高さ分を引いた値に テキストの高さを足したものが CSS でいう line-height になります.
計算式にすると
sl = sketch 上での Spacing Line
fs = sketch 上での font size
としたとき
(sl - fs) / fs + 1
= (sl / fs) - (fs / fs) + 1
= (sl / fs) - 1 + 1
= (sl / fs)
となります.
(Spacing Line / font size) = line-height
だいぶシンプルになりましたね.
CSS で使う場合
CSS3 の calc で動的に計算すると楽です.
.text {
/* Spacing Line: 40px */
font-size: 16px;
line-height: calc(40/16);
}
LESS で使う場合
実行時のコストが気になる場合は LESS や SASS で関数化しましょう.
.sketch-line-height(@font-size, @line-height) {
line-height: (unit(@line-height)/unit(@font-size));
}
.text {
@font-size: 16px;
@line-height: 40px;
font-size: @font-size;
.sketch-line-height(@font-size, @line-height);
}
Sketch 上のテキストを再現したデモ
sketch 上で
Font size ... 16px
Spacing Line ... 40px
Font Family ... Helvetica
が指定されていた場合を再現したデモです.