Improve abstract in HTML template.

* Add localized title "abstract", unless `abstract-title` variable
  is set.
* Add `abstract-title` div to abstract CSS.
* Move abstract CSS out of CSL conditional.
* Ensure that abstract is aligned left but indented on all sides.
* Use smaller font for abstract.

Improves #7588.

3 files changed, 15 insertions, 6 deletions

diff --git a/data/templates/default.html4 b/data/templates/default.html4
index 6534a590b..00f0bacbc 100644
--- a/data/templates/default.html4
+++ b/data/templates/default.html4
@@ -48,6 +48,7 @@ $if(date)$
 $endif$
 $if(abstract)$
 <div class="abstract">
+<div class="abstract-title">$abstract-title$</div>
 $abstract$
 </div>
 $endif$
diff --git a/data/templates/default.html5 b/data/templates/default.html5
index cb2aa7a09..5242f797f 100644
--- a/data/templates/default.html5
+++ b/data/templates/default.html5
@@ -51,6 +51,7 @@ $if(date)$
 $endif$
 $if(abstract)$
 <div class="abstract">
+<div class="abstract-title">$abstract-title$</div>
 $abstract$
 </div>
 $endif$
diff --git a/data/templates/styles.html b/data/templates/styles.html
index 7df3c3dab..970adf2b8 100644
--- a/data/templates/styles.html
+++ b/data/templates/styles.html
@@ -73,6 +73,19 @@ blockquote {
   border-left: 2px solid #e6e6e6;
   color: #606060;
 }
+$if(abstract)$
+div.abstract {
+  margin: 2em 2em 2em 2em;
+  text-align: left;
+  font-size: 85%;
+}
+div.abstract-title {
+  font-weight: bold;
+  text-align: center;
+  padding: 0;
+  margin-bottom: 0.5em;
+}
+$endif$
 code {
   font-family: $if(monofont)$$monofont$$else$Menlo, Monaco, 'Lucida Console', Consolas, monospace$endif$;
 $if(monobackgroundcolor)$
@@ -161,12 +174,6 @@ div.csl-entry {
 $if(csl-entry-spacing)$
   margin-bottom: $csl-entry-spacing$;
 $endif$
-$if(abstract)$
-div.abstract{
-  margin: auto;
-  width: 90%;
-}
-$endif$
 }
 .hanging div.csl-entry {
   margin-left:2em;