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.

I’m using the fragmention support to power the index of the book. It relies on JavaScript to work though, so Matthew has come to the rescue again and created a version of the site with IDs for each item linked from the index (I must get around to merging that).

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.

Update: And fixed! Thanks to Lee.

Have you published a response to this? :

Responses

Kevin Marks

me too, but when I suggested it I was accused of taking over the whole namespace. Time to try again?

# Posted by Kevin Marks on Friday, December 23rd, 2016 at 5:54pm

Louis Lazaris

Yep, I saw that. Wanted to link that too but 140 chars, y’know. :)

11 Likes

# Liked by Andressa Costa on Monday, December 19th, 2016 at 2:53pm

# Liked by Shane Hudson on Friday, December 23rd, 2016 at 1:13pm

# Liked by Ari Palo on Friday, December 23rd, 2016 at 2:19pm

# Liked by Simon St.Laurent on Friday, December 23rd, 2016 at 2:19pm

# Liked by Katie Sylor-Miller on Friday, December 23rd, 2016 at 2:19pm

# Liked by вкαя∂εℓℓ on Friday, December 23rd, 2016 at 2:49pm

# Liked by Baldur Bjarnason on Friday, December 23rd, 2016 at 3:17pm

# Liked by Hubert 😎 SABLONNIÈRE on Friday, December 23rd, 2016 at 7:26pm

# Liked by Simeon.__proto__ on Friday, December 23rd, 2016 at 8:21pm

# Liked by saito` on Wednesday, January 11th, 2017 at 7:50pm

# Liked by वैभव || vaibhav on Wednesday, January 11th, 2017 at 8:23pm

1 Bookmark

# Bookmarked by Aaron Parecki on Monday, December 19th, 2016 at 3:52pm