スライドを筆頭にしばしば2カラム以上のレイアウトなどを利用したくなりますね。 R Markdownの場合、revealjsパッケージでマルチカラムを利用する方法が、私を含め複数の人によって提案されてきました。
- Rmd + Revealjs で簡単に印刷もできる2カラムレイアウトを実現する (inline-block) (Atusy’s blog)
- R Markdownによるスライド生成 SappoRo.R #6 (@kazutan氏)
- [Reveal.js] CSS Grid LayoutでMarkdownにもレイアウトを (@vimyum氏)
私は印刷できて利用も簡単な自説のinline-block
を推しています。と、そんなところにPandocのマニュアル上でマルチカラムレイアウトを利用する方法の記載を見つけました。
:::::::::::::: {.columns} ::: {.column width="40%"} contents... ::: ::: {.column width="60%"} contents... ::: ::::::::::::::
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!!