PandocやR Markdownでマルチカラムレイアウト

カテゴリ: pandoc

スライドを筆頭にしばしば2カラム以上のレイアウトなどを利用したくなりますね。 R Markdownの場合、revealjsパッケージでマルチカラムを利用する方法が、私を含め複数の人によって提案されてきました。

私は印刷できて利用も簡単な自説のinline-blockを推しています。と、そんなところにPandocのマニュアル上でマルチカラムレイアウトを利用する方法の記載を見つけました。

:::::::::::::: {.columns}
::: {.column width="40%"}
contents...
:::
::: {.column width="60%"}
contents...
:::
::::::::::::::

https://pandoc.org/MANUAL.html#columns

HTML(スライドに限らず)やbeamer、ひょっとしたらpptxあたりでも利用できるようです。じゃあHTMLでの実装はどうなっているのか除いてみましょう。

div.column{display: inline-block; vertical-align: top; width: 50%;}

https://github.com/jgm/pandoc-templates/blob/490c564f068b65b79bf94119259cbd78bc43f961/styles.html#L4

inline-blockが使われていますね!ソースを見ると、下線やハンギングインデントの書式も定義されていて、ほっほうってなりますね。あまり使いませんが。

Pandoc内部で工夫されているのか{.column width="40%"}とした時に、widthがCSS化するのも嬉しいところ。オレオレテクニックだと{.column styles='width: 40%'}とか真面目にCSSの書式に則るため読みにくかった。

というわけで今後はPandocの流儀に従いたいですね。このスタイルが利用可能な書式は、GitHub上でstyles.htmlを含むファイルを検索すればOK(https://github.com/jgm/pandoc-templates/search?q=styles.html&unscoped_q=styles.html)。

  • slidy
  • html4
  • html5
  • s5
  • slideous
  • dzslides
  • revealjs

R Markdownには上述のスタイルが割り当てられていないので、ひとまず上述のCSSを外部ファイルに書くか、チャンクとして記述しましょう。 revealjsには既に変更を提案していて(PR #82)、rmarkdownにも近々提案予定です。受け入れられればもっと手軽に利用できる未来が来るぞ!

```{css, echo=FALSE}
div.column{display: inline-block; vertical-align: top; width: 50%;}
```

Enjoy!!