From 16d134218b6ee545363573a6671297523dc6a6f7 Mon Sep 17 00:00:00 2001 From: Albert Krewinkel Date: Sun, 21 Aug 2022 11:30:21 +0200 Subject: [PATCH] HTML writer: revert to using `width` property for column widths The default `flex` and `overflow-x` properties of a column are set to `auto`. In combination, these changes allow to get good results when using columns with or without explicit widths. --- data/templates/styles.html | 2 +- src/Text/Pandoc/Writers/HTML.hs | 2 +- test/command/1710.md | 6 +++--- test/lhs-test.html | 2 +- test/lhs-test.html+lhs | 2 +- test/s5-basic.html | 2 +- test/s5-fancy.html | 2 +- test/s5-inserts.html | 2 +- test/writer.html4 | 2 +- test/writer.html5 | 2 +- 10 files changed, 12 insertions(+), 12 deletions(-) diff --git a/data/templates/styles.html b/data/templates/styles.html index 15f34bf56..776d6a872 100644 --- a/data/templates/styles.html +++ b/data/templates/styles.html @@ -164,7 +164,7 @@ $endif$ code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} div.columns{display: flex; gap: min(4vw, 1.5em);} -div.column{flex: 1;} +div.column{flex: auto; overflow-x: auto;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs index 24f3e2da4..cdbf11e1e 100644 --- a/src/Text/Pandoc/Writers/HTML.hs +++ b/src/Text/Pandoc/Writers/HTML.hs @@ -876,7 +876,7 @@ blockToHtmlInner opts (Div attr@(ident, classes, kvs') bs) = do let isCslBibEntry = "csl-entry" `elem` classes let kvs = [(k,v) | (k,v) <- kvs' , k /= "width" || "column" `notElem` classes] ++ - [("style", "flex:" <> w <> ";") | "column" `elem` classes + [("style", "width:" <> w <> ";") | "column" `elem` classes , ("width", w) <- kvs'] ++ [("role", "doc-bibliography") | isCslBibBody && html5] ++ [("role", "doc-biblioentry") | isCslBibEntry && html5] diff --git a/test/command/1710.md b/test/command/1710.md index e65f1be70..64d86cffe 100644 --- a/test/command/1710.md +++ b/test/command/1710.md @@ -19,17 +19,17 @@ ok

Slide one

-
+
  • a
  • b
-
+
  • c
  • d
-
+

ok

diff --git a/test/lhs-test.html b/test/lhs-test.html index ea9681585..76492a50c 100644 --- a/test/lhs-test.html +++ b/test/lhs-test.html @@ -149,7 +149,7 @@ code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: 1;} + div.column{flex: auto; overflow-x: auto;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs index f88dd4700..04e33fcae 100644 --- a/test/lhs-test.html+lhs +++ b/test/lhs-test.html+lhs @@ -149,7 +149,7 @@ code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: 1;} + div.column{flex: auto; overflow-x: auto;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { diff --git a/test/s5-basic.html b/test/s5-basic.html index 1d0f8a3f9..cfd3a755d 100644 --- a/test/s5-basic.html +++ b/test/s5-basic.html @@ -14,7 +14,7 @@ code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: 1;} + div.column{flex: auto; overflow-x: auto;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { diff --git a/test/s5-fancy.html b/test/s5-fancy.html index 824001b42..4f3cb8194 100644 --- a/test/s5-fancy.html +++ b/test/s5-fancy.html @@ -14,7 +14,7 @@ code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: 1;} + div.column{flex: auto; overflow-x: auto;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { diff --git a/test/s5-inserts.html b/test/s5-inserts.html index 58e0c6caa..cafb1c3e5 100644 --- a/test/s5-inserts.html +++ b/test/s5-inserts.html @@ -12,7 +12,7 @@ code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: 1;} + div.column{flex: auto; overflow-x: auto;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { diff --git a/test/writer.html4 b/test/writer.html4 index ec13d9ded..017da7d1e 100644 --- a/test/writer.html4 +++ b/test/writer.html4 @@ -152,7 +152,7 @@ code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: 1;} + div.column{flex: auto; overflow-x: auto;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { diff --git a/test/writer.html5 b/test/writer.html5 index ad8079f75..190288769 100644 --- a/test/writer.html5 +++ b/test/writer.html5 @@ -152,7 +152,7 @@ code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: 1;} + div.column{flex: auto; overflow-x: auto;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] {