From 5760cd850fd36ab483dceb5bfc78928d36ccee63 Mon Sep 17 00:00:00 2001
From: John MacFarlane <jgm@berkeley.edu>
Date: Mon, 2 Nov 2020 10:19:53 -0800
Subject: [PATCH] Default CSS tweaks.
These changes restore the 20px font size while increasing readibility by
reducing line width. (The number of words per line is now similar to
that of pandoc's default LaTeX/PDF output.) With the narrower lines, we
also need less interline and interparagraph space, so the content
becomes more compact and skimmable:
- Change default font size back to 20px.
- Set font-size for print media to 12pt.
- Reduce interline space.
- Reduce interparagraph space.
- Reduce line width.
- Remove the special `line-height: 1` for table cells,
which I had suggested but which now seems a mistake.
- Remove the special line-height for pre.
- Ensure that there is a bit more space before a heading
than after.
- Slightly reduced space after title header.
---
data/templates/styles.html | 29 ++++++++++++++---------------
test/lhs-test.html | 29 ++++++++++++++---------------
test/lhs-test.html+lhs | 29 ++++++++++++++---------------
test/writer.html4 | 29 ++++++++++++++---------------
test/writer.html5 | 29 ++++++++++++++---------------
5 files changed, 70 insertions(+), 75 deletions(-)
diff --git a/data/templates/styles.html b/data/templates/styles.html
index cd0354fdc..e744d83b8 100644
--- a/data/templates/styles.html
+++ b/data/templates/styles.html
@@ -1,14 +1,14 @@
$if(document-css)$
html {
- line-height: $if(linestretch)$$linestretch$$else$1.7$endif$;
+ line-height: $if(linestretch)$$linestretch$$else$1.5$endif$;
font-family: $if(mainfont)$$mainfont$$else$Georgia, serif$endif$;
- font-size: $if(fontsize)$$fontsize$$else$18px$endif$;
+ font-size: $if(fontsize)$$fontsize$$else$20px$endif$;
color: $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
background-color: $if(backgroundcolor)$$backgroundcolor$$else$#fdfdfd$endif$;
}
body {
margin: 0 auto;
- max-width: 40em;
+ max-width: 36em;
padding-left: $if(margin-left)$$margin-left$$else$50px$endif$;
padding-right: $if(margin-right)$$margin-right$$else$50px$endif$;
padding-top: $if(margin-top)$$margin-top$$else$50px$endif$;
@@ -28,6 +28,7 @@ body {
body {
background-color: transparent;
color: black;
+ font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
@@ -38,7 +39,7 @@ body {
}
}
p {
- margin: 1.7em 0;
+ margin: 1em 0;
}
a {
color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
@@ -50,10 +51,10 @@ img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
- margin-top: 1.7em;
+ margin-top: 1.4em;
}
h5, h6 {
- font-size: $if(fontsize)$$fontsize$$else$18px$endif$;
+ font-size: 1em;
font-style: italic;
}
h6 {
@@ -61,13 +62,13 @@ h6 {
}
ol, ul {
padding-left: 1.7em;
- margin-top: 1.7em;
+ margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
- margin: 1.7em 0 1.7em 1.7em;
+ margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
@@ -82,8 +83,7 @@ $endif$
margin: 0;
}
pre {
- margin: 1.7em 0;
- line-height: 1.5em;
+ margin: 1em 0;
$if(monobackgroundcolor)$
background-color: $monobackgroundcolor$;
padding: 1em;
@@ -102,10 +102,10 @@ hr {
background-color: #1a1a1a;
border: none;
height: 1px;
- margin: 1.7em 0;
+ margin: 1em 0;
}
table {
- margin: 1.7em 0;
+ margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
@@ -116,20 +116,19 @@ table caption {
margin-bottom: 0.75em;
}
tbody {
+ margin-top: 0.5em;
border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
border-bottom: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
}
th {
border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
padding: 0.25em 0.5em 0.25em 0.5em;
- line-height: 1;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
- line-height: 1;
}
header {
- margin-bottom: 6em;
+ margin-bottom: 4em;
text-align: center;
}
#TOC li {
diff --git a/test/lhs-test.html b/test/lhs-test.html
index 888b38826..38e0830f6 100644
--- a/test/lhs-test.html
+++ b/test/lhs-test.html
@@ -7,15 +7,15 @@
<title>lhs-test</title>
<style>
html {
- line-height: 1.7;
+ line-height: 1.5;
font-family: Georgia, serif;
- font-size: 18px;
+ font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
- max-width: 40em;
+ max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
@@ -35,6 +35,7 @@
body {
background-color: transparent;
color: black;
+ font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
@@ -45,7 +46,7 @@
}
}
p {
- margin: 1.7em 0;
+ margin: 1em 0;
}
a {
color: #1a1a1a;
@@ -57,10 +58,10 @@
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
- margin-top: 1.7em;
+ margin-top: 1.4em;
}
h5, h6 {
- font-size: 18px;
+ font-size: 1em;
font-style: italic;
}
h6 {
@@ -68,13 +69,13 @@
}
ol, ul {
padding-left: 1.7em;
- margin-top: 1.7em;
+ margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
- margin: 1.7em 0 1.7em 1.7em;
+ margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
@@ -85,8 +86,7 @@
margin: 0;
}
pre {
- margin: 1.7em 0;
- line-height: 1.5em;
+ margin: 1em 0;
overflow: auto;
}
pre code {
@@ -101,10 +101,10 @@
background-color: #1a1a1a;
border: none;
height: 1px;
- margin: 1.7em 0;
+ margin: 1em 0;
}
table {
- margin: 1.7em 0;
+ margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
@@ -115,20 +115,19 @@
margin-bottom: 0.75em;
}
tbody {
+ margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
- line-height: 1;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
- line-height: 1;
}
header {
- margin-bottom: 6em;
+ margin-bottom: 4em;
text-align: center;
}
#TOC li {
diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs
index 235bb499e..bc2503cca 100644
--- a/test/lhs-test.html+lhs
+++ b/test/lhs-test.html+lhs
@@ -7,15 +7,15 @@
<title>lhs-test</title>
<style>
html {
- line-height: 1.7;
+ line-height: 1.5;
font-family: Georgia, serif;
- font-size: 18px;
+ font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
- max-width: 40em;
+ max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
@@ -35,6 +35,7 @@
body {
background-color: transparent;
color: black;
+ font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
@@ -45,7 +46,7 @@
}
}
p {
- margin: 1.7em 0;
+ margin: 1em 0;
}
a {
color: #1a1a1a;
@@ -57,10 +58,10 @@
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
- margin-top: 1.7em;
+ margin-top: 1.4em;
}
h5, h6 {
- font-size: 18px;
+ font-size: 1em;
font-style: italic;
}
h6 {
@@ -68,13 +69,13 @@
}
ol, ul {
padding-left: 1.7em;
- margin-top: 1.7em;
+ margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
- margin: 1.7em 0 1.7em 1.7em;
+ margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
@@ -85,8 +86,7 @@
margin: 0;
}
pre {
- margin: 1.7em 0;
- line-height: 1.5em;
+ margin: 1em 0;
overflow: auto;
}
pre code {
@@ -101,10 +101,10 @@
background-color: #1a1a1a;
border: none;
height: 1px;
- margin: 1.7em 0;
+ margin: 1em 0;
}
table {
- margin: 1.7em 0;
+ margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
@@ -115,20 +115,19 @@
margin-bottom: 0.75em;
}
tbody {
+ margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
- line-height: 1;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
- line-height: 1;
}
header {
- margin-bottom: 6em;
+ margin-bottom: 4em;
text-align: center;
}
#TOC li {
diff --git a/test/writer.html4 b/test/writer.html4
index a74705151..76578249a 100644
--- a/test/writer.html4
+++ b/test/writer.html4
@@ -10,15 +10,15 @@
<title>Pandoc Test Suite</title>
<style type="text/css">
html {
- line-height: 1.7;
+ line-height: 1.5;
font-family: Georgia, serif;
- font-size: 18px;
+ font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
- max-width: 40em;
+ max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
@@ -38,6 +38,7 @@
body {
background-color: transparent;
color: black;
+ font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
@@ -48,7 +49,7 @@
}
}
p {
- margin: 1.7em 0;
+ margin: 1em 0;
}
a {
color: #1a1a1a;
@@ -60,10 +61,10 @@
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
- margin-top: 1.7em;
+ margin-top: 1.4em;
}
h5, h6 {
- font-size: 18px;
+ font-size: 1em;
font-style: italic;
}
h6 {
@@ -71,13 +72,13 @@
}
ol, ul {
padding-left: 1.7em;
- margin-top: 1.7em;
+ margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
- margin: 1.7em 0 1.7em 1.7em;
+ margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
@@ -88,8 +89,7 @@
margin: 0;
}
pre {
- margin: 1.7em 0;
- line-height: 1.5em;
+ margin: 1em 0;
overflow: auto;
}
pre code {
@@ -104,10 +104,10 @@
background-color: #1a1a1a;
border: none;
height: 1px;
- margin: 1.7em 0;
+ margin: 1em 0;
}
table {
- margin: 1.7em 0;
+ margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
@@ -118,20 +118,19 @@
margin-bottom: 0.75em;
}
tbody {
+ margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
- line-height: 1;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
- line-height: 1;
}
header {
- margin-bottom: 6em;
+ margin-bottom: 4em;
text-align: center;
}
#TOC li {
diff --git a/test/writer.html5 b/test/writer.html5
index b5e65a4d7..cb9333efa 100644
--- a/test/writer.html5
+++ b/test/writer.html5
@@ -10,15 +10,15 @@
<title>Pandoc Test Suite</title>
<style>
html {
- line-height: 1.7;
+ line-height: 1.5;
font-family: Georgia, serif;
- font-size: 18px;
+ font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
- max-width: 40em;
+ max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
@@ -38,6 +38,7 @@
body {
background-color: transparent;
color: black;
+ font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
@@ -48,7 +49,7 @@
}
}
p {
- margin: 1.7em 0;
+ margin: 1em 0;
}
a {
color: #1a1a1a;
@@ -60,10 +61,10 @@
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
- margin-top: 1.7em;
+ margin-top: 1.4em;
}
h5, h6 {
- font-size: 18px;
+ font-size: 1em;
font-style: italic;
}
h6 {
@@ -71,13 +72,13 @@
}
ol, ul {
padding-left: 1.7em;
- margin-top: 1.7em;
+ margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
- margin: 1.7em 0 1.7em 1.7em;
+ margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
@@ -88,8 +89,7 @@
margin: 0;
}
pre {
- margin: 1.7em 0;
- line-height: 1.5em;
+ margin: 1em 0;
overflow: auto;
}
pre code {
@@ -104,10 +104,10 @@
background-color: #1a1a1a;
border: none;
height: 1px;
- margin: 1.7em 0;
+ margin: 1em 0;
}
table {
- margin: 1.7em 0;
+ margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
@@ -118,20 +118,19 @@
margin-bottom: 0.75em;
}
tbody {
+ margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
- line-height: 1;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
- line-height: 1;
}
header {
- margin-bottom: 6em;
+ margin-bottom: 4em;
text-align: center;
}
#TOC li {