Breathing new life into URL hash fragments
Refrag strives to reinvent a somehow forgotten idea of fragment identifiers
(URL parts after hash #) as references to portions of HTML documents.
A traditional approach is to define an anchor in a form of <a> tag,
e.g. <a name="foo">. This would enable #foo to be used
as fragment identifier. As a result, an URL such as http://www.example.com/#foo
would refer to a place in example.com webpage where the anchor was defined.
Unfortunately, usage of HTML anchors seems to be on decline. If particular website does not use inner links for itself, it's not uncommon that it lacks anchors even for its headings. As a consequence, it is normally impossible to construct URLs that point to a particular fragment, or section of such page.
Refrag attempts to address this issue. Rather than requiring anchors to be placed manually, Refrag utilizes website's existing markup and text. The idea is to have URL hash that approximately speficies where a particular portion of document is located.
I'm actually scratching my own itch here. Being a blogger, I often encounter a situation where I'd like to link my readers to a specific section, paragraph, or even sentence, in external article. It is rarely possible, since the necessary HTML anchors are often missing. And even if they are present for section headers, smaller portions of the text are pretty much never "indexed" this way.
And frankly, they shouldn't need to be. The content is already there, and its structure is organized by the markup itself. The only missing piece is a way to refer to that content, with precision sufficient for practical purposes.
Refrag uses a special form of fragment identifier that starts with a caret sign (^),
right after the hash (#). This results in URLs similar to:
http://www.example.com/article/523#^Text%20within%20article
The text after #^ "hashbang" is a content locator, refering to a portion of document.
As in example above, it can be just a text occurring somewhere on the website. Typing such URL
in a browser should result in loading the desired page and scrolling down to the first occurrence
of specified text.
It is also possible to specify a tag where we'd like the text to be found. This is especially useful
when refering to headings, which usually are enclosed within the h1 or h2
elements (or h3, etc.).
To do that, a name of HTML tag should be put at the beginning of "hashbang", and another caret
(^) sign shall separate it from the rest of the text. The full URL might therefore
look like this:
http://www.example.com/article/523#^h2^A header
In the rare cases when the caret sign itself is part of matched text, it is possible to escape it - just use two carets:
http://www.example.com/article/523#^code^e^^(pi*i)+1=0
This URL would match the text e^(pi*i)+1=0 inside a code element.
refrag.js implements the mechanism described above as a drop-in JS script. The script can be
painlessly included within a website, making it a potential target for #^ links:
<script type="text/javascript" src="http://git.io/refrag.min.js"></script>When the page is loaded, refrag.js will inspect the URL and search for a hash-caret sequence. If it's present, it'll take the user to the appropriate page fragment.
The project is in beta state as of now. There are still some issues to be addressed and features to be implemented.
If you like the idea of Refrag and how it could improve the Web, don't hesitate to contribute :)