絶賛、技術書典2に向けて作業を進めていますが、原稿自体は全くです。といいますのも、もちろんコイルを作っていたというのもあるのですが、１月中は薄い本を書くためのシステム、CSSで組版をしていました。
組版といっても用紙サイズを指定して、上下左右に空白スペースを、上下に任意にヘッダーとフッターつけられる、ようにしたフレームワークみたいものです。
なんでTeXやWordを使わないんだと言われましたが、端的にいえばHTML+CSSの方が使い慣れているから、です。
コード自体は使ってみたかったのでSassで書きました。入れ子とミックスインが便利です。ただ下記のコードだとミックスインは無意味かも知れませんね…。（各ミックスインはそれぞれ.bk-***でしか使ってないから）
element:nth-of-type(n)はn番目のelementで{}内のスタイルを適用するよっていう疑似クラスで、例えばテーブルなんかで奇数偶数で行の色を変えたい場合に使ったりします。下記のコードでは左右のページで綴じ代分のスペースと取るために利用しています。
また、ヘッダーとアーティクル、フッターにはflexboxを使っています。「ヘッダーとフッターを必ず使う」前提だとアーティクルの高さは「用紙サイズ－ヘッダーのサイズ－フッターのサイズ」でSassの算術演算で書けますが、「使うか曖昧」な場合だとアーティクルの高さを動的にしないといけません。そのため、アーティクルのclassにflex: 1を入れています。（本来だとflex-growプロパティ？）昔書いた“footer”を一番下に持ってくるのflexbox版でしょうか。
// variable **********************************************
$header-height:10mm;
$footer-height:10mm;
$top-padding:10mm;
$bottom-padding:10mm;
$bind-padding:30mm;
$side-padding:10mm;
// mixin *************************************************
@mixin header {
display: table;
width: inherit;
height: $header-height;
}
@mixin footer {
display: table;
width: inherit;
height: $footer-height;
}
@mixin article{
flex: 1;
width: inherit;
}
/* A4 ==================================================== */
.a4-size:nth-of-type(2n+1){
display: flex;
flex-direction: column;
width: 210mm - $bind-padding - $side-padding;
height: 296mm - $top-padding - $bottom-padding;
padding: $top-padding $bind-padding $bottom-padding $side-padding;
}
.a4-size:nth-of-type(2n){
display: flex;
flex-direction: column;
width: 210mm - $bind-padding - $side-padding;
height: 296mm - $top-padding - $bottom-padding;
padding: $top-padding $side-padding $bottom-padding $bind-padding;
}
/* ======================================================= */
/* A5 ==================================================== */
.a5-size:nth-of-type(2n+1){
display: flex;
flex-direction: column;
width: 148mm - $bind-padding - $side-padding;
height: 209mm - $top-padding - $bottom-padding;
padding: $top-padding $bind-padding $bottom-padding $side-padding;
}
.a5-size:nth-of-type(2n){
display: flex;
flex-direction: column;
width: 148mm - $bind-padding - $side-padding;
height: 209mm - $top-padding - $bottom-padding;
padding: $top-padding $side-padding $bottom-padding $bind-padding;
}
/* ======================================================= */
/* B5 ==================================================== */
.b5-size:nth-of-type(2n+1){
display: flex;
flex-direction: column;
width: 182mm - $bind-padding - $side-padding;
height: 256mm - $top-padding - $bottom-padding;
padding: $top-padding $bind-padding $bottom-padding $side-padding;
}
.b5-size:nth-of-type(2n){
display: flex;
flex-direction: column;
width: 182mm - $bind-padding - $side-padding;
height: 256mm - $top-padding - $bottom-padding;
padding: $top-padding $side-padding $bottom-padding $bind-padding;
}
/* ======================================================= */
.bk-header{
@include header;
p{
display: table-cell;
vertical-align: middle;
}
}
.bk-footer{
@include footer;
p{
display: table-cell;
vertical-align: middle;
}
}
.bk-article{
@include article;
}
/* ======================================================= */
HTMLのコードは下記のようになります。用紙サイズ用のclassの中にヘッダー、アーティクル、フッターのclassを入れるだけです。PDFにするにはブラウザの印刷から仮想プリンタを選択してください。PDFへの書き出し例を載せておきます。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="a5-size">
<header class="bk-header">
<!-- ヘッダー部 -->
</header>
<article class="bk-article">
<!-- 本文 -->
</article>
<footer class="bk-footer">
<!-- フッター部 -->
</footer>
</div>
</body>
</html>
コメントを残す