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.
This commit is contained in:
John MacFarlane 2017-11-02 20:55:29 -07:00
parent 5282688126
commit 642d603666
18 changed files with 53 additions and 53 deletions

View file

@ -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$

View file

@ -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$

View file

@ -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$

View file

@ -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$

View file

@ -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$

View file

@ -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$

View file

@ -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$

View file

@ -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$

View file

@ -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$

View file

@ -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

View file

@ -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>

View file

@ -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; }

View file

@ -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; }

View file

@ -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" />

View file

@ -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" />

View file

@ -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

View file

@ -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>

View file

@ -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>