Firefox is my browser of choice. I really like Opera, and it has excellent SVG support, but I’m a creature of habit, and I can’t shake using Firefox. One of my favorite things about it is that you can trick it out to fit how you use it. I’ve installed quite a few Extensions (community-made bits of browser functionality) that I use all the time. They have become such a part of my browsing experience that I have even forgotten they aren’t standard, and when I had a hard-drive crash and had to reinstall, I was a bit at a loss why FF didn’t have some of the core functionality I’d come to rely on… until I reinstalled the extensions. I’ve even made one for my last employer, and in my spare time, I’ve been working on an image- and SVG-specific extension for Firefox, which I’ll be releasing shortly.

One of the other things I love about FF is the context-menu option for “View Selection Source”. I use it to figure out how certain bits of a document are marked up (though I also use Firebug for that). In my standards work, I also find myself needing to cite particular sections of large documents, such as technical specifications or documentation. I cite them to point out errors, to show where a bit of functionality is specified, to help out people with questions by pointing them to a reference, to defend my interpretation of a technical issue, and all sorts of other geekademic occasions. Since these documents are usually quite long, it’s necessary to get as close as possible to the relevant section when supplying a link, and fortunately, specifications tend to be very well marked-up, with logical document structure and plenty of ID attributes for ease of linking. View Selection Source is really great for that, because I can select a section header, open up the partial source in a new window, find the id, select it, append it to the original URL preceded by an octothorpe (“#”), and use that as a reference link; of course, sometimes the id isn’t where you expected it to be, and you need to look around for it a bit…

Okay, you see my problem. As relatively easy as View Selection Source makes the task, it’s still a bit… shall we say, labor-intensive. To be honest, it’s not quite as cumbersome as it sounds, and I’m so used to having to kluge around like that when programming that it somehow never occurred to me that it could be easier.

It just got easier. I spent a few hours putting together a Firefox Extension that automates this process. You just right-click on the section you want to link to, and select “Copy section link”. Idiri, my extension, automagically finds the nearest preceding link to where you’ve clicked, and copies it to your clipboard. It also highlights the element that it found an id on, as a visual indicator that it’s done its job and to let you know where you’ll be linking to. Simple.

You can download Idiri (from “id” for identifier, and “iri” for “internationalized resource identifier”, a fancy way to say URL or Web address), and let me know what you think. More details below…

I don’t know if this will be generally useful to most people. I think other standardistas will use it for specifications. I’m not sure how well (or how consistently) other documents of the Web are marked up, so it could be kind of a niche use case, but I’m hoping it does someone else some good. I know it doesn’t work with Wikipedia (or any other MediaWiki-based site) because they use a rather eclectic markup, but maybe I’ll solve that in a future version.

In case you don’t quite know what I’m talking about as far as section linking goes, let me explain. You’ve probably seen this before: you click on a link, and it jumps to a specific section of a page (in the same page or in a new page), rather than the top. The Web address looks something like this: http://www.w3.org/TR/html401/intro/intro.html#fragment-uri. The last bit, after the “#”, is called a “fragment identifier”, and it indicates a subsection of the document. Hidden behind what shows in the browser, there is code called markup that classifies the text (which may change the visual appearance, such as making it bold with a larger font size, or may just tell the browser to treat it special without changing how it looks). There’s a couple different ways of marking a section as linkable in this way, but the modern method is to simply use an id attribute on any element (Wikipedia uses the older way, an <anchor> element, for backwards compatibility with older browsers). Idiri finds these ids systematically, by looking first at the element you clicked on, then at each of the previous elements, and then to the parent element, etc., until it finds an ID; if it doesn’t find any, it just gives you the bare IRI.

Comment and suggestions are most welcome. Also, if you can think of a way to make it accessible, please let me know, since right now it’s only a context-menu option.

Update: I thought of a reasonably clean way to catch the majority of cases where an anchor element is used instead of an ID (as in MediaWiki), so I updated Idiri. I’m sure it still won’t catch all cases, but it should work a little better.