読者です 読者をやめる 読者になる 読者になる

anti scroll

ブラウザと小説の新しい関係を模索する

box-sizing:margin-box

margin-boxとは

margin-boxとは、ボックスのサイズをmarginも含めて計算するボックスのことです。

つまりmarginが50pxで、widthが200pxなら、コンテントサイズは

200(width) - 50(margin-left) - 50(margin-right) = 100

になります。

ちなみにこのmargin-boxという値は、現在のbox-sizingプロパティでは、有効な値ではありません。

でもcss3 shapesという仕様のshape-outsideというプロパティでは有効な値(それどころかデフォルト値)だったりします。

理由はよくわかりません。

nehan.jsにおけるbox-sizing

ところで nehan.js においては、box-sizingmargin-boxが指定できます。

というか、margin-boxがデフォルトです。なぜか。

それは、ページ送りの組版では、外側のサイズが固定されているからです。

通常のウェブサイトなら、外側のサイズは「スクロール」という組版に逃げることで、いくらでも拡張できます。

しかしページ送りの組版においては、外側のサイズは絶対です。

つまり内側のコンテンツは、外側に固定されたサイズを、何があってもはみ出さないように配置する必要があります。

そういう「外に余剰サイズを逃すことができない」状況下で、ボーダーの外側に余白を表現したい場合はどうするのか。

答えは簡単。コンテントサイズを削るしかありません。

だからnehan.jsのbox-sizingは、基本的にmargin-boxなのです。

というか、paged mediaにおいては、そうならざるを得ないような気がします。