Improved support for columns in HTML.

* Move as much as possible to the CSS in the template.
* Ensure that all the HTML-based templates (including epub)
  contain the CSS for columns.
* Columns default to 50% width unless they are given a width
  attribute.

Closes #4028.

18 files changed, 53 insertions, 53 deletions

diff --git a/data/templates/default.dzslides b/data/templates/default.dzslides
index c0ef7cad7..2e0b50b52 100644
--- a/data/templates/default.dzslides
+++ b/data/templates/default.dzslides
@@ -14,8 +14,9 @@ $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.epub2 b/data/templates/default.epub2
index 8a5aef14e..31a0509bd 100644
--- a/data/templates/default.epub2
+++ b/data/templates/default.epub2
@@ -8,8 +8,9 @@
   <title>$pagetitle$</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.epub3 b/data/templates/default.epub3
index f40f704f1..7e7782597 100644
--- a/data/templates/default.epub3
+++ b/data/templates/default.epub3
@@ -7,8 +7,9 @@
   <title>$pagetitle$</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.html4 b/data/templates/default.html4
index 37a8dc0d4..9fc3e9beb 100644
--- a/data/templates/default.html4
+++ b/data/templates/default.html4
@@ -16,9 +16,9 @@ $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.html5 b/data/templates/default.html5
index 061966858..f6fb15e78 100644
--- a/data/templates/default.html5
+++ b/data/templates/default.html5
@@ -16,9 +16,9 @@ $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.revealjs b/data/templates/default.revealjs
index d3504c67f..78c3c6551 100644
--- a/data/templates/default.revealjs
+++ b/data/templates/default.revealjs
@@ -19,9 +19,9 @@ $endif$
   <link rel="stylesheet" href="$revealjs-url$/css/reveal.css">
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.s5 b/data/templates/default.s5
index 23be415bc..cf4a3cc8d 100644
--- a/data/templates/default.s5
+++ b/data/templates/default.s5
@@ -17,9 +17,9 @@ $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.slideous b/data/templates/default.slideous
index 359640822..179f69b1c 100644
--- a/data/templates/default.slideous
+++ b/data/templates/default.slideous
@@ -18,9 +18,9 @@ $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.slidy b/data/templates/default.slidy
index 5922d083c..7e2d07e2f 100644
--- a/data/templates/default.slidy
+++ b/data/templates/default.slidy
@@ -18,9 +18,9 @@ $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs
index 1999bdbcf..2dc8b7a61 100644
--- a/src/Text/Pandoc/Writers/HTML.hs
+++ b/src/Text/Pandoc/Writers/HTML.hs
@@ -658,11 +658,8 @@ blockToHtml opts (LineBlock lns) =
 blockToHtml opts (Div attr@(ident, classes, kvs') bs) = do
   html5 <- gets stHtml5
   let kvs = [(k,v) | (k,v) <- kvs', k /= "width"] ++
-        if "column" `elem` classes
-           then let w = fromMaybe "48%" (lookup "width" kvs')
-                in  [("style", "width:" ++ w ++ ";min-width:" ++ w ++
-                      ";vertical-align:top;")]
-           else []
+            [("style", "width:" ++ w ++ ";")
+             | ("width",w) <- kvs', "column" `elem` classes]
   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/test/command/1710.md b/test/command/1710.md
index 8a8b05889..d14f1217f 100644
--- a/test/command/1710.md
+++ b/test/command/1710.md
@@ -19,17 +19,17 @@ ok
 <section id="slide-one" class="slide level1">
 <h1>Slide one</h1>
 <div class="columns">
-<div class="column" style="width:40%;min-width:40%;vertical-align:top;">
+<div class="column" style="width:40%;">
 <ul>
 <li>a</li>
 <li>b</li>
 </ul>
-</div><div class="column" style="width:40%;min-width:40%;vertical-align:top;">
+</div><div class="column" style="width:40%;">
 <ul>
 <li>c</li>
 <li>d</li>
 </ul>
-</div><div class="column" style="width:10%;min-width:10%;vertical-align:top;">
+</div><div class="column" style="width:10%;">
 <p>ok</p>
 </div>
 </div>
diff --git a/test/lhs-test.html b/test/lhs-test.html
index a921c6a56..2939c95bb 100644
--- a/test/lhs-test.html
+++ b/test/lhs-test.html
@@ -7,9 +7,9 @@
   <title>lhs-test</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
   </style>
   <style type="text/css">
 div.sourceLine, a.sourceLine { display: inline-block; min-height: 1.25em; }
diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs
index 8d27e6a58..7562a7d44 100644
--- a/test/lhs-test.html+lhs
+++ b/test/lhs-test.html+lhs
@@ -7,9 +7,9 @@
   <title>lhs-test</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
   </style>
   <style type="text/css">
 div.sourceLine, a.sourceLine { display: inline-block; min-height: 1.25em; }
diff --git a/test/s5-basic.html b/test/s5-basic.html
index bace22ebd..de4e19f73 100644
--- a/test/s5-basic.html
+++ b/test/s5-basic.html
@@ -12,9 +12,9 @@
   <title>My S5 Document</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
   </style>
   <!-- configuration parameters -->
   <meta name="defaultView" content="slideshow" />
diff --git a/test/s5-fancy.html b/test/s5-fancy.html
index 386ae6dbd..57ac6cac9 100644
--- a/test/s5-fancy.html
+++ b/test/s5-fancy.html
@@ -12,9 +12,9 @@
   <title>My S5 Document</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
   </style>
   <!-- configuration parameters -->
   <meta name="defaultView" content="slideshow" />
diff --git a/test/s5-inserts.html b/test/s5-inserts.html
index a3c3a7886..f21365c64 100644
--- a/test/s5-inserts.html
+++ b/test/s5-inserts.html
@@ -10,9 +10,9 @@
   <title>My S5 Document</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
   </style>
   <link rel="stylesheet" href="main.css" type="text/css" />
   STUFF INSERTED
diff --git a/test/writer.html4 b/test/writer.html4
index 51751170a..c002311b3 100644
--- a/test/writer.html4
+++ b/test/writer.html4
@@ -10,9 +10,9 @@
   <title>Pandoc Test Suite</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
   </style>
 </head>
 <body>
diff --git a/test/writer.html5 b/test/writer.html5
index db2317be1..e8e10f995 100644
--- a/test/writer.html5
+++ b/test/writer.html5
@@ -10,9 +10,9 @@
   <title>Pandoc Test Suite</title>
   <style type="text/css">
       code{white-space: pre-wrap;}
-      .smallcaps{font-variant: small-caps;}
-      .line-block{white-space: pre-line;}
-      .column{display: inline-block;}
+      span.smallcaps{font-variant: small-caps;}
+      div.line-block{white-space: pre-line;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
   </style>
   <!--[if lt IE 9]>
     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>