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
jgm · Aug 15, 2017 · 892a4ed · 892a4ed
1 parent 23d29ee
commit 892a4ed
Show file tree

Hide file tree

Showing 17 changed files with 133 additions and 3 deletions.
diff --git a/data/templates/default.dzslides b/data/templates/default.dzslides
@@ -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$

diff --git a/data/templates/default.html4 b/data/templates/default.html4
@@ -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$

diff --git a/data/templates/default.html5 b/data/templates/default.html5
@@ -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$

diff --git a/data/templates/default.revealjs b/data/templates/default.revealjs
@@ -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$

diff --git a/data/templates/default.s5 b/data/templates/default.s5
@@ -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$

diff --git a/data/templates/default.slideous b/data/templates/default.slideous
@@ -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$

diff --git a/data/templates/default.slidy b/data/templates/default.slidy
@@ -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$

diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs
@@ -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

diff --git a/src/Text/Pandoc/Writers/LaTeX.hs b/src/Text/Pandoc/Writers/LaTeX.hs
@@ -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

diff --git a/test/command/1710.md b/test/command/1710.md
@@ -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}
+```
+
diff --git a/test/lhs-test.html b/test/lhs-test.html
@@ -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; }

diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs
@@ -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; }

diff --git a/test/s5-basic.html b/test/s5-basic.html
@@ -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" />

diff --git a/test/s5-fancy.html b/test/s5-fancy.html
@@ -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" />

diff --git a/test/s5-inserts.html b/test/s5-inserts.html
@@ -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

diff --git a/test/writer.html4 b/test/writer.html4
@@ -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>

diff --git a/test/writer.html5 b/test/writer.html5
@@ -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>