From 9bcaf81ff848e875e54ab80ae43ab0ef1b349824 Mon Sep 17 00:00:00 2001
From: Moritz Bunkus <mo@bunkus.online>
Date: Sat, 3 Feb 2024 12:50:46 +0100
Subject: [PATCH] HTML man pages: show anchor elements for headings & options
 on hovering

---
 doc/stylesheets/docbook-to-html.xsl |  4 +++-
 doc/stylesheets/mkvtoolnix-doc.css  | 27 ++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/doc/stylesheets/docbook-to-html.xsl b/doc/stylesheets/docbook-to-html.xsl
index 695449f81..ca6da4938 100644
--- a/doc/stylesheets/docbook-to-html.xsl
+++ b/doc/stylesheets/docbook-to-html.xsl
@@ -80,6 +80,7 @@
       <xsl:number format="1. " value="position()"/>
       <xsl:value-of select="title"/>
      </a>
+     <a class="headerlink" href="#{$anchor}" title="Link to this heading">#</a>
     </h1>
 
     <xsl:apply-templates/>
@@ -96,6 +97,7 @@
     <xsl:number level="multiple" format="1. " count="refsynopsisdiv|refsect1|refsect2"/>
     <xsl:value-of select="title"/>
    </a>
+   <a class="headerlink" href="#{$anchor}" title="Link to this heading">#</a>
   </h2>
 
   <xsl:apply-templates/>
@@ -140,7 +142,7 @@
   <tr>
    <td class="varlistoption">
     <xsl:choose>
-     <xsl:when test="@id"><a name="{@id}"><xsl:apply-templates select="term"/></a></xsl:when>
+     <xsl:when test="@id"><a name="{@id}"><xsl:apply-templates select="term"/></a><a class="headerlink" href="#{@id}" title="Link to this option">#</a></xsl:when>
      <xsl:otherwise><xsl:apply-templates select="term"/></xsl:otherwise>
     </xsl:choose>
    </td>
diff --git a/doc/stylesheets/mkvtoolnix-doc.css b/doc/stylesheets/mkvtoolnix-doc.css
index a908c403b..e6c2c741a 100644
--- a/doc/stylesheets/mkvtoolnix-doc.css
+++ b/doc/stylesheets/mkvtoolnix-doc.css
@@ -155,4 +155,29 @@ td p:first-child {
 
 td p:last-child {
   margin-bottom: 0;
-}
\ No newline at end of file
+}
+
+a.headerlink {
+  visibility: hidden;
+  font-size: .8em;
+  margin-left: .2em;
+  opacity: .7;
+  padding: 0 4px;
+  text-decoration: none;
+  transition: all .2s ease-out;
+  user-select: none;
+}
+
+h1:hover > a.headerlink,
+h2:hover > a.headerlink,
+h3:hover > a.headerlink,
+h4:hover > a.headerlink,
+h5:hover > a.headerlink,
+h6:hover > a.headerlink,
+dt:hover > a.headerlink,
+td:hover > a.headerlink,
+caption:hover > a.headerlink,
+p.caption:hover > a.headerlink,
+div.code-block-caption:hover > a.headerlink {
+  visibility: visible;
+}