A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the link “@username” instead.

Cinnamon.js prevents just this situation, taking some of the pain out of naming things. It allows users to find links, images, and other content by their synonyms, using the browser’s built-in Find function.

To see it in action, search this page for “Twitter”, “Spice”, “Email”, or “Contact”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus orci ut mi laoreet rhoncus. Pellentesque congue urna tincidunt tortor rhoncus dapibus. Duis faucibus dolor a sem ultrices at facilisis risus cursus. Cras vel euismod nisl. Ut vitae risus et libero sagittis ultrices et vitae ligula. Follow me at Twitter @thomashpark. Aliquam at turpis id diam placerat consequat at vitae est. Aenean tellus magna, lacinia vitae facilisis facilisis, egestas ut sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Contact Email Reach me here. Donec tincidunt dapibus dui luctus rhoncus. Nam sagittis egestas blandit. Nulla imperdiet tincidunt enim, a tempus sapien volutpat a. Maecenas sed elit ipsum, ut tristique odio. Suspendisse potenti.

Cinnamon Spice
Photo by kobiz7

Download

You can download the script or view it on GitHub below.

Usage

Add Cinnamon.js just before your body’s end tag. Then wrap your element of choice (span tags are recommended) and give it a data-cinnamon attribute with a comma-separated list of synonyms as its value. If you wrap an image, its alt text will also be used, as in the image above. Cinnamon.js works on modern browsers and IE8+.

Here’s an example:

<span data-cinnamon="Azure,Cerulean,Cobalt">Blue</span>

Notes

This is meant to be a proof of concept, and you probably shouldn’t use it in production. Hidden text, used deceptively, can be penalized by Google. Precisely what’s counted as deception is anyone’s guess, but there’s a risk that it’s deemed a dirty SEO tactic even if it is not intended as such.

Cinnamon.js doesn’t hurt accessibility; it uses aria-hidden to tell screen readers to ignore the synonyms.

In the course of testing, one thing I discovered was that Safari handles in-page search quite differently from other browsers. Safari doesn’t search for strings mid-word unless the word uses CamelCase. When highlighting matched text, it ignores certain CSS properties like overflow, opacity, and z-index. Highlighting is semi-disabled by setting -webkit-user-select to none.

Check out the source to see how it works.

Some questions: Do regular people even use their browser’s Find function? Is the user’s reliance on the Find function a symptom of poor design, or is there room for better in-page search as there has been for site and web search?

Updates

• 26 February 2013: I wrote an article with Robert Nyman about this for Mozilla Hacks.
• 5 March 2013: David Artiss has packaged Cinnamon.js up as a WordPress plugin.
• 25 March 2013: Michael Kutschall is making some promising strides with an empty font approach. He goes into more detail in a blog post.