all: make the anchor symbol position on the right side of headers

In Asciidoctor, when `:sectanchors:` is set, the default anchor symbol
position is absolute on the left side of heading text with block display
option (the symbol located outside of box area of headers).
In special case, this cause an overflow when the generated HTML are
rendered inside flex with fixed height (the body is scrollable with empty
content on bottom).

This module changes the anchor symbol position to the right side of
heading text to prevent scroll on such layout, without absolute position
and normal inline layout.

3 files changed, 43 insertions, 16 deletions

diff --git a/README.md b/README.md
index 6c15e80..908244a 100644
--- a/README.md
+++ b/README.md
@@ -159,6 +159,19 @@ Additional document attribute provides by this library,
 
 ## Notes
 
+### Generated HTML differences
+
+In Asciidoctor, when `:sectanchors:` is set, the default anchor symbol
+position is absolute on the left side of heading text with block display
+option (the symbol located outside of box area of headers).
+In special case, this cause an overflow when the generated HTML are
+rendered inside flex with fixed height (the body is scrollable with empty
+content on bottom).
+
+This module changes the anchor symbol position to the right side of heading
+text to prevent scroll on such layout, without absolute position and
+normal inline layout.
+
 ### Unsupported markup
 
 The following markup will not supported either because its functionality is
diff --git a/default.css b/default.css
index ae45f9c..8138b84 100644
--- a/default.css
+++ b/default.css
@@ -366,6 +366,18 @@ h6 {
   line-height: 1.0125em;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: start;
+  padding-bottom: 0.5em;
+}
+
 h1 small,
 h2 small,
 h3 small,
@@ -1049,15 +1061,11 @@ h3 > a.anchor,
 h4 > a.anchor,
 h5 > a.anchor,
 h6 > a.anchor {
-  position: absolute;
-  z-index: 1001;
-  width: 1.5ex;
-  margin-left: -1.5ex;
-  display: block;
+  font-weight: 400;
+  margin-left: 0.5ex;
   text-decoration: none !important;
   visibility: hidden;
-  text-align: center;
-  font-weight: 400;
+  z-index: 1001;
 }
 
 #content h1 > a.anchor::before,
@@ -1070,7 +1078,6 @@ h5 > a.anchor::before,
 h6 > a.anchor::before {
   content: "\00A7";
   font-size: 0.85em;
-  display: block;
   padding-top: 0.1em;
 }
 
diff --git a/testdata/test.got.html b/testdata/test.got.html
index 2ef0eeb..49751a9 100644
--- a/testdata/test.got.html
+++ b/testdata/test.got.html
@@ -377,6 +377,18 @@ h6 {
   line-height: 1.0125em;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: start;
+  padding-bottom: 0.5em;
+}
+
 h1 small,
 h2 small,
 h3 small,
@@ -1060,15 +1072,11 @@ h3 > a.anchor,
 h4 > a.anchor,
 h5 > a.anchor,
 h6 > a.anchor {
-  position: absolute;
-  z-index: 1001;
-  width: 1.5ex;
-  margin-left: -1.5ex;
-  display: block;
+  font-weight: 400;
+  margin-left: 0.5ex;
   text-decoration: none !important;
   visibility: hidden;
-  text-align: center;
-  font-weight: 400;
+  z-index: 1001;
 }
 
 #content h1 > a.anchor::before,
@@ -1081,7 +1089,6 @@ h5 > a.anchor::before,
 h6 > a.anchor::before {
   content: "\00A7";
   font-size: 0.85em;
-  display: block;
   padding-top: 0.1em;
 }