all: move the sect anchor element to the right

Previously, we try to fix the anchor position by using "flex-direction:
row-reverse".
This cause the formatted text inside title also become reversed.
For example,

	== With `mono`

Will rendered as

	mono With $

This is not as expected.

This changes fix this by rendering the anchor on the right after title.

3 files changed, 79 insertions, 85 deletions

diff --git a/default.css b/default.css
index 8138b84..e103647 100644
--- a/default.css
+++ b/default.css
@@ -373,7 +373,6 @@ h4,
 h5,
 h6 {
   display: flex;
-  flex-direction: row-reverse;
   justify-content: start;
   padding-bottom: 0.5em;
 }
diff --git a/html_backend.go b/html_backend.go
index 323b60b..32973e0 100644
--- a/html_backend.go
+++ b/html_backend.go
@@ -1160,18 +1160,7 @@ func htmlWriteSection(doc *Document, el *element, out io.Writer) {
 
 	fmt.Fprintf(out, "\n<div class=%q>\n<%s id=%q>", class, tag, el.ID)
 
-	var (
-		withSectAnchors bool
-		withSectlinks   bool
-	)
-
-	_, withSectAnchors = doc.Attributes.Entry[docAttrSectAnchors]
-	if withSectAnchors {
-		fmt.Fprintf(out,
-			`<a class="anchor" href="#%s" aria-label="Anchor for %s"></a>`,
-			el.ID, el.ID)
-	}
-	_, withSectlinks = doc.Attributes.Entry[docAttrSectLinks]
+	_, withSectlinks := doc.Attributes.Entry[docAttrSectLinks]
 	if withSectlinks {
 		fmt.Fprintf(out, `<a class="link" href="#%s">`, el.ID)
 	}
@@ -1185,6 +1174,13 @@ func htmlWriteSection(doc *Document, el *element, out io.Writer) {
 	if withSectlinks {
 		fmt.Fprint(out, "</a>")
 	}
+
+	_, withSectAnchors := doc.Attributes.Entry[docAttrSectAnchors]
+	if withSectAnchors {
+		fmt.Fprintf(out,
+			`<a class="anchor" href="#%s" aria-label="Anchor for %s"></a>`,
+			el.ID, el.ID)
+	}
 	fmt.Fprintf(out, "</%s>", tag)
 
 	if el.kind == elKindSectionL1 {
diff --git a/testdata/test.got.html b/testdata/test.got.html
index 49751a9..6e8c276 100644
--- a/testdata/test.got.html
+++ b/testdata/test.got.html
@@ -384,7 +384,6 @@ h4,
 h5,
 h6 {
   display: flex;
-  flex-direction: row-reverse;
   justify-content: start;
   padding-bottom: 0.5em;
 }
@@ -2611,7 +2610,7 @@ p.tableblock {
 </div>
 </div>
 <div class="sect1">
-<h2 id="metadata_references"><a class="anchor" href="#metadata_references" aria-label="Anchor for metadata_references"></a><a class="link" href="#metadata_references">1. Metadata references</a></h2>
+<h2 id="metadata_references"><a class="link" href="#metadata_references">1. Metadata references</a><a class="anchor" href="#metadata_references" aria-label="Anchor for metadata_references"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>First author: Author A Author  A <a href="mailto:a@a.com">a@a.com</a>
@@ -2631,7 +2630,7 @@ AA.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="inline_formatting_on_section"><a class="anchor" href="#inline_formatting_on_section" aria-label="Anchor for inline_formatting_on_section"></a><a class="link" href="#inline_formatting_on_section">2. <em>Inline <code>formatting</code> on <strong>section</strong></em></a></h2>
+<h2 id="inline_formatting_on_section"><a class="link" href="#inline_formatting_on_section">2. <em>Inline <code>formatting</code> on <strong>section</strong></em></a><a class="anchor" href="#inline_formatting_on_section" aria-label="Anchor for inline_formatting_on_section"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>Test inline formatting on section title.</p>
@@ -2639,16 +2638,16 @@ AA.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="level_1"><a class="anchor" href="#level_1" aria-label="Anchor for level_1"></a><a class="link" href="#level_1">3. Level 1</a></h2>
+<h2 id="level_1"><a class="link" href="#level_1">3. Level 1</a><a class="anchor" href="#level_1" aria-label="Anchor for level_1"></a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="level_2"><a class="anchor" href="#level_2" aria-label="Anchor for level_2"></a><a class="link" href="#level_2">3.1. Level 2</a></h3>
+<h3 id="level_2"><a class="link" href="#level_2">3.1. Level 2</a><a class="anchor" href="#level_2" aria-label="Anchor for level_2"></a></h3>
 <div class="sect3">
-<h4 id="level_3"><a class="anchor" href="#level_3" aria-label="Anchor for level_3"></a><a class="link" href="#level_3">3.1.1. Level 3</a></h4>
+<h4 id="level_3"><a class="link" href="#level_3">3.1.1. Level 3</a><a class="anchor" href="#level_3" aria-label="Anchor for level_3"></a></h4>
 <div class="sect4">
-<h5 id="level_4"><a class="anchor" href="#level_4" aria-label="Anchor for level_4"></a><a class="link" href="#level_4">Level 4</a></h5>
+<h5 id="level_4"><a class="link" href="#level_4">Level 4</a><a class="anchor" href="#level_4" aria-label="Anchor for level_4"></a></h5>
 <div class="sect5">
-<h6 id="level_5"><a class="anchor" href="#level_5" aria-label="Anchor for level_5"></a><a class="link" href="#level_5">Level 5</a></h6>
+<h6 id="level_5"><a class="link" href="#level_5">Level 5</a><a class="anchor" href="#level_5" aria-label="Anchor for level_5"></a></h6>
 </div>
 </div>
 </div>
@@ -2656,17 +2655,17 @@ AA.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="section_two"><a class="anchor" href="#section_two" aria-label="Anchor for section_two"></a><a class="link" href="#section_two">Section Two</a></h2>
+<h2 id="section_two"><a class="link" href="#section_two">Section Two</a><a class="anchor" href="#section_two" aria-label="Anchor for section_two"></a></h2>
 <div class="sectionbody">
 </div>
 </div>
 <div class="sect1">
-<h2 id="section_three"><a class="anchor" href="#section_three" aria-label="Anchor for section_three"></a><a class="link" href="#section_three">4. Section Three</a></h2>
+<h2 id="section_three"><a class="link" href="#section_three">4. Section Three</a><a class="anchor" href="#section_three" aria-label="Anchor for section_three"></a></h2>
 <div class="sectionbody">
 </div>
 </div>
 <div class="sect1">
-<h2 id="comment"><a class="anchor" href="#comment" aria-label="Anchor for comment"></a><a class="link" href="#comment">5. Comment</a></h2>
+<h2 id="comment"><a class="link" href="#comment">5. Comment</a><a class="anchor" href="#comment" aria-label="Anchor for comment"></a></h2>
 <div class="sectionbody">
 <div class="literalblock">
 <div class="content">
@@ -2678,7 +2677,7 @@ Indented block comment
 </div>
 </div>
 <div class="sect1">
-<h2 id="paragraph"><a class="anchor" href="#paragraph" aria-label="Anchor for paragraph"></a><a class="link" href="#paragraph">6. Paragraph</a></h2>
+<h2 id="paragraph"><a class="link" href="#paragraph">6. Paragraph</a><a class="anchor" href="#paragraph" aria-label="Anchor for paragraph"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <div class="title">A Title</div>
@@ -2736,7 +2735,7 @@ This is next line in paragraph.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="alignment"><a class="anchor" href="#alignment" aria-label="Anchor for alignment"></a><a class="link" href="#alignment">6.1. Alignment</a></h3>
+<h3 id="alignment"><a class="link" href="#alignment">6.1. Alignment</a><a class="anchor" href="#alignment" aria-label="Anchor for alignment"></a></h3>
 <div class="paragraph text-left">
 <p>This text is left aligned.</p>
 </div>
@@ -2751,7 +2750,7 @@ This is next line in paragraph.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="line_break"><a class="anchor" href="#line_break" aria-label="Anchor for line_break"></a><a class="link" href="#line_break">6.2. Line break</a></h3>
+<h3 id="line_break"><a class="link" href="#line_break">6.2. Line break</a><a class="anchor" href="#line_break" aria-label="Anchor for line_break"></a></h3>
 <div class="paragraph">
 <p>Rubies are red,<br>
 Topazes are blue.</p>
@@ -2774,7 +2773,7 @@ line break</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="unconstrained_text_formatting"><a class="anchor" href="#unconstrained_text_formatting" aria-label="Anchor for unconstrained_text_formatting"></a><a class="link" href="#unconstrained_text_formatting">7. Unconstrained text formatting</a></h2>
+<h2 id="unconstrained_text_formatting"><a class="link" href="#unconstrained_text_formatting">7. Unconstrained text formatting</a><a class="anchor" href="#unconstrained_text_formatting" aria-label="Anchor for unconstrained_text_formatting"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p><code>__A *B*__</code>: <em>A <strong>B</strong></em></p>
@@ -2809,7 +2808,7 @@ line break</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="single_quote"><a class="anchor" href="#single_quote" aria-label="Anchor for single_quote"></a><a class="link" href="#single_quote">8. Single quote</a></h2>
+<h2 id="single_quote"><a class="link" href="#single_quote">8. Single quote</a><a class="anchor" href="#single_quote" aria-label="Anchor for single_quote"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>'` A single quote without end.</p>
@@ -2826,7 +2825,7 @@ line break</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="subscript_and_superscript"><a class="anchor" href="#subscript_and_superscript" aria-label="Anchor for subscript_and_superscript"></a><a class="link" href="#subscript_and_superscript">9. Subscript and superscript</a></h2>
+<h2 id="subscript_and_superscript"><a class="link" href="#subscript_and_superscript">9. Subscript and superscript</a><a class="anchor" href="#subscript_and_superscript" aria-label="Anchor for subscript_and_superscript"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>H<sub>2</sub>0 H~ 3 ~0 H~4 ~0 H ~ 5~0 H~6 7~0.</p>
@@ -2837,7 +2836,7 @@ line break</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="constrained_text_formatting"><a class="anchor" href="#constrained_text_formatting" aria-label="Anchor for constrained_text_formatting"></a><a class="link" href="#constrained_text_formatting">10. Constrained text formatting</a></h2>
+<h2 id="constrained_text_formatting"><a class="link" href="#constrained_text_formatting">10. Constrained text formatting</a><a class="anchor" href="#constrained_text_formatting" aria-label="Anchor for constrained_text_formatting"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p><code>_A_B</code>: _A_B</p>
@@ -2889,10 +2888,10 @@ paragraph</strong></em>.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="blocks"><a class="anchor" href="#blocks" aria-label="Anchor for blocks"></a><a class="link" href="#blocks">11. Blocks</a></h2>
+<h2 id="blocks"><a class="link" href="#blocks">11. Blocks</a><a class="anchor" href="#blocks" aria-label="Anchor for blocks"></a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="title"><a class="anchor" href="#title" aria-label="Anchor for title"></a><a class="link" href="#title">11.1. Title</a></h3>
+<h3 id="title"><a class="link" href="#title">11.1. Title</a><a class="anchor" href="#title" aria-label="Anchor for title"></a></h3>
 <div class="ulist">
 <div class="title">TODO list</div>
 <ul>
@@ -2911,7 +2910,7 @@ paragraph</strong></em>.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="block_listing"><a class="anchor" href="#block_listing" aria-label="Anchor for block_listing"></a><a class="link" href="#block_listing">12. Block listing</a></h2>
+<h2 id="block_listing"><a class="link" href="#block_listing">12. Block listing</a><a class="anchor" href="#block_listing" aria-label="Anchor for block_listing"></a></h2>
 <div class="sectionbody">
 <div class="listingblock">
 <div class="content">
@@ -2930,7 +2929,7 @@ This is not listing.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="block_literal"><a class="anchor" href="#block_literal" aria-label="Anchor for block_literal"></a><a class="link" href="#block_literal">13. Block literal</a></h2>
+<h2 id="block_literal"><a class="link" href="#block_literal">13. Block literal</a><a class="anchor" href="#block_literal" aria-label="Anchor for block_literal"></a></h2>
 <div class="sectionbody">
 <div class="literalblock">
 <div class="content">
@@ -2955,7 +2954,7 @@ A literal named and trailing characters will become paragraph.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="ordered_lists"><a class="anchor" href="#ordered_lists" aria-label="Anchor for ordered_lists"></a><a class="link" href="#ordered_lists">14. Ordered Lists</a></h2>
+<h2 id="ordered_lists"><a class="link" href="#ordered_lists">14. Ordered Lists</a><a class="anchor" href="#ordered_lists" aria-label="Anchor for ordered_lists"></a></h2>
 <div class="sectionbody">
 <div class="olist arabic">
 <ol class="arabic">
@@ -3178,7 +3177,7 @@ This line separated by comment.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="unordered_lists"><a class="anchor" href="#unordered_lists" aria-label="Anchor for unordered_lists"></a><a class="link" href="#unordered_lists">15. Unordered Lists</a></h2>
+<h2 id="unordered_lists"><a class="link" href="#unordered_lists">15. Unordered Lists</a><a class="anchor" href="#unordered_lists" aria-label="Anchor for unordered_lists"></a></h2>
 <div class="sectionbody">
 <div class="ulist">
 <ul>
@@ -3404,7 +3403,7 @@ This line separated by comment.</p>
 * Two</p>
 </div>
 <div class="sect2">
-<h3 id="custom_markers"><a class="anchor" href="#custom_markers" aria-label="Anchor for custom_markers"></a><a class="link" href="#custom_markers">15.1. Custom markers</a></h3>
+<h3 id="custom_markers"><a class="link" href="#custom_markers">15.1. Custom markers</a><a class="anchor" href="#custom_markers" aria-label="Anchor for custom_markers"></a></h3>
 <div class="ulist square">
 <ul class="square">
 <li>
@@ -3553,7 +3552,7 @@ This line separated by comment.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="checklist"><a class="anchor" href="#checklist" aria-label="Anchor for checklist"></a><a class="link" href="#checklist">15.2. Checklist</a></h3>
+<h3 id="checklist"><a class="link" href="#checklist">15.2. Checklist</a><a class="anchor" href="#checklist" aria-label="Anchor for checklist"></a></h3>
 <div class="ulist checklist">
 <ul class="checklist">
 <li>
@@ -3574,7 +3573,7 @@ This line separated by comment.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="mixed_list"><a class="anchor" href="#mixed_list" aria-label="Anchor for mixed_list"></a><a class="link" href="#mixed_list">16. Mixed list</a></h2>
+<h2 id="mixed_list"><a class="link" href="#mixed_list">16. Mixed list</a><a class="anchor" href="#mixed_list" aria-label="Anchor for mixed_list"></a></h2>
 <div class="sectionbody">
 <div class="olist arabic">
 <ol class="arabic">
@@ -3650,7 +3649,7 @@ This line separated by comment.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="description_list"><a class="anchor" href="#description_list" aria-label="Anchor for description_list"></a><a class="link" href="#description_list">17. Description list</a></h2>
+<h2 id="description_list"><a class="link" href="#description_list">17. Description list</a><a class="anchor" href="#description_list" aria-label="Anchor for description_list"></a></h2>
 <div class="sectionbody">
 <div class="dlist">
 <dl>
@@ -3977,7 +3976,7 @@ Hard drive
 </div>
 </div>
 <div class="sect1">
-<h2 id="question_and_answers"><a class="anchor" href="#question_and_answers" aria-label="Anchor for question_and_answers"></a><a class="link" href="#question_and_answers">18. Question and Answers</a></h2>
+<h2 id="question_and_answers"><a class="link" href="#question_and_answers">18. Question and Answers</a><a class="anchor" href="#question_and_answers" aria-label="Anchor for question_and_answers"></a></h2>
 <div class="sectionbody">
 <div class="qlist qanda">
 <ol>
@@ -3997,7 +3996,7 @@ Hard drive
 </div>
 </div>
 <div class="sect1">
-<h2 id="table"><a class="anchor" href="#table" aria-label="Anchor for table"></a><a class="link" href="#table">19. Table</a></h2>
+<h2 id="table"><a class="link" href="#table">19. Table</a><a class="anchor" href="#table" aria-label="Anchor for table"></a></h2>
 <div class="sectionbody">
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
@@ -4063,7 +4062,7 @@ D</p></td>
 </tbody>
 </table>
 <div class="sect2">
-<h3 id="column_formatting"><a class="anchor" href="#column_formatting" aria-label="Anchor for column_formatting"></a><a class="link" href="#column_formatting">19.1. Column Formatting</a></h3>
+<h3 id="column_formatting"><a class="link" href="#column_formatting">19.1. Column Formatting</a><a class="anchor" href="#column_formatting" aria-label="Anchor for column_formatting"></a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 33.3333%;">
@@ -4151,7 +4150,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="cell_formatting"><a class="anchor" href="#cell_formatting" aria-label="Anchor for cell_formatting"></a><a class="link" href="#cell_formatting">19.2. Cell formatting</a></h3>
+<h3 id="cell_formatting"><a class="link" href="#cell_formatting">19.2. Cell formatting</a><a class="anchor" href="#cell_formatting" aria-label="Anchor for cell_formatting"></a></h3>
 <div class="paragraph">
 <p>Cell duplicated across three columns,</p>
 </div>
@@ -4206,7 +4205,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="header_row"><a class="anchor" href="#header_row" aria-label="Anchor for header_row"></a><a class="link" href="#header_row">19.3. Header row</a></h3>
+<h3 id="header_row"><a class="link" href="#header_row">19.3. Header row</a><a class="anchor" href="#header_row" aria-label="Anchor for header_row"></a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 50%;">
@@ -4243,7 +4242,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="footer_row"><a class="anchor" href="#footer_row" aria-label="Anchor for footer_row"></a><a class="link" href="#footer_row">19.4. Footer row</a></h3>
+<h3 id="footer_row"><a class="link" href="#footer_row">19.4. Footer row</a><a class="anchor" href="#footer_row" aria-label="Anchor for footer_row"></a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 50%;">
@@ -4276,7 +4275,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="table_width"><a class="anchor" href="#table_width" aria-label="Anchor for table_width"></a><a class="link" href="#table_width">19.5. Table width</a></h3>
+<h3 id="table_width"><a class="link" href="#table_width">19.5. Table width</a><a class="anchor" href="#table_width" aria-label="Anchor for table_width"></a></h3>
 <table class="tableblock frame-all grid-all" style="width: 75%;">
 <colgroup>
 <col style="width: 50%;">
@@ -4353,9 +4352,9 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="table_borders"><a class="anchor" href="#table_borders" aria-label="Anchor for table_borders"></a><a class="link" href="#table_borders">19.6. Table borders</a></h3>
+<h3 id="table_borders"><a class="link" href="#table_borders">19.6. Table borders</a><a class="anchor" href="#table_borders" aria-label="Anchor for table_borders"></a></h3>
 <div class="sect3">
-<h4 id="frame"><a class="anchor" href="#frame" aria-label="Anchor for frame"></a><a class="link" href="#frame">19.6.1. Frame</a></h4>
+<h4 id="frame"><a class="link" href="#frame">19.6.1. Frame</a><a class="anchor" href="#frame" aria-label="Anchor for frame"></a></h4>
 <table class="tableblock frame-ends grid-all stretch">
 <colgroup>
 <col style="width: 33.3333%;">
@@ -4421,7 +4420,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect3">
-<h4 id="grids"><a class="anchor" href="#grids" aria-label="Anchor for grids"></a><a class="link" href="#grids">19.6.2. Grids</a></h4>
+<h4 id="grids"><a class="link" href="#grids">19.6.2. Grids</a><a class="anchor" href="#grids" aria-label="Anchor for grids"></a></h4>
 <table class="tableblock frame-all grid-rows stretch">
 <colgroup>
 <col style="width: 33.3333%;">
@@ -4488,7 +4487,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect2">
-<h3 id="striping"><a class="anchor" href="#striping" aria-label="Anchor for striping"></a><a class="link" href="#striping">19.7. Striping</a></h3>
+<h3 id="striping"><a class="link" href="#striping">19.7. Striping</a><a class="anchor" href="#striping" aria-label="Anchor for striping"></a></h3>
 <table class="tableblock frame-all grid-all stripes-even stretch">
 <colgroup>
 <col style="width: 33.3333%;">
@@ -4595,7 +4594,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="orientation"><a class="anchor" href="#orientation" aria-label="Anchor for orientation"></a><a class="link" href="#orientation">19.8. Orientation</a></h3>
+<h3 id="orientation"><a class="link" href="#orientation">19.8. Orientation</a><a class="anchor" href="#orientation" aria-label="Anchor for orientation"></a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 50%;">
@@ -4630,7 +4629,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="table_caption"><a class="anchor" href="#table_caption" aria-label="Anchor for table_caption"></a><a class="link" href="#table_caption">19.9. Table caption</a></h3>
+<h3 id="table_caption"><a class="link" href="#table_caption">19.9. Table caption</a><a class="anchor" href="#table_caption" aria-label="Anchor for table_caption"></a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <caption class="title">Table 1. A formal table</caption>
 <colgroup>
@@ -4690,7 +4689,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="escaping_the_cell_separator"><a class="anchor" href="#escaping_the_cell_separator" aria-label="Anchor for escaping_the_cell_separator"></a><a class="link" href="#escaping_the_cell_separator">19.10. Escaping the Cell separator</a></h3>
+<h3 id="escaping_the_cell_separator"><a class="link" href="#escaping_the_cell_separator">19.10. Escaping the Cell separator</a><a class="anchor" href="#escaping_the_cell_separator" aria-label="Anchor for escaping_the_cell_separator"></a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 50%;">
@@ -4719,7 +4718,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="horizontal_rules"><a class="anchor" href="#horizontal_rules" aria-label="Anchor for horizontal_rules"></a><a class="link" href="#horizontal_rules">20. Horizontal rules</a></h2>
+<h2 id="horizontal_rules"><a class="link" href="#horizontal_rules">20. Horizontal rules</a><a class="anchor" href="#horizontal_rules" aria-label="Anchor for horizontal_rules"></a></h2>
 <div class="sectionbody">
 <hr>
 <div class="paragraph">
@@ -4741,7 +4740,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="page_break"><a class="anchor" href="#page_break" aria-label="Anchor for page_break"></a><a class="link" href="#page_break">21. Page break</a></h2>
+<h2 id="page_break"><a class="link" href="#page_break">21. Page break</a><a class="anchor" href="#page_break" aria-label="Anchor for page_break"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>Before page break.</p>
@@ -4753,7 +4752,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="urls"><a class="anchor" href="#urls" aria-label="Anchor for urls"></a><a class="link" href="#urls">22. URLs</a></h2>
+<h2 id="urls"><a class="link" href="#urls">22. URLs</a><a class="anchor" href="#urls" aria-label="Anchor for urls"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p><a href="https://asciidoctor.org" class="bare">https://asciidoctor.org</a>.</p>
@@ -4782,7 +4781,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="anchors"><a class="anchor" href="#anchors" aria-label="Anchor for anchors"></a><a class="link" href="#anchors">23. Anchors</a></h2>
+<h2 id="anchors"><a class="link" href="#anchors">23. Anchors</a><a class="anchor" href="#anchors" aria-label="Anchor for anchors"></a></h2>
 <div class="sectionbody">
 <div id="notice" class="paragraph">
 <p>This paragraph gets a lot of attention.</p>
@@ -4810,21 +4809,21 @@ D</p></td>
 </ul>
 </div>
 <div class="sect2">
-<h3 id="version-4_9"><a class="anchor" href="#version-4_9" aria-label="Anchor for version-4_9"></a><a class="link" href="#version-4_9">23.1. Version 4.9</a></h3>
+<h3 id="version-4_9"><a class="link" href="#version-4_9">23.1. Version 4.9</a><a class="anchor" href="#version-4_9" aria-label="Anchor for version-4_9"></a></h3>
 </div>
 <div class="sect2">
-<h3 id="version-4_10"><a class="anchor" href="#version-4_10" aria-label="Anchor for version-4_10"></a><a class="link" href="#version-4_10">23.2. <a id="current"></a>Version 4.10</a></h3>
+<h3 id="version-4_10"><a class="link" href="#version-4_10">23.2. <a id="current"></a>Version 4.10</a><a class="anchor" href="#version-4_10" aria-label="Anchor for version-4_10"></a></h3>
 </div>
 <div class="sect2">
-<h3 id="which-one"><a class="anchor" href="#which-one" aria-label="Anchor for which-one"></a><a class="link" href="#which-one">23.3. Version 4.11<a id="version-4_11"></a></a></h3>
+<h3 id="which-one"><a class="link" href="#which-one">23.3. Version 4.11<a id="version-4_11"></a></a><a class="anchor" href="#which-one" aria-label="Anchor for which-one"></a></h3>
 </div>
 </div>
 </div>
 <div class="sect1">
-<h2 id="cross_references"><a class="anchor" href="#cross_references" aria-label="Anchor for cross_references"></a><a class="link" href="#cross_references">24. Cross references</a></h2>
+<h2 id="cross_references"><a class="link" href="#cross_references">24. Cross references</a><a class="anchor" href="#cross_references" aria-label="Anchor for cross_references"></a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="internal"><a class="anchor" href="#internal" aria-label="Anchor for internal"></a><a class="link" href="#internal">24.1. Internal</a></h3>
+<h3 id="internal"><a class="link" href="#internal">24.1. Internal</a><a class="anchor" href="#internal" aria-label="Anchor for internal"></a></h3>
 <div class="paragraph">
 <p>Cross reference with ID <a href="#_anchors">_anchors</a>.</p>
 </div>
@@ -4841,7 +4840,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="include"><a class="anchor" href="#include" aria-label="Anchor for include"></a><a class="link" href="#include">25. Include</a></h2>
+<h2 id="include"><a class="link" href="#include">25. Include</a><a class="anchor" href="#include" aria-label="Anchor for include"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>This is inside the fragment1.adoc.</p>
@@ -4907,10 +4906,10 @@ type anchor struct {
 </div>
 </div>
 <div class="sect1">
-<h2 id="images"><a class="anchor" href="#images" aria-label="Anchor for images"></a><a class="link" href="#images">26. Images</a></h2>
+<h2 id="images"><a class="link" href="#images">26. Images</a><a class="anchor" href="#images" aria-label="Anchor for images"></a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="block_images"><a class="anchor" href="#block_images" aria-label="Anchor for block_images"></a><a class="link" href="#block_images">26.1. Block images</a></h3>
+<h3 id="block_images"><a class="link" href="#block_images">26.1. Block images</a><a class="anchor" href="#block_images" aria-label="Anchor for block_images"></a></h3>
 <div class="imageblock">
 <div class="content">
 <img src="sunset.jpg" alt="sunset">
@@ -4990,7 +4989,7 @@ This is become paragraph.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="float_group"><a class="anchor" href="#float_group" aria-label="Anchor for float_group"></a><a class="link" href="#float_group">26.2. Float group</a></h3>
+<h3 id="float_group"><a class="link" href="#float_group">26.2. Float group</a><a class="anchor" href="#float_group" aria-label="Anchor for float_group"></a></h3>
 <div class="openblock float-group">
 <div class="content">
 <div class="imageblock left">
@@ -5012,7 +5011,7 @@ This is become paragraph.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="inline_image"><a class="anchor" href="#inline_image" aria-label="Anchor for inline_image"></a><a class="link" href="#inline_image">26.3. Inline image</a></h3>
+<h3 id="inline_image"><a class="link" href="#inline_image">26.3. Inline image</a><a class="anchor" href="#inline_image" aria-label="Anchor for inline_image"></a></h3>
 <div class="paragraph">
 <p><span class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg" alt="Linux" width="25" height="35"></span></p>
 </div>
@@ -5030,7 +5029,7 @@ You can find Linux everywhere these days!</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="block_open"><a class="anchor" href="#block_open" aria-label="Anchor for block_open"></a><a class="link" href="#block_open">27. Block open</a></h2>
+<h2 id="block_open"><a class="link" href="#block_open">27. Block open</a><a class="anchor" href="#block_open" aria-label="Anchor for block_open"></a></h2>
 <div class="sectionbody">
 <div class="openblock">
 <div class="title">Section inside</div>
@@ -5043,7 +5042,7 @@ You can find Linux everywhere these days!</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="video"><a class="anchor" href="#video" aria-label="Anchor for video"></a><a class="link" href="#video">28. Video</a></h2>
+<h2 id="video"><a class="link" href="#video">28. Video</a><a class="anchor" href="#video" aria-label="Anchor for video"></a></h2>
 <div class="sectionbody">
 <div class="videoblock">
 <div class="title">Video without options</div>
@@ -5090,7 +5089,7 @@ Your browser does not support the video tag.
 </div>
 </div>
 <div class="sect1">
-<h2 id="audio"><a class="anchor" href="#audio" aria-label="Anchor for audio"></a><a class="link" href="#audio">29. Audio</a></h2>
+<h2 id="audio"><a class="link" href="#audio">29. Audio</a><a class="anchor" href="#audio" aria-label="Anchor for audio"></a></h2>
 <div class="sectionbody">
 <div class="audioblock">
 <div class="content">
@@ -5102,10 +5101,10 @@ Your browser does not support the audio tag.
 </div>
 </div>
 <div class="sect1">
-<h2 id="admonition"><a class="anchor" href="#admonition" aria-label="Anchor for admonition"></a><a class="link" href="#admonition">30. Admonition</a></h2>
+<h2 id="admonition"><a class="link" href="#admonition">30. Admonition</a><a class="anchor" href="#admonition" aria-label="Anchor for admonition"></a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="line_admonition"><a class="anchor" href="#line_admonition" aria-label="Anchor for line_admonition"></a><a class="link" href="#line_admonition">30.1. Line admonition</a></h3>
+<h3 id="line_admonition"><a class="link" href="#line_admonition">30.1. Line admonition</a><a class="anchor" href="#line_admonition" aria-label="Anchor for line_admonition"></a></h3>
 <div class="paragraph">
 <p>Admonition between a paragraph.
 WARNING: Wolpertingers are known to nest in server racks.
@@ -5192,7 +5191,7 @@ admonition followed by list
 </div>
 </div>
 <div class="sect2">
-<h3 id="style_admonition"><a class="anchor" href="#style_admonition" aria-label="Anchor for style_admonition"></a><a class="link" href="#style_admonition">30.2. Style admonition</a></h3>
+<h3 id="style_admonition"><a class="link" href="#style_admonition">30.2. Style admonition</a><a class="anchor" href="#style_admonition" aria-label="Anchor for style_admonition"></a></h3>
 <div class="admonitionblock important">
 <table>
 <tr>
@@ -5278,7 +5277,7 @@ Literal paragraph with admonition.
 </div>
 </div>
 <div class="sect2">
-<h3 id="icons"><a class="anchor" href="#icons" aria-label="Anchor for icons"></a><a class="link" href="#icons">30.3. Icons</a></h3>
+<h3 id="icons"><a class="link" href="#icons">30.3. Icons</a><a class="anchor" href="#icons" aria-label="Anchor for icons"></a></h3>
 <div class="admonitionblock warning">
 <table>
 <tr>
@@ -5296,7 +5295,7 @@ Enter at your own risk.
 </div>
 </div>
 <div class="sect1">
-<h2 id="sidebar"><a class="anchor" href="#sidebar" aria-label="Anchor for sidebar"></a><a class="link" href="#sidebar">31. Sidebar</a></h2>
+<h2 id="sidebar"><a class="link" href="#sidebar">31. Sidebar</a><a class="anchor" href="#sidebar" aria-label="Anchor for sidebar"></a></h2>
 <div class="sectionbody">
 <div class="sidebarblock">
 <div class="content">
@@ -5326,7 +5325,7 @@ for producing professional documents like DocBook and LaTeX.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="example"><a class="anchor" href="#example" aria-label="Anchor for example"></a><a class="link" href="#example">32. Example</a></h2>
+<h2 id="example"><a class="link" href="#example">32. Example</a><a class="anchor" href="#example" aria-label="Anchor for example"></a></h2>
 <div class="sectionbody">
 <div class="exampleblock">
 <div class="title">Example 1. Sample document</div>
@@ -5351,7 +5350,7 @@ This guide provides...</pre>
 </div>
 </div>
 <div class="sect1">
-<h2 id="quote"><a class="anchor" href="#quote" aria-label="Anchor for quote"></a><a class="link" href="#quote">33. Quote</a></h2>
+<h2 id="quote"><a class="link" href="#quote">33. Quote</a><a class="anchor" href="#quote" aria-label="Anchor for quote"></a></h2>
 <div class="sectionbody">
 <div class="quoteblock">
 <blockquote>
@@ -5390,7 +5389,7 @@ Everybody remember where we parked.
 </div>
 </div>
 <div class="sect2">
-<h3 id="quoted_paragraph"><a class="anchor" href="#quoted_paragraph" aria-label="Anchor for quoted_paragraph"></a><a class="link" href="#quoted_paragraph">33.1. Quoted paragraph</a></h3>
+<h3 id="quoted_paragraph"><a class="link" href="#quoted_paragraph">33.1. Quoted paragraph</a><a class="anchor" href="#quoted_paragraph" aria-label="Anchor for quoted_paragraph"></a></h3>
 <div class="quoteblock">
 <blockquote>
 I hold it that a little rebellion now and then is a good thing,
@@ -5451,7 +5450,7 @@ a quote
 </div>
 </div>
 <div class="sect1">
-<h2 id="verse"><a class="anchor" href="#verse" aria-label="Anchor for verse"></a><a class="link" href="#verse">34. Verse</a></h2>
+<h2 id="verse"><a class="link" href="#verse">34. Verse</a><a class="anchor" href="#verse" aria-label="Anchor for verse"></a></h2>
 <div class="sectionbody">
 <div class="verseblock">
 <pre class="content">The fog comes
@@ -5477,13 +5476,13 @@ and then moves on.</pre>
 </div>
 </div>
 <div class="sect1">
-<h2 id="passthrough"><a class="anchor" href="#passthrough" aria-label="Anchor for passthrough"></a><a class="link" href="#passthrough">35. Passthrough</a></h2>
+<h2 id="passthrough"><a class="link" href="#passthrough">35. Passthrough</a><a class="anchor" href="#passthrough" aria-label="Anchor for passthrough"></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p><code><em>A <strong>B</strong></em>+</code></p>
 </div>
 <div class="sect2">
-<h3 id="block_passthrough"><a class="anchor" href="#block_passthrough" aria-label="Anchor for block_passthrough"></a><a class="link" href="#block_passthrough">35.1. Block passthrough</a></h3>
+<h3 id="block_passthrough"><a class="link" href="#block_passthrough">35.1. Block passthrough</a><a class="anchor" href="#block_passthrough" aria-label="Anchor for block_passthrough"></a></h3>
 <video poster="images/movie-reel.png">
   <source src="videos/writing-zen.webm" type="video/webm">
 </video>
@@ -5491,14 +5490,14 @@ and then moves on.</pre>
 </div>
 </div>
 <div class="sect1">
-<h2 id="section_discrete"><a class="anchor" href="#section_discrete" aria-label="Anchor for section_discrete"></a><a class="link" href="#section_discrete">36. Section Discrete</a></h2>
+<h2 id="section_discrete"><a class="link" href="#section_discrete">36. Section Discrete</a><a class="anchor" href="#section_discrete" aria-label="Anchor for section_discrete"></a></h2>
 <div class="sectionbody">
 <h3 id="discrete" class="discrete">Discrete</h3>
 <div class="paragraph">
 <p>This is content of discrete section.</p>
 </div>
 <div class="sect2">
-<h3 id="after_discrete"><a class="anchor" href="#after_discrete" aria-label="Anchor for after_discrete"></a><a class="link" href="#after_discrete">36.1. After discrete</a></h3>
+<h3 id="after_discrete"><a class="link" href="#after_discrete">36.1. After discrete</a><a class="anchor" href="#after_discrete" aria-label="Anchor for after_discrete"></a></h3>
 <div class="sidebarblock">
 <div class="content">
 <div class="paragraph">