Skip to content
Permalink
Browse files

Implement multicolumn support for slide formats.

The structure expected is:

    <div class="columns">
      <div class="column" width="40%">
        contents...
      </div>
      <div class="column" width="60%">
        contents...
      </div>
    </div>

Support has been added for beamer and all HTML slide formats.

Closes #1710.

Note:  later we could add a more elegant way to create
this structure in Markdown than to use raw HTML div elements.
This would come for free with a "native div syntax" (#168).
Or we could devise something specific to slides
  • Loading branch information...
jgm committed Aug 15, 2017
1 parent 23d29ee commit 892a4edeb1c9b9810c8386e639d8e457bbae7e86
@@ -15,6 +15,7 @@ $endif$
<style type="text/css">
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.column{display: inline-block;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
@@ -18,6 +18,7 @@ $endif$
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
@@ -18,6 +18,7 @@ $endif$
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
@@ -21,6 +21,7 @@ $endif$
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
@@ -19,6 +19,7 @@ $endif$
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
@@ -20,6 +20,7 @@ $endif$
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
@@ -20,6 +20,7 @@ $endif$
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
@@ -640,8 +640,14 @@ blockToHtml opts (LineBlock lns) =
let lf = preEscapedString "\n"
htmlLines <- mconcat . intersperse lf <$> mapM (inlineListToHtml opts) lns
return $ H.div ! A.class_ "line-block" $ htmlLines
blockToHtml opts (Div attr@(ident, classes, kvs) bs) = do
blockToHtml opts (Div attr@(ident, classes, kvs') bs) = do
html5 <- gets stHtml5
let kvs = kvs' ++
if "column" `elem` classes
then let w = fromMaybe "48%" (lookup "width" kvs')
in [("style", "width:" ++ w ++ ";min-width:" ++ w ++
";vertical-align:top;")]
else []
let speakerNotes = "notes" `elem` classes
-- we don't want incremental output inside speaker notes, see #1394
let opts' = if speakerNotes then opts{ writerIncremental = False } else opts
@@ -452,7 +452,25 @@ blockToLaTeX (Div (identifier,classes,kvs) bs) = do
_ -> linkAnchor'
let align dir txt = inCmd "begin" dir $$ txt $$ inCmd "end" dir
lang <- toLang $ lookup "lang" kvs
let wrapDir = case lookup "dir" kvs of
let wrapColumns = if "columns" `elem` classes
then \contents ->
inCmd "begin" "columns" <> brackets "T"
$$ contents
$$ inCmd "end" "columns"
else id
wrapColumn = if "column" `elem` classes
then \contents ->
let fromPct xs =
case reverse xs of
'%':ds -> '0':'.': reverse ds
_ -> xs
w = maybe "0.48" fromPct (lookup "width" kvs)
in inCmd "begin" "column" <>
braces (text w <> "\\textwidth")
$$ contents
$$ inCmd "end" "column"
else id
wrapDir = case lookup "dir" kvs of
Just "rtl" -> align "RTL"
Just "ltr" -> align "LTR"
_ -> id
@@ -468,7 +486,8 @@ blockToLaTeX (Div (identifier,classes,kvs) bs) = do
wrapNotes txt = if beamer && "notes" `elem` classes
then "\\note" <> braces txt -- speaker notes
else linkAnchor $$ txt
fmap (wrapDir . wrapLang . wrapNotes) $ blockListToLaTeX bs
fmap (wrapColumns . wrapColumn . wrapDir . wrapLang . wrapNotes)
$ blockListToLaTeX bs
blockToLaTeX (Plain lst) =
inlineListToLaTeX $ dropWhile isLineBreakOrSpace lst
-- title beginning with fig: indicates that the image is a figure
@@ -0,0 +1,91 @@
```
% pandoc -t revealjs
# Slide one
<div class="columns">
<div class="column" width="40%">
- a
- b
</div>
<div class="column" width="40%">
- c
- d
</div>
<div class="column" width="10%">
ok
</div>
</div>
^D
<section id="slide-one" class="slide level1">
<h1>Slide one</h1>
<div class="columns">
<div class="column" width="40%" style="width:40%;min-width:40%;vertical-align:top;">
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
<div class="column" width="40%" style="width:40%;min-width:40%;vertical-align:top;">
<ul>
<li>c</li>
<li>d</li>
</ul>
</div>
<div class="column" width="10%" style="width:10%;min-width:10%;vertical-align:top;">
<p>ok</p>
</div>
</div>
</section>
```

```
% pandoc -t beamer
# Slide one
<div class="columns">
<div class="column" width="40%">
- a
- b
</div>
<div class="column" width="40%">
- c
- d
</div>
<div class="column" width="10%">
ok
</div>
</div>
^D
\begin{frame}{%
\protect\hypertarget{slide-one}{%
Slide one}}
\begin{columns}[T]
\begin{column}{0.40\textwidth}
\begin{itemize}
\tightlist
\item
a
\item
b
\end{itemize}
\end{column}
\begin{column}{0.40\textwidth}
\begin{itemize}
\tightlist
\item
c
\item
d
\end{itemize}
\end{column}
\begin{column}{0.10\textwidth}
ok
\end{column}
\end{columns}
\end{frame}
```

@@ -9,6 +9,7 @@
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
</style>
<style type="text/css">
div.sourceCode { overflow-x: auto; }
@@ -9,6 +9,7 @@
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
</style>
<style type="text/css">
div.sourceCode { overflow-x: auto; }
@@ -14,6 +14,7 @@
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
</style>
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
@@ -14,6 +14,7 @@
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
</style>
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
@@ -12,6 +12,7 @@
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
</style>
<link rel="stylesheet" href="main.css" type="text/css" />
STUFF INSERTED
@@ -12,6 +12,7 @@
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
</style>
</head>
<body>
@@ -12,6 +12,7 @@
code{white-space: pre-wrap;}
.smallcaps{font-variant: small-caps;}
.line-block{white-space: pre-line;}
.column{display: inline-block;}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>

0 comments on commit 892a4ed

Please sign in to comment.
You can’t perform that action at this time.