Markdownで改ページのコントロールがしたい!
Markdown
を PDF
化して納品しようとしたら改ページがぐっちゃぐちゃなので怒られた話。
あるあ・・・すみませんでした。
Markdown でPDFの改ページ制御なんてできるの?
きっとできるさ。
変換は VSCode
のプラグインである Markdown All in One
というものを使っています。
このツールはMarkdown
→ HTML
→ PDF
の順に変換します。
HTML
の印刷スタイル設定が PDF
に効くので、CSS
でスタイルを設定すればいいと思われます。
改ページ用の CSS 属性
改ページには page-break-after
という属性があって、これを使います。
MDN: page-break-after
おや?
MDN をよく見ると、この属性は break-after
に置き換えられたとのことです。
MDN: break-after
Markdown のどの要素に使う?
本来この属性はdiv
やsection
などのブロックに対して使うのですが、Markdown
で書いているとブロックを意識することがありません。
そこで、 ---
を書いたところ、HTML
でいうhr
タグを強制下位ページ位置として利用することにしました。
Markdown にスタイルを埋め込む
Markdown
には CSS スタイルを埋め込むことができます。
HTML
と同じ様にページの先頭に記述すれば OK です。
<style>
hr {
opacity: 0;
break-after: page;
}
</style>
これだけで、 ---
が記述されていた箇所の後ろで改ページされるようになります。
opacity: 0
で不可視にしています。
同じ不可視でもdisplay: none
では改ページとして動作しません。
すでに hr は意味を持って使っているんだけど・・・
まあ、そういうこともありますよね。
そんなときは、さっきのスタイルをhr
ではなく他の要素に使えばいいんです。
Markdown
は生 HTML タグを書けるのでやりたい放題です。
<style>
.page-break {
opacity: 0;
break-after: page;
}
</style>
コンテンツ 1
<div class="page-break"></div>
コンテンツ 2
完成!
これでPDF
内の改ページをコントロールできるようになりました。
自動的に大きなブロックで制御したければdiv
タグで囲ってあげのが良いでしょうね。
なおブラウザの表示では確認できません。
ブラウザの印刷プレビューか、PDF
にエクスポートして確認してください。