From f4185fcef0aa5c00e37a1bf8bbc8b8c6459fffe7 Mon Sep 17 00:00:00 2001
From: Lila <lila91142@gmail.com>
Date: Tue, 19 May 2020 07:45:44 +0200
Subject: 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>
-- 
cgit v1.2.3