Markdownで書いてシュッとCSS組版環境でpdfを出力する
コロナの影響で家にいるみなさまは時間があれば薄い技術書を作ればいいじゃない
コロナの影響で家にいるみなさまは時間があれば薄い技術書を作ればいいじゃない!
※当情報は、 2020/4月時点の情報です。時間の経過と共に使えるなくなる部分が出てくるかもしれません。。
- CSS組版とは
- Install & Setup
- 使い方
- Markdownで無理やりRe:VIEWの機能に対応させる
- Re:VIEW → html に変換するタイミングでやりたいことをなんとかする
- html → pdf に変換するタイミングでなんとかする
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の環境が構築できます最高
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
使い方¶
とりあえずサンプルで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でこう書きます
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/<BR>/<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化すればいけそうです
ファイルサイズめっちゃでかくなるけど…
以上、楽しい組版ライフを!
コメント