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.
This commit is contained in:
parent
08f1f4551c
commit
16d134218b
10 changed files with 12 additions and 12 deletions
|
@ -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"] {
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -19,17 +19,17 @@ ok
|
|||
<section id="slide-one" class="slide level1">
|
||||
<h1>Slide one</h1>
|
||||
<div class="columns">
|
||||
<div class="column" style="flex:40%;">
|
||||
<div class="column" style="width:40%;">
|
||||
<ul>
|
||||
<li>a</li>
|
||||
<li>b</li>
|
||||
</ul>
|
||||
</div><div class="column" style="flex:40%;">
|
||||
</div><div class="column" style="width:40%;">
|
||||
<ul>
|
||||
<li>c</li>
|
||||
<li>d</li>
|
||||
</ul>
|
||||
</div><div class="column" style="flex:10%;">
|
||||
</div><div class="column" style="width:10%;">
|
||||
<p>ok</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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"] {
|
||||
|
|
|
@ -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"] {
|
||||
|
|
|
@ -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"] {
|
||||
|
|
|
@ -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"] {
|
||||
|
|
|
@ -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"] {
|
||||
|
|
|
@ -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"] {
|
||||
|
|
|
@ -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"] {
|
||||
|
|
Loading…
Reference in a new issue