From f4185fcef0aa5c00e37a1bf8bbc8b8c6459fffe7 Mon Sep 17 00:00:00 2001
From: Lila <lila91142@gmail.com>
Date: Tue, 19 May 2020 07:45:44 +0200
Subject: [PATCH] Use CSS in favor of <br> for display math (#6372)
Some CSS to ensure that display math is
displayed centered and on a new line is now included
in the default HTML-based templates; this may be
overridden if the user wants a different behavior.
---
data/templates/styles.html | 3 +++
src/Text/Pandoc/Writers/HTML.hs | 23 ++++++++++-------------
test/command/5655.md | 4 ++--
test/lhs-test.html | 1 +
test/lhs-test.html+lhs | 1 +
test/s5-basic.html | 1 +
test/s5-inserts.html | 1 +
test/writer.html4 | 3 ++-
test/writer.html5 | 3 ++-
9 files changed, 23 insertions(+), 17 deletions(-)
diff --git a/data/templates/styles.html b/data/templates/styles.html
index 34cd4de89..ea92c39ec 100644
--- a/data/templates/styles.html
+++ b/data/templates/styles.html
@@ -10,3 +10,6 @@ $endif$
$if(highlighting-css)$
$highlighting-css$
$endif$
+$if(displaymath-css)$
+.display.math{display: block; text-align: center; margin: 0.5rem auto;}
+$endif$
diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs
index 1f0ee5410..dbda5067f 100644
--- a/src/Text/Pandoc/Writers/HTML.hs
+++ b/src/Text/Pandoc/Writers/HTML.hs
@@ -318,6 +318,10 @@ pandocToHtml opts (Pandoc meta blocks) = do
defField "mathjaxurl"
(T.takeWhile (/='?') u)
_ -> defField "mathjax" False) $
+ (case writerHTMLMathMethod opts of
+ PlainMath -> defField "displaymath-css" True
+ WebTeX _ -> defField "displaymath-css" True
+ _ -> id) $
defField "quotes" (stQuotes st) $
-- for backwards compatibility we populate toc
-- with the contents of the toc, rather than a
@@ -1108,14 +1112,11 @@ inlineToHtml opts inline = do
let s = case t of
InlineMath -> "\\textstyle "
DisplayMath -> "\\displaystyle "
- let m = imtag ! A.style "vertical-align:middle"
- ! A.src (toValue $ url <> T.pack (urlEncode (T.unpack $ s <> str)))
- ! A.alt (toValue str)
- ! A.title (toValue str)
- let brtag = if html5 then H5.br else H.br
- return $ case t of
- InlineMath -> m
- DisplayMath -> brtag >> m >> brtag
+ return $ imtag ! A.style "vertical-align:middle"
+ ! A.src (toValue $ url <> T.pack (urlEncode (T.unpack $ s <> str)))
+ ! A.alt (toValue str)
+ ! A.title (toValue str)
+ ! A.class_ mathClass
GladTeX ->
return $
customParent (textTag "eq") !
@@ -1142,11 +1143,7 @@ inlineToHtml opts inline = do
DisplayMath -> str
PlainMath -> do
x <- lift (texMathToInlines t str) >>= inlineListToHtml opts
- let m = H.span ! A.class_ mathClass $ x
- let brtag = if html5 then H5.br else H.br
- return $ case t of
- InlineMath -> m
- DisplayMath -> brtag >> m >> brtag
+ return $ H.span ! A.class_ mathClass $ x
(RawInline f str) -> do
ishtml <- isRawHtml f
if ishtml
diff --git a/test/command/5655.md b/test/command/5655.md
index 35987c10a..692009562 100644
--- a/test/command/5655.md
+++ b/test/command/5655.md
@@ -2,13 +2,13 @@
% pandoc --webtex
$T_n={n+1 \choose 2}$
^D
-<p><img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?%5Ctextstyle%20T_n%3D%7Bn%2B1%20%5Cchoose%202%7D" alt="T_n={n+1 \choose 2}" title="T_n={n+1 \choose 2}" /></p>
+<p><img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?%5Ctextstyle%20T_n%3D%7Bn%2B1%20%5Cchoose%202%7D" alt="T_n={n+1 \choose 2}" title="T_n={n+1 \choose 2}" class="math inline" /></p>
````
````
% pandoc --webtex
$$T_n={n+1 \choose 2}$$
^D
-<p><br /><img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?%5Cdisplaystyle%20T_n%3D%7Bn%2B1%20%5Cchoose%202%7D" alt="T_n={n+1 \choose 2}" title="T_n={n+1 \choose 2}" /><br /></p>
+<p><img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?%5Cdisplaystyle%20T_n%3D%7Bn%2B1%20%5Cchoose%202%7D" alt="T_n={n+1 \choose 2}" title="T_n={n+1 \choose 2}" class="math display" /></p>
````
diff --git a/test/lhs-test.html b/test/lhs-test.html
index 8ec8e5dd9..621d79163 100644
--- a/test/lhs-test.html
+++ b/test/lhs-test.html
@@ -74,6 +74,7 @@
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
+ .display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs
index 22f807e17..b55556ef3 100644
--- a/test/lhs-test.html+lhs
+++ b/test/lhs-test.html+lhs
@@ -74,6 +74,7 @@
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
+ .display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
diff --git a/test/s5-basic.html b/test/s5-basic.html
index f168ce9c8..7440b575b 100644
--- a/test/s5-basic.html
+++ b/test/s5-basic.html
@@ -17,6 +17,7 @@
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
+ .display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
diff --git a/test/s5-inserts.html b/test/s5-inserts.html
index 2574715d3..1df9dd018 100644
--- a/test/s5-inserts.html
+++ b/test/s5-inserts.html
@@ -15,6 +15,7 @@
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
+ .display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<link rel="stylesheet" href="main.css" type="text/css" />
STUFF INSERTED
diff --git a/test/writer.html4 b/test/writer.html4
index 80106bd56..56b78dfb1 100644
--- a/test/writer.html4
+++ b/test/writer.html4
@@ -15,6 +15,7 @@
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
+ .display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
@@ -432,7 +433,7 @@ Blah
<li><span class="math inline"><em>α</em> ∧ <em>ω</em></span></li>
<li><span class="math inline">223</span></li>
<li><span class="math inline"><em>p</em></span>-Tree</li>
-<li>Here’s some display math: <br /><span class="math display">$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$</span><br /></li>
+<li>Here’s some display math: <span class="math display">$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$</span></li>
<li>Here’s one that has a line break in it: <span class="math inline"><em>α</em> + <em>ω</em> × <em>x</em><sup>2</sup></span>.</li>
</ul>
<p>These shouldn’t be math:</p>
diff --git a/test/writer.html5 b/test/writer.html5
index 431503b03..321b65afd 100644
--- a/test/writer.html5
+++ b/test/writer.html5
@@ -15,6 +15,7 @@
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
+ .display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
@@ -435,7 +436,7 @@ Blah
<li><span class="math inline"><em>α</em> ∧ <em>ω</em></span></li>
<li><span class="math inline">223</span></li>
<li><span class="math inline"><em>p</em></span>-Tree</li>
-<li>Here’s some display math: <br /><span class="math display">$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$</span><br /></li>
+<li>Here’s some display math: <span class="math display">$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$</span></li>
<li>Here’s one that has a line break in it: <span class="math inline"><em>α</em> + <em>ω</em> × <em>x</em><sup>2</sup></span>.</li>
</ul>
<p>These shouldn’t be math:</p>