Fixed revealjs slide column width issues.

* Remove "width" attribute which is not allowed on div.
* Remove space between `<div class="column">` elements,
  since this prevents columns whose widths sum to 100%
  (the space takes up space).

Closes #4028.

src/Text/Pandoc/Writers/HTML.hs

@@ -655,7 +655,7 @@ blockToHtml opts (LineBlock lns) =
     return $ H.div ! A.class_ "line-block" $ htmlLines
 blockToHtml opts (Div attr@(ident, classes, kvs') bs) = do
   html5 <- gets stHtml5
-  let kvs = kvs' ++
+  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 ++
@@ -664,7 +664,12 @@ blockToHtml opts (Div attr@(ident, classes, kvs') bs) = do
   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
-  contents <- blockListToHtml opts' bs
+  contents <- if "columns" `elem` classes
+                 then -- we don't use blockListToHtml because it inserts
+                      -- a newline between the column divs, which throws
+                      -- off widths! see #4028
+                      mconcat <$> mapM (blockToHtml opts) bs
+                 else blockListToHtml opts' bs
   let contents' = nl opts >> contents >> nl opts
   let (divtag, classes') = if html5 && "section" `elem` classes
                               then (H5.section, filter (/= "section") classes)

test/command/1710.md

@@ -19,19 +19,17 @@ ok
 <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;">
+<div class="column" 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;">
+</div><div class="column" 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;">
+</div><div class="column" style="width:10%;min-width:10%;vertical-align:top;">
 <p>ok</p>
 </div>
 </div>