これはブログです。

3DCGとかWebとかカメラとか

2017/02/20

CSSで組版してみた

絶賛、技術書典2に向けて作業を進めていますが、原稿自体は全くです。といいますのも、もちろんコイルを作っていたというのもあるのですが、1月中は薄い本を書くためのシステム、CSSで組版をしていました。

組版といっても用紙サイズを指定して、上下左右に空白スペースを、上下に任意にヘッダーとフッターつけられる、ようにしたフレームワークみたいものです。

なんでTeXやWordを使わないんだと言われましたが、端的にいえばHTML+CSSの方が使い慣れているから、です。

 

コード自体は使ってみたかったのでSassで書きました。入れ子とミックスインが便利です。ただ下記のコードだとミックスインは無意味かも知れませんね…。(各ミックスインはそれぞれ.bk-***でしか使ってないから)

element:nth-of-type(n)はn番目のelementで{}内のスタイルを適用するよっていう疑似クラスで、例えばテーブルなんかで奇数偶数で行の色を変えたい場合に使ったりします。下記のコードでは左右のページで綴じ代分のスペースと取るために利用しています。

また、ヘッダーとアーティクル、フッターにはflexboxを使っています。「ヘッダーとフッターを必ず使う」前提だとアーティクルの高さは「用紙サイズ-ヘッダーのサイズ-フッターのサイズ」でSassの算術演算で書けますが、「使うか曖昧」な場合だとアーティクルの高さを動的にしないといけません。そのため、アーティクルのclassにflex: 1を入れています。(本来だとflex-growプロパティ?)昔書いた“footer”を一番下に持ってくるのflexbox版でしょうか。

 

 

HTMLのコードは下記のようになります。用紙サイズ用のclassの中にヘッダー、アーティクル、フッターのclassを入れるだけです。PDFにするにはブラウザの印刷から仮想プリンタを選択してください。PDFへの書き出し例を載せておきます。