IndieWebCamp is a 2-day creator camp focused on growing the independent web

fragmention

A fragmention is an experimental extension to a URL to link and cite individual words or phrases of a document using double-hash anchors (##).

Example:

Contents


Behavior

Fragmentions find the first matching word or phrase in a document and focuses its closest surrounding element. The match is determined by the case-sensitive string following the ## double-hash. The closest surrounding element may be a span, paragraph, heading, button, input, or any other container.

Open Source

IndieWeb Examples

Implementations on IndieWeb sites.

  • Tantek Çelik supports fragmentions on all tantek.com post permalinks since 2014-07-26 using the fragmention.min.js open source polyfill, and CSS that highlights the element containing the fragmention in yellow and fades to very light yellow.
  • Ben's Site - simple use of the open source polyfill, included on every page.

Silo Examples

  • Kevin's blogger blog by adding the fragmention JS to the template
  • Instapaper Support
    • creates fragmention URLs for highlights and POSSEs them to twitter, tumblr, facebook etc.
    • Adds fragmention support to the Instapaper browser plugins for Chrome and Safari

Challenges

While most find the idea of fragmentions delightful, there are differing ideas on how they should work. We ask contributors to justify feature requests with concrete real world examples, as tests in the wild may reveal best practices. Otherwise, any of these challenges could be appended with, “So, uh, what do you think?”

Double-hashes in the wild

The URL spec doesn't define fragments to contain hash signs, so links like <a href="##foo"> may fail validation, or be misparsed by strict URL parsers. if this is an issue, we may need to switch to #*

For future reference. Valid characters as per URL spec are: ALPHA / DIGIT / "-" / "." / "_" / "~" / "%" HEXDIG HEXDIG / "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "=" / ":" / "@" / "/" / "?" -Sandeep.io 20:58, 23 April 2014 (PDT)

On the other hand, HTML5 id's can contain #. So browsers may interpret links like <a href="##foo"> with two meanings - the question is if IDs starting with # occur on the web.

The initial feedback is that few people concern themselves with hash fragment validation, and even less would (at least, knowingly) use them in this way.


Further thought: as HTML5 ids can contain any text except a space character, any fragment with a space in CANNOT refer to an id, so could be treated as a fragmention. So any fragmention of more than one word may not even need the ##.

The problem with this approach is that auto-linkers and URLs in other context (like plain text) don't know where the URL ends. -Sandeep.io 20:56, 23 April 2014 (PDT)


Firefox drops the first # on redirect: For instance http://kartikprabhu.com/static/demo/fragmention.html##was+still redirects to an https version which should be https://kartikprabhu.com/static/demo/fragmention.html##was+still but Firefox drops one of the # to give https://kartikprabhu.com/static/demo/fragmention.html#was+still . Strangely enough http://kartikprabhu.com/static/demo/fragmention.html###was+still fixes this (Firefox only drops one #) and http://kartikprabhu.com/static/demo/fragmention.html#%23was+still also seems to work.

Sensitivity

After trying it both ways, collapsing white space works better, as it is very hard to generate invisible escaped characters accurately.

Matching case is strict, but makes it easier to target specific text. Ignoring case is cavalier, but makes it easier to target anything.

The initial feedback is conflicting. Some expected fuzzy matching. Others expected specific matching. Most agreed that it depends on your specific use-cases, which are sorely lacking in most of the annotations discussions. Fuzzy matching could be seen as a further fallback strategy if direct matching fails.

URL encoding

Fragmentions are decoded before search, which means + plus signs are interpreted as spaces or must be escaped (%2B). This makes for prettier, conforming URLs, but may also be confusing for users targeting phrases with special characters.

Proposed icon

highlink.svg - This combines highlighting with linking and is thus a classic over-literal design by an engineer. Graphic designers very much welcomed to come up with something better.

Using Fragmentions in a TOC

Because Fragmentions by default link to the first occurrence of a phrase, it's not possible to use them in a table of contents on the same page if the table of contents appears above the things you're linking to. This is because the fragmentions would then link to themselves.

What if the linked-to text occurs more than once?

In Kevin Marks' follow-up post, he suggests using more words to create a unique reference, rather than trying to find a technical solution to the problem.

Proposed solution to reference the nth occurrence of a phrase:

Related work

The NY Times has a tool for annotating articles, but it makes a very complex anchor and requires a very specific algorithm. source here

There is a w3c spec for addressing Media Fragments but it explicitly excludes HTML.

Pullquote generates images to embed longer quotes in twitter. Getting it to generate fragmentions would be an excellent enhancement.

"Purple numbers" (per paragraph anchor tags) have been a feature of many blogs, for example Dave Winer's and Tim Bray's Ongoing but they do need to be added by the authoring software. Fragmentions can be chosen independently of authorship. Or a client-side script could generate them per-paragraph.

Save Publishing a bookmarklet by Paul Ford that highlights tweetable sentences, could be enhanced by fragmentions.

SuperFeedr allows subscribing to HTML fragments - enhancing this with fragmentions could be interesting.

Fragment Search by Gervase Markham in 2007 is the same idea, with a more complex syntax #!s!search%20term and #!s3!search%20term for 3rd occurrence.


Text-Search Fragment Identifiers E.g., http://example.com/index.html#:words:(distinguish) and http://example.com/index.html#:words:serve-as-context-to-(distinguish) and http://example.com/index.html#:words:context-to-(distinguish)-multiple-occurrences


Fragment Identifiers for Plain Text Files E.g., http://example.com/text.txt#line=10,20 and http://example.com/text.txt#match=[rR][fF][cC]


Using URLs to pass parameters to web applications, widgets and gadgets proposes #meta(). E.g., http://www.google.com/reader#meta(width=900,height=500,autohide,position=top)


Addrable E.g., table1.csv#where:city=Berlin,person=Richard

Hypothes.is fuzzy anchors and robust anchors have some good discussion of the broader area, and some code too.

Bowerbird proposed # for words in december 2013

See also: http://en.wikipedia.org/wiki/Fragment_identifier#Proposals

RapGenius now offers a highlight and annotate plugin as seen here on Business Insider. They highlight phrases, not paragraphs

Discussion