Markdownで書いてシュッとCSS組版環境でpdfを出力する

コロナの影響で家にいるみなさまは時間があれば薄い技術書を作ればいいじゃない
kanataほぼ4年前に追加

コロナの影響で家にいるみなさまは時間があれば薄い技術書を作ればいいじゃない!

※当情報は、 2020/4月時点の情報です。時間の経過と共に使えるなくなる部分が出てくるかもしれません。。

CSS組版とは

簡単にいうとhtmlが薄い本になります
なので、最低限HTML+CSSが理解できていれば本ができます!

まぁその…直接html書くのはそれはそれで骨が折れますけれど…

なので、楽な方法があります。軽量マークアップ言語で書いて本になればもっと楽ですよね!
そんな方法の話です

執筆環境の分類と整理

技術書同人誌勢の一定の割合の方は、Re:VIEWを使用して執筆していると思われます

① Re:VIEW形式のファイル      →     pdfファイル
                        Re:VIEWで変換

Markdownで書きたい勢は、更にこんな感じで書いていると思われます

① Markdown形式のファイル     →     Re:VIEW形式のファイル
                        md2reviewで変換

② Re:VIEW形式のファイル      →     pdfファイル
                        Re:VIEWで変換

Markdownで書きたい勢(ワイ)の中で、更にCSS組版したい場合はこんな感じです

① Markdown形式のファイル     →     Re:VIEW形式のファイル
                        md2reviewで変換

② Re:VIEW形式のファイル      →     htmlファイル
                        Re:VIEWで変換

③ htmlファイル               →     pdfファイル
               VivliostyleでCSS組版(ブラウザでpdf印刷)

④ pdfファイル                →     pdfファイル
         Microsoft Print to PDFでアウトライン化

メリット

  • TEXの悪夢から(ほぼ)逃れられる
  • 絵文字が使える😭😭😭
  • CSSいじれればある程度なんでもできる

デメリット

  • 環境構築に時間がかかる(まだ情報が少ないので)

Install & Setup

以下の環境を前提にしています
でもLinux環境だったら、だいたいいけるのでは

$ cat /etc/issue
Ubuntu 18.04.1 LTS \n \l
$ uname -a
Linux ubuntu 4.15.0-91-generic #92-Ubuntu SMP Fri Feb 28 11:09:48 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

使うソフトウェアは大きく以下になります

  • md2review
  • Re:VIEW
  • Vivliostyle
  • sed(GNUコマンド)
  • Chrome(ブラウザ)

この内、Re:VIEWとVivliostyleがdockerコンテナになっているので、あまり意識しなくても大丈夫です

md2review

md2reviewは、MarkdownからRe:VIEWへ変換してくれるありがたいコマンドです

インストールは以下

# gem install md2review

ruby製のコマンドなので、rubyとbundleが要ります
入ってなかったらググって入れて

@at_grandpaさんのRe:VIEW+CSS組版 執筆環境

@at_grandpaさんの神環境により、一瞬でRe:VIEWとVivliostyleの環境が構築できます最高

Re:VIEW+CSS組版 執筆環境構築

2020.4月時点では、v0.2.0をダウンロードして…とありますが、最新版でも大丈夫でしょう

$ mkdir [執筆環境を入れるディレクトリ]
$ cd [執筆環境を入れるディレクトリ]
$ git clone https://github.com/at-grandpa/review-and-css-typesetting
$ cd review-and-css-typesetting*
$ make up docker/setup_npm docker/setup_bundler docker/setup_plantuml_jar # docker環境をセットアップする

dockerコンテナなので、dockerが要ります
入ってなかったらググって入れて

Macが前提になっている環境なので、LinuxでエラーがでないようにちょこちょこっとMakefileを修正します

$ vi Makefile

- open $(HTML_URL)
+ echo $(HTML_URL) # openコマンド入ってないので

Vivliostyle CLI

2020.4に公開されたばかりのCUI版Vivliostyleです
これのすごいところは…

  • ブラウザで表示しなくてもpdf出力できる(内臓のHeadless Chromeで)
  • 文字のアウトライン化をしてくれるオプションがある(CSS組版勢がよくハマるところ)

ただ、まだなんか私の環境では上手く動きませんでした
今後に超期待
状況は以下を注視してもらればと

https://github.com/vivliostyle/vivliostyle-cli

Vivliostyle CLI

使い方

とりあえずサンプルでCSS組版環境を試してみたい場合は、以下でできます

$ cd [執筆環境を入れるディレクトリ]/review-and-css-typesetting*
$ make browser
make docker/html
・
・
中略
・
・
http://0.0.0.0:8000/vivliostyle-js-2018.12.103/viewer/vivliostyle-viewer.html#x=http://0.0.0.0:8989/book.html

最後に出てきたURLをブラウザに打ち込めば見れるのですが、その前に0.0.0.0(2箇所)は自分のIPアドレスに置き換える必要があります
自分のIPアドレスは、以下で確認できます

$ hostname -I
$ ip a s|grep inet # ifconfigは無くなったんや…

見れましたか?これをブラウザの印刷機能で印刷すれば、とりあえずpdfができますね

さて、ここまで動いたら順を追ってやってみます

Markdownを書く

Markdownを書いたら以下でRe:VIEW形式に変換します

$ md2review hoge.md > chapter1.re

Re:VIEW形式のファイルをCSS組版環境に配置する

動いているサンプル環境に対して、少しずつファイルを入れ替えていくと動作確認しながら進めやすいと思います

$ cd [執筆環境を入れるディレクトリ]/review-and-css-typesetting*/articles
$ mv -i chapter1.re chapter1.re.bak # 削除してもいいですけどね
$ mv -i [さっき変換したRe:VIEW形式のファイル] chapter1.re
$ cd ..
$ make browser

で、また同じようにURLをブラウザに打ち込んで反映されているか確認してみてください
ディレクトリarticle配下は、Re:VIEWの環境なので章の追加やタイトルの変更方法は、Re:VIEWの仕様に準じます

設定ファイル的なものは、以下の2つだけ意識しておけば事足りるはずです

  • config.yml
  • catalog.yml

Markdownで無理やりRe:VIEWの機能に対応させる

これはもぅどうしようもないのですが、組版における表現の機能はMarkdownと比較するとRe:VIEWに軍配があがります
ここでは、特定の表現を主にMarkdownでなんとかするための方法を説明します

Markdown → Re:VIEW に変換するタイミングでなんとかする

脚注

これかなり困ってたんですが以下の書き方をすれば、md2reviewでいい感じに変換してくれました

これ[^脚注1]はいったい…

 [^脚注1]: これとはアレである

ただ、この脚注の説明が全部、章末に集まっちゃいました
Re:VIEWは、pdfに変換する際はいい感じにしれくれるんですが、htmlだとそうはいかないみたいです

なので、以下のようなシェル芸を作りました
何回も実行するのでシェルスクリプトにしておくと良いと思います
Re:VIEWに変換後のファイルに対して脚注を任意の行に移動できるようにしました

$ FILE="preface.re";FOOTNO="1";INSERTNO="19";FOOTNOTE=$(grep "^//footnote\[$FOOTNO\]" $FILE);sed -i -e "/^\/\/footnote\[$FOOTNO\].*/d" $FILE;sed -i -e "${INSERTNO}i ${FOOTNOTE}" $FILE

※冒頭の3つの変数を適宜書き換える

FILE : 対象のファイル名
FOOTNO : 上から数えて何番目の脚注か
INSERTNO : 移動先の行番号

画像の縮尺

Markdownは画像の縮尺の書き方に方言があるので、md2reviewで変換できません
これは以下のように工夫しました
まず、markdownでこう書きます

![テスト画像 scale=0.5](image.jpg)

md2reviewで変換するとこうなります

//image[image][テスト画像 scale=0.5]{
//}

これを以下のように変換すればいいですね

//image[image][テスト画像][scale=0.5]{
//}

これはRe:VIEWに変換する際に合わせて置換すればいけます

$ md2review hoge.md|sed 's/ scale=/][scale=/g' > chapter1.re

表のサイズ

Markdownで書いた表の文字が枠を突き抜けることがあります

参考 【Re:VIEW】表のセル内でURLを折り返しする方法

これは、Re:VIEW上では表の列のサイズを指定することで解決できます
以下を表の冒頭に記載します

//tsize[60,60]

よってMarkdownにもあらかじめtsizeを書いておけばよさそうですが、表とくっつけて書くと表として認識されなくなります
なので、一行あけて書きましょう

# NG

//tsize[60,60]
| hoge | fuga |
|------|------|
| 1    | 2    |

# OK

//tsize[60,60]

| hoge | fuga |
|------|------|
| 1    | 2    |

最終的にRe:VIEWに変換する際に開けた一行をくっつければいけます

$ md2review hoge.md|sed '/tsize.*/N;s/\n/ /' > chapter1.re

: さっきの画像の縮尺の対応と合わせるとこうなります
$ md2review hoge.md|sed 's/ scale=/][scale=/g'|sed '/tsize.*/N;s/\n/ /' > chapter1.re

表の名前

Markdownでは対応する機能がありません
md2reviewで変換すると表は順番に番号がつくのでそれを目印にして表名を挿入していきます
何回も実行するのでシェルスクリプトにしておくと良いでしょう
Re:VIEWに変換後のファイルに対して表名を設定できるようにしました

$ FILE="chapter1.re";TBLNO="1"; TITLE="ほげほげの表";sed -i -e "s/\/\/table\[tbl${TBLNO}\]\[/\/\/table\[tbl${TBLNO}\]\[${TITLE}/g" $FILE
$ FILE="chapter1.re";TBLNO="2"; TITLE="ふがふがの表";sed -i -e "s/\/\/table\[tbl${TBLNO}\]\[/\/\/table\[tbl${TBLNO}\]\[${TITLE}/g" $FILE
$ FILE="chapter1.re";TBLNO="3"; TITLE="こんな感じ";sed -i -e "s/\/\/table\[tbl${TBLNO}\]\[/\/\/table\[tbl${TBLNO}\]\[${TITLE}/g" $FILE

※冒頭の3つの変数を適宜書き換える

FILE : 対象のファイル名
TBLNO : 上から数えて何番目の表か
TITLE : 表の名前

Re:VIEW → html に変換するタイミングでやりたいことをなんとかする

改ページ

markdownは ---- で改ページするよう書く

前のページ

----

次のページ

style.cssを編集

$ cd [執筆環境を入れるディレクトリ]/review-and-css-typesetting*/articles
$ vi style.css # ファイル末尾に以下を追加

+
+hr.page-wrap {
+  break-before: page;
+  visibility: hidden;
+  margin: 0px;
+  padding: 0px;
+  height: 1px;
+}

make browserで作成された book.html を編集する

$ sed -i -e 's|<hr>|<hr class="page-wrap" />|g' book.html 

コードブロックの等幅フォント

$ cd [執筆環境を入れるディレクトリ]/review-and-css-typesetting*/articles
$ vi style.css # 329行目あたり(pre.list,pre.emlistの要素)を以下の通り編集

-   font-family: "Ricty Diminished";
+   font-family: Consolas, 'Courier New', Courier, Monaco, monospace;

改行

markdownでは改行したい所に<BR>を書く

ここで改行<BR><BR>したい

make browserで作成された book.html を編集する

$ sed -i -e 's/&lt;BR&gt;/<BR>/g' book.html 

表に干渉する文字 |

表の中に|があると困ります
表が崩れちゃうの…
なので、仮に%7Cと書いておきます

| hoge | fuga |
|------|------|
| %7c  | 2    |

make browserで作成された book.html を編集する

$ sed -i -e 's/%7C/|/g' book.html 

html → pdf に変換するタイミングでなんとかする

埋め込みフォント(Type3フォント)問題

これはけっこう面倒くさい問題で、フォントが埋め込まれてないと印刷会社さんからダメって言われることがあるようです
具体的には、pdfのプロパティを参照した際にType3っていうフォントがあるとマズいです

これを解決するには以下のどちらかの対応になるようですが、フォント埋め込むのがけっこう難易度が高くて死にます

  • フォントを埋め込む
  • アウトライン化(≒画像化)

で、アウトライン化してくれるのが前述のvivliostyle-cliなんですね!
これがなくても、いちおうなんとかできます
いったんブラウザ機能で印刷したpdfを更にWindows10の Microsoft Print to PDF で再度PDF化すればいけそうです

ファイルサイズめっちゃでかくなるけど…

以上、楽しい組版ライフを!


コメント

クリップボードから画像を追加 (サイズの上限: 100 MB)