As is likely to be obvious to readers of this web site, also called a "blog", I am a big fan of GNU/Emacs and, particularly, org-mode.
I use org-mode for all my writings, and all my information analyses. The posts and pages of this web site are all written with org-mode. My CV is prepared in org-mode before being converted to PDF.
For a long time, all the non-work presentations I prepare are put together in org-mode, too. Until recently, I have used a feature of org-mode's export funtion to Latex called "beamer" to convert an org-mode file into a PDF presentation. It worked, but depended on a lot of specific latex-related software to be available to me, so it can be hard to set up to use on a new machine.
I had heard of org-reveal some time ago, and tried briefly to figure out how it worked, leaving it aside until about 2 weeks ago, when I tried again. Org-reveal converts an org-mode file (or region) into an HTML file that incorporates reveal.js to make it a presentation. I recommend downloading the demos from both those sites to get a good feeling for what they are about.
By using org-reveal, I need only load the ox-reveal.el emacs-lisp
file into my GNU/Emacs session, and I can generate a
reveal.js-using HTML file to be my presentation, which I can then
open with a standards-compliant web-browser. I don't need
additional software to generate the file. The reveal.js code isn't
required to generate the HTML file (unless you're using the
single-file option of org-reveal), it just needs te be available
to the browser.
Seriously, go check it out.
It comes with a slight problem, though. Grid layouts aren't immediately obvious, and the developer of org-reveal suggests using tables, which isn't ideal for my requirements.
So I've put together an approach that is a little more to my liking.
I created a CSS file (see below) that makes use of "flexbox" for laying out a grid. I am no CSS expert, so I don't know if flexbox is the best approach – please let me know if there is a better one.
In this CSS file, I define two top-level classes:
gridded_frame_with_columns- for a slide that is to be composed of columns of information.
gridded_frame_with_rows- for a slide that is to be composed of rows of information.
So, if you wanted to create a slide for org-reveal that will be
composed of columns of information, add a #+REVEAL_EXTRA_CSS
setting to your org-mode file pointing to where you have these
classes defined, and then use the following in your slide:
#+REVEAL_HTML: <div class="gridded_frame_with_columns> ... #+REVEAL_HTML: </div>
If, however, you wanted your slide to be composed of rows of
information, you would use the class gridded_frame_with_rows
instead.
I then defined the following "inner" classes:
one_of_2_columns- You would use this to defined the column for information in a two-column slide.
one_of_3_columns- This is for each of the columns in a 3-column slide.
one_of_2_rows- This is for a row in a two-row slide. I didn't define a row for a 3-row slide, because I don't see myself using such a thing.
column_with_rows- This is for a column that I might want to divide further into rows.
row_with_columns- This is for a row that I might want to divide further into columns; two columns or three.
For these last two classes, I would then use 2 or more of the first three to manage the information within them.
Here are some examples of gridded slides:
A slide with two columns of information:
#+REVEAL_HTML: <div class="gridded_frame_with_columns"> #+REVEAL_HTML: <div class="one_of_2_columns"> The first column's information goes here. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_columns"> The first column's information goes here. #+REVEAL_HTML: </div> #+REVEAL_HTML: </div>
A slide with two rows of information:
#+REVEAL_HTML: <div class="gridded_frame_with_rows"> #+REVEAL_HTML: <div class="one_of_2_rows"> The first row's information goes here. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_rows"> The second row's information goes here. #+REVEAL_HTML: </div> #+REVEAL_HTML: </div>
A slide with three columns of information:
#+REVEAL_HTML: <div class="gridded_frame_with_columns"> #+REVEAL_HTML: <div class="one_of_3_columns"> The first column's information goes here. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_3_columns"> The second column's information goes here. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_3_columns"> The third column's information goes here. #+REVEAL_HTML: </div> #+REVEAL_HTML: </div>
A slide with two columns of information, the first of which has two rows:
#+REVEAL_HTML: <div class="gridded_frame_with_columns"> #+REVEAL_HTML: <div class="one_of_2_columns column_with_rows"> #+REVEAL_HTML: <div class="one_of_2_rows"> The information for the first row in the first column goes here #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_rows"> The information for the second row in the first column goes here #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_columns"> The information for the second column goes here #+REVEAL_HTML: </div> #+REVEAL_HTML: </div>
The full set of possible arrangements is as follows:
- 2 columns
- 3 columns
- 2 rows
- 2 or 3 columns, where one, two or all three of them are divided into 2 rows.
- 2 rows, either one of which, or both, are divided into 2 or 3 columns.
Code samples
Here are samples that you can use, which you should expand or modify for your own tastes.
The CSS file (called, for example,
grids.css):.gridded_frame_with_columns { display: flex; flex-flow: row; } .gridded_frame_with_rows { display: flex; flex-flow: column; } .one_of_2_columns { width: 50%; } .one_of_3_columns { width: 33%; } .column_with_rows { display: flex; flex-grow: auto; flex-flow: column; } .row_with_columns { display: flex; flex-flow: row; } .one_of_2_rows { height: 50%; }
An example org-file that uses org-reveal and these CSS settings
#+TITLE: Test for gridding # <Where the reveal.js project # (https://github.com/hakimel/reveal.js.git) is cloned/copied to> #+REVEAL_ROOT: reveal.js #+REVEAL_INIT_OPTIONS: transition:'none', margin: 0.1 #+REVEAL_HLEVEL: 1 #+REVEAL_EXTRA_CSS: grids.css * Columns ** Title and 2 content columns #+REVEAL_HTML: <div class="gridded_frame_with_columns"> #+REVEAL_HTML: <div class="one_of_2_columns"> A left list - [ ] First - [X] Second - [ ] Third #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_columns"> file:./tallPicture.png #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> ** Title and 3 content columns #+REVEAL_HTML: <div class="gridded_frame_with_columns"> #+REVEAL_HTML: <div class="one_of_3_columns"> First names - Sextus - Gaius - Gnaeus - Lucius - Quintus - Publius - Appius - Mamercus #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_3_columns"> Family Names - Patrician + Julius + Claudius + Cornelius - Plebian + Marius + Tullius #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_3_columns"> Nicknames - Caesar -- "Hairy" - Calvus -- "Bald" - Pictor -- "Painter" - Africanus -- "of Africa" - Nero -- "Strong" - Paetus -- "Squinty" - Paullus -- "Small" - Scaeva -- "left-handed" - Caecus -- "Blind" #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> ** Title and 2 content columns, left column being 2 blocks #+REVEAL_HTML: <div class="gridded_frame_with_columns"> #+REVEAL_HTML: <div class="one_of_2_columns column_with_rows"> #+REVEAL_HTML: <div class="one_of_2_rows"> Information #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_rows"> Information #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_columns"> file:./tallPicture.png #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> * Rows ** Title and 2 content rows #+REVEAL_HTML: <div class="gridded_frame_with_rows"> #+REVEAL_HTML: <div class="one_of_2_rows"> Information #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_rows"> file:widePicture.png #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> ** Title and 2 content rows, lower row being 2 blocks #+REVEAL_HTML: <div class="gridded_frame_with_rows"> #+REVEAL_HTML: <div class="one_of_2_rows"> file:widePicture.png #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="row_with_columns"> #+REVEAL_HTML: <div class="one_of_2_columns"> A left list - [ ] First - [X] Second - [ ] Third #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_columns"> A right list - [ ] First - [X] Second - [ ] Third #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> * Grids ** Title and 2x2 content blocks - 2 outer rows #+REVEAL_HTML: <div class="gridded_frame_with_rows"> #+REVEAL_HTML: <div class="row_with_columns"> #+REVEAL_HTML: <div class="one_of_2_columns"> This is the first column in the first row. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_columns"> This is the second column in the first row. #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="row_with_columns"> #+REVEAL_HTML: <div class="one_of_2_columns"> This is the first column in the second row. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_2_columns"> This is the second column in the second row. #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> ** Title and 2 rows of 3 blocks #+REVEAL_HTML: <div class="gridded_frame_with_rows"> #+REVEAL_HTML: <div class="row_with_columns"> #+REVEAL_HTML: <div class="one_of_3_columns"> This is the first column in the first row. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_3_columns"> This is the second column in the first row. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_3_columns"> This is the third column in the first row. #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="row_with_columns"> #+REVEAL_HTML: <div class="one_of_3_columns"> This is the first column in the second row. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_3_columns"> This is the second column in the second row. #+REVEAL_HTML: </div> #+REVEAL_HTML: <div class="one_of_3_columns"> This is the third column in the second row. #+REVEAL_HTML: </div> #+REVEAL_HTML: </div> #+REVEAL_HTML: </div>
A working example:
You can comment on this post below, or on the matrix room here. If you want, you can "Log in" using your [matrix] ID.
All comments are subject to this site's comment policy.