Usability: Clickable heading links

Since years each heading in my blog posts has an id attribute, which makes it possible to link to the very caption: awstats-multihost.htm#setup directly jumps to the "Setup" section.

CSS​

Unfortunately it's hard to make people aware of them because they are not visible, except when looking at the source code. So I automatically showed them when the mouse moves over a heading with a tiny bit of CSS:

h1[id]:hover:after, h2[id]:hover:after, h3[id]:hover:after,
h4[id]:hover:after, h5[id]:hover:after, h6[id]:hover:after {
    content: " #"attr(id);
}

It worked, but wasn't good enough - you could not just copy the full link address. Adding HTML tags via CSS is unfortunately not possible, so I looked for another solution.

Google Code​

The folks at code.google.com have the - in my eyes - best solution to the problem: When moving the mouse over a heading, a ¶ is shown after it. It is linked, and you can click it or copy it's link easily. Try it.

How to implement it​

Within the h[1-6] tag, a link to this very heading is added - without any textual content, to make it invisible when the page loads and the CSS is not there yet:

<h1 id="hexdump">hexdump<a class="anchorlink" href="#hexdump"></a></h1>

Via CSS, the pilcrow is shown as :before the link:

h1[id]:hover a.anchorlink:before {
    content: "\00B6";/* pilcrow */
}

That's basically everything you need.

Styling​

I styled the link and the alinea a bit, so that in the end my CSS looks like:

/* show IDs for anchors */
h1[id]:hover a.anchorlink:before,
h2[id]:hover a.anchorlink:before,
h3[id]:hover a.anchorlink:before,
h4[id]:hover a.anchorlink:before,
h5[id]:hover a.anchorlink:before,
h6[id]:hover a.anchorlink:before {
    content: "\00B6";/* pilcrow */
    color: #888;
    font-size: smaller;
}
a.anchorlink {
    text-decoration: none;
    margin-left: 0.5em;
    font-size: smaller;
}

Adding the links automatically​

My blog is purely hand-written HTML, but manually adding all the links is just too much work - and I might as well find an even better linking solution in the future.

Automatically adding the empty links to the headings is possible with a couple lines of PHP:

<?php
$x = simplexml_load_file(__DIR__ . '/raw/auerswald-firmware.htm');
$headings = $x->xpath('//*[name()="h1" or name()="h2"][@id]');
 
foreach ($headings as $heading) {
    $a = $heading->addChild('a');
    $a->addAttribute('class', 'anchorlink');
    $a->addAttribute('href', '#' . $heading['id']);
}
 
echo $x->asXML();
?>

Implementations​

• WP Anchor Header - Wordpress plugin which does what this blog post describes.