Indie Web Fragmention support added here

Highlighted Pen Marks in Book

I saw an excellent article on Fragmentions on Medium, written by Kevin Marks. One of the big gotchas with telling someone to go look for information on a web page is that the paragraph you want to point at is often a far distance down – so the user has to go scanning the page to find the text you reference.

Kevin proposed adding two hashes to the end of a web page URL, where you could park words to look for in the text of the page. So, for example, if I wanted to send someone to the paragraph in my recent blog post about Police Statistics where I mentioned “crimes solved”, i’d cite a URL of:

and off it would go to that page, scroll down to that text and highlight the location where it resides. Job done. Fortunately, he mentioned this on an Indie Web IRC channel, and Jonathan Neal duly coded it up in short order. One implementation as a Chrome Extension, so you added support for this structure to any web site you visit using Chrome. The other implementation was for a single web site, so that anyone on any browser – without any special extension added – nevertheless could get the same effect immediately. You can download this off Github here.

I’ve implemented the web based Javascript version to work all across A few examples:

You get the idea. It works even without the final slash character before the ## – that is just a feature of the default URLs on my blog. You can do this for any URL on my blog – so feel free to refer away!

Footnote: I’ve implemented this as a custom child theme on my WordPress network site, leaving the fragmention.js file in the parent themes Javascript subdirectory, then adding the loading code and associated CSS into a copy of the header.php file in the child theme directory, just above the call to wp_head(). I avoid calling in the Javascript if the page being rendered is an Admin/Dashboard related page:

Fragmention Code in header.php

File style.css in the child theme directory just inherits the style.css content from the parent theme:

Code in style.css in WP Child Theme

Things should get easier as there are already at least two WordPress plugins queued up for approval to do all this automagically for any WordPress site (cited here). In the meantime, my handcoded version seems to work okay. Enjoy!

Leave a Reply