I share a lot of suff from the web, on this blog and elsewhere. Typically I like to use a passage of text from the site I’m linking to (wrapped in a <blockquote>), followed by a link to the source (using <cite>). Then I’ll add some of my own text above or below the excerpt to add any necessary context.

I’m very particular about how I format all of this information. Only fairly recently I’ve started using the excellent TextExpander to speed up the process.

When I need to excerpt a passage that is more than just plain text (containing, for example, lots of links, lists or a table) I’ve been making use of the handy Posterous bookmarklet, which takes any selected text and formats it very much in the way described above. I’ll then modify the code it produces to suit my own needs.

The Posterous bookmarklet is fine, but it has two drawbacks:

1. It uses Posterous-specific markup (a class on the blockquote and div instead of cite).
2. I don’t use Posterous any more, and the bookmarklet requires that I be logged in.

So starting with this need, I’ve produced a mockup of a bookmarklet that would be of great utility to me, and presumably to many others:

User journey

To explain that image, let me describe how someone who has already installed the bookmarklet would make use of it:

1. The user selects a passage of text they want to quite from a website and clicks on the bookmarklet shortcut.
2. The bookmarklet itself appears, with an HTML snippet already created using the selected passage as a blockquote, and the page URL and title to generate a citation.
3. The user can now edit the code if necessary.
4. Finally, the user clicks on the ‘Copy’ button to place the code in the clipboard.

Ultimately the result will probably be pasted into a blog post.

Specification

A little more detail about this bookmarklet.

• At the top are some useful markup buttons. These can be customised via the Toolbar options.
• In the middle is the code view, with syntax highlighting and line numbering.
• The cog at the bottom of the code window allows the user to customise the default format of the citation. (See Edit formats)
• The inverted tabs along the bottom display different citation formats. The + symbol allows the user to add more custom formats. (See Edit formats)
• The Preview button shows a plainly styled preview of the code.
• The bookmarklet can be resized.
• The bookmarklet can be dragged around by the empty grey areas.

Edit formats

While in my case I like to have a <blockquote> followed by a <cite>, sometimes other formats are more suitable. The bookmarklet would be able to store several alternate formats, with the options to customise these and add more.

Variables would be used in the creation of these formats. These are the ones I could think of that would be most useful:

{selected}

The text that was selected when the bookmarklet was activated.

{clipboard}

Text that was in the clipboard when the bookmarklet was activated.

{title}

The page <title>.

{date}

The date/time. Note: The formatting of this can be customised.

{url}

The full URL, for use in links.

{domain}

Just the domain or subdomain of the origin page. For example, if the URL is http://www.ted.com/talks/ken_robinson_says_schools_kill_creativity.html, then the domain might just be ted.com.

Toolbar options

The toolbar can be customised so the user only has to have the buttons they need. I’ve also shown the options to have a few custom items, like a WordPress/Tumblr style <!-- more --> post break.

Preview

Perhaps the Preview window could be the opportunity to export citations to various non-HTML formats.

Other ideas

• Markdown (and/or MultiMarkdown) support.
• Microformat support (particularly FOAF). When a cited page has microformat data, this can be used to populate fields in citations.
• Similarly, other metadata on the page could be useful. <meta name="description" content="#">, as {description} for example.
• Citation formats that adhere to the various academic styles.
• Another format could produce Wikipedia citations.
• The ability to save citations for later use, either within the bookmarklet (on a server), or as a local HTML file. Or perhaps to Dropbox.
• Alternately, perhaps the citation could be saved as a hashed URL, using hashify.me or a similar technique.
• Posting directly to WordPress, Tumblr, Posterous, Facebook etc… Though I see this as a lot of extra work that would be largely unnecessary.
• Perhaps the preview window could draw in styles from the intended destination. The user would put a link to the CSS in the settings somewhere.
• This should all be made as a self-hosted solution, not some proprietary hosted service.
• Almost certainly there are other uses I’m not thinking of…

Do you want to make this?

The purpose of this blog post is to describe a tool that I believe many would appreciate, including myself. If I were savvy with JavaScript I would certainly have made this by now — and perhaps one day I will — but for now I’m simply offering the idea to anyone who wants to take it and run with it.

If you are that someone, I’d love for you to just go ahead and make this. A cut-back version of this bookmarklet would still be very useful, and would probably make a fun weekend project. I’d be thrilled to offer input, and even my own HTML/CSS and design skills.

Please leave a comment or ping me on Twitter with your thoughts.

---

See also:

• cc:to me, a bookmarklet that makes it easy to email yourself notes and links to websites. Their site is a bit broken at the moment, so read this TNW article instead. I modelled my mockup on this bookmarklet (and by extension, Bootstrap).
• Read this far but still wondering what a bookmarklet is? Check Wikipedia.