nehan.jsでSemantic UIのようなヘッダースタイルを設定する

人気のCSSフレームワーク「Semantic-UI」ですが、ヘッダーの設定はこんな感じになっています。

.ui.header{
  margin: calc(2rem -  0.14285em) 0em 1rem;
}

各ヘッダー内での文字サイズ(em)と、bodyの文字サイズ(rem)を使って計算しています。

同じことをnehan.jsでやる場合は、こんな感じで設定します。

Nehan.setStyle(".ui.header", {
  margin:function(ctx){
    var em = ctx.style.getFontSize();
    var rem = ctx.style.getRootFont().size;
    return {
      before:Math.floor(2 * rem - 0.14285 * em),
      after:rem
    };
  }
});

Nehan Readerでも上記の設定でヘッダーをスタイリングしていますが、見出しの余白のバランスが良くなるだけで、けっこう全体の印象が変わるから不思議なものです。