diff options
| -rw-r--r-- | README.md | 13 | ||||
| -rw-r--r-- | default.css | 23 | ||||
| -rw-r--r-- | testdata/test.got.html | 23 |
3 files changed, 43 insertions, 16 deletions
@@ -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; } |