これはブログです。

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

この記事は更新されてから1年以上経過しています。

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版でしょうか。

 

// 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>

 

 

カテゴリ: プログラミング / タグ:

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。