ひでみのアイデア帳

くだらないことなんだけど、忘れないために・・・

CSS組版を考える

C94(夏コミ)に向けて執筆活動中です。

製本は表紙(PSD)+本文(PDF)で印刷所に依頼するのですが毎回、作成方法を変更しています。

表紙を作成するのはGimpを使用して、PSD出力するようにしています。

これは毎回、同じです。

問題は本文です。

今までに使用したツールは次の2つです。

  • Scribus
  • LibreOffce

どちらもPDF化するのは特に問題ありません。

どちらも製作過程の後半は本文内容というよりか、デザインを調整することに注力をおく作業が続きます。

しかし、技術書はリリースの最後の最後までデバッグを行い、本文の修正を入れたくなるのですがなかなか追従できない場合があります。

通常のドキュメントはmarkdownを使用しているのでmarkdownから変換できると楽なので今回はPandocを検討していました。

Ubuntu 16.04.4 LTSでPandoc+Latexでそこそこ良い組版のベースを作成したのですが最近、Ubuntu 18.04 LTSに移行したので再び、構築する羽目になりました。

そうすると依存関係でうまく作成することが出来なかったのです。

ここに注力を捕らわれたくないのでCSS組版を検討することにしました。

CSS組版の問題点

CSS組版はCSSでレイアウトを整えればWebブラウザで見れる範囲でPDF化すれば、それなりの本になります。

ただ、自分的には次の点に問題があります。

  • 図表番号の追従
  • ノンブル(ページ番号)の設定など

今までScribusやLibreOfficeなどのツールを使っていたのはこれらの問題を回避したいためでした。

MarkdownからHTMLへ

まずは本文はMarkdownでどんどん書いていきます。

そして、Markdownからmarkdown.jsを使用してHTML化します。

この点はすでにこのブログでも使用しているシステムなので問題ありません。

図表番号

図表番号を本文中に埋め込むことを検討しました。

HTML5からfigure、gitcaptionタグが追加され次のように書くことが出来ます。

  <figure>
  <img src="ファイル名">
  <figcaption id="figtest">説明の画像です</figcaption>
  </figure>

図表番号を手動で割り当てるのは事故が起こるのと面倒なので自動で割り付けることを検討しました。

図表番号を自動で追加するのは意外に簡単でCSSには次のように設定すると、figcaptionタグのコンテンツ前に番号を追加することが出来ます。

figcaption:before {
  counter-increment: figurenum;
  content: counter(chapternum) "-" counter(figurenum) ". ";
}

本文中に自動で追加された図表番号を参照する手段を検討しました。

JavaScriptだと次のようにすれば取れるかと思いましたがこれだとCSSのconetntの「counter(chapternum) "-" counter(figurenum) ". "」が取得できてしまい番号を取得することが出来ませんでした。

  <script>
    var element = document.getElementById('figtest');
    var property = (element.currentStyle || document.defaultView.getComputedStyle(element, '::before')).getPropertyValue('content');
    document.write(property);  // 疑似要素取得
  </script>

エレメントからなんとか取得できないか検討したところ次のJavaScriptにたどり着きました。

<script>
    var element = document.getElementById('figtest');
    var property = (element.currentStyle || document.defaultView.getComputedStyle(element, '::before')).getPropertyCSSValue('content');
    alert("property.length: "+property.length);  // 疑似要素取得

    if(property[0].primitiveType == CSSPrimitiveValue.CSS_COUNTER){
      alert("property[0].primitiveType == CSSPrimitiveValue.CSS_COUNTER");
      var pp0 = property[0].getCounterValue();
      alert(pp0.identifier);
    }else{
      alert("property[0].primitiveType != CSSPrimitiveValue.CSS_COUNTER");
    }
  </script>

残念ながらFireforではgetCounterValue()がサポートされていないようでした。

残念ながら番号だけ振るようにして諦めることにしました。

代替手段としてはfigcaptionに手動でナンバリングする方法はあります。

ヘッダ&フッタ

ヘッダとフッタも本を製作する上では重要な要素です。

左右見開きの本にするためにノンブルの位置を左右ページごとに変えたりするのですが、CSSの@pageを使用するとできそうな気配があります。

CSSの@pageの細かいところはieやEdge以外のブラウザでは対応していないことがわかりました。

開発環境がLinuxなのでできればChromeかFirefoxを使用してできないものか検討しましたがどうもなさそうなので・・・