Adding fragmention links to my website
Published on under the IndieWeb category.
I like when websites provide direct links to headings on the page. In Mozilla Developer Network documentation, headings are clickable. When clicked, the URL of the page changes to include a hashtag (#) at the end. This hashtag corresponds to the HTML ID of the heading on a page. When you visit the URL directly, the page loads then moves you to the heading you clicked on.
An extension of this idea is the “fragmention.” Fragmentions let you link to a particular string of text on a document. This is useful if you want to link to a particular paragraph rather than an entire section. With direct links to a text in a paragraph, a website can apply styling to highlight either a particular string or a whole paragraph. I like this idea. Imagine being able to link to exactly the part of a document rather than conveying “click this link, then read the third sentence two paragraphs down.”
The specification for fragmentions lives on the IndieWeb wiki. It specifies a syntax where the text after a hashtag at the end of a page tells the web page to navigate to a particular string. This happens after checking for elements whose ID is equal to the text after the hashtag, which is the feature that enables MDN’s clickable headings and many other changes.
It is up to site owners to implement how fragmentions should be processed. I decided to build a simple implementation for this website so I can link directly to text on a page. I decided that this feature should only work for paragraphs within an article tag. This means a fragmention will not link to an item on the page that is not related to the main text content on the page (the article). Fragmentions refer to the first instance of a string of text in the article tag.
Here is an example of a fragmention link on this page:
https://jamesg.blog/2022/10/11/fragmention-links/#implement+fragmentions
(Note: Please open the link in a new tab. The link will not work on this page because the script does not yet adapt to URL changes in the same page session.)
In a fragmention, space characters are denoted as a plus sign (+). This example refers to the first instance of “implement fragmentions” on this web page. When clicked, this link load the page and scroll directly to that text. The paragraph is highlighted with a different colour than the foreground so as to make it clear the section of text to which the fragmention refers.
With some minor tweaks, the fragmention could even link to individual words or sentences on a page. Highlighting individual words would be useful for pointing out typos on a page or interesting words. Highlighting sentences lets you refer to a specific sentence that you find interesting, rather than having to link to the whole paragraph.
My fragmention implementation is open-source on GitHub in a repository called fragmention.js. The code is placed in the public domain so you are free to copy and change it as you wish. The code is quite simple: the code checks for the occurance of the parsed text in the fragmention link (per the specification), then applies a CSS class to the the first instance of the text found. If you have any suggestions on how I can improve the implementation, let me know!