It looks (a more complex version of) fragmention might be coming to Chrome.
Tuesday, September 3rd, 2019
Monday, December 19th, 2016
Deep linking with fragmentions
When I was marking up Resilient Web Design I wanted to make sure that people could link to individual sections within a chapter. So I added IDs to all the headings. There’s no UI to expose that though—like the hover pattern that some sites use to show that something is linkable—so unless you know the IDs are there, there’s no way of getting at them other than “view source.”
But if you’re reading a passage in Resilient Web Design and you highlight some text, you’ll notice that the URL updates to include that text after a hash symbol. If that updated URL gets shared, then anyone following it should be sent straight to that string of text within the page. That’s fragmentions in action:
Fragmentions find the first matching word or phrase in a document and focus its closest surrounding element. The match is determined by the case-sensitive string following the # (or ## double-hash)
It’s a similar idea to Eric and Simon’s proposal to use CSS selectors as fragment identifiers, but using plain text instead. You can find out more about the genesis of fragmentions from Kevin. I’m using Jonathon Neal’s script with some handy updates from Matthew.
The fragmention functionality is ticking along nicely with one problem…
I’ve tweaked the typography of Resilient Web Design to within an inch of its life, including a crude but effective technique to avoid widowed words at the end of a paragraph. The last two words of every paragraph are separated by a UTF-8 no-break space character instead of a regular space.
That solves the widowed words problem, but it confuses the fragmention script. Any selected text that includes the last two words of a paragraph fails to match. I’ve tried tweaking the script, but I’m stumped. If you fancy having a go, please have at it.
Sunday, July 6th, 2014
Thursday, May 15th, 2014
Instapaper is going to add support for fragmentions. Seems like a match made in heaven.
Thursday, April 17th, 2014
I really like the way that Cennydd emphasises the importance of being able to explain the reasoning behind your design decisions:
If you haven’t already, sometime in your career you’ll meet an awkward sonofabitch who wants to know why every pixel is where you put it. You should be able to articulate an answer for that person—yes, for every pixel.
That reminds me of something I read fourteen(!) years ago that’s always stayed with me. In an interview in Digital Web magazine, Joshua Davis was asked “What would you say is beauty in design?” His answer:
Being able to justify every pixel.
It’s called fragmentions and it builds on the work done by Eric and Simon. They proposed using CSS selectors as fragment identifiers. Kevin’s idea is to use the words within the text as anchor points (like an automatic Command+F):
To tell these apart from an id link, I suggest using a double hash - ## for the fragment, and then words that identify the text. For example:
That link will work in your browser because of this script, which Kevin has added to his site. I may well add that script to this site too.
Fragmentions are a nice idea and—to bring it back to Cennydd’s point—nicely explained.