summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJohn MacFarlane <jgm@berkeley.edu>2017-11-02 20:55:29 -0700
committerJohn MacFarlane <jgm@berkeley.edu>2017-11-02 20:57:05 -0700
commit642d603666521157d386e2a87bfdcca11d479b87 (patch)
tree2f2fef655397cfce54049cfa0c20c02a95a888e6
parent52826881262532db9b0c9ce70f097d4ae844a39b (diff)
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.
-rw-r--r--data/templates/default.dzslides5
-rw-r--r--data/templates/default.epub25
-rw-r--r--data/templates/default.epub35
-rw-r--r--data/templates/default.html46
-rw-r--r--data/templates/default.html56
-rw-r--r--data/templates/default.revealjs6
-rw-r--r--data/templates/default.s56
-rw-r--r--data/templates/default.slideous6
-rw-r--r--data/templates/default.slidy6
-rw-r--r--src/Text/Pandoc/Writers/HTML.hs7
-rw-r--r--test/command/1710.md6
-rw-r--r--test/lhs-test.html6
-rw-r--r--test/lhs-test.html+lhs6
-rw-r--r--test/s5-basic.html6
-rw-r--r--test/s5-fancy.html6
-rw-r--r--test/s5-inserts.html6
-rw-r--r--test/writer.html46
-rw-r--r--test/writer.html56
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>