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.
Demo
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 @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. 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.
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.
I tried to search for Twitter on this page, but it only highlighted the words “Twitter” and not the @username link. Neither does the email or other words work.
Am I doing something wrong? I’m on Chrome 24.0.1312.57, Windows 7.
It’s a brilliant idea btw, will have quite some applications!
Thanks for the bug report. It’s working for me on WinXP and that version of Chrome, but I’ll see if I can replicate.
I did fix an issue with Firefox though: textContent vs. innerText.
It still did this for me :( even read after the comment below this one’s parent.
One issue I came across was that if you set a background-color, the highlight was obscured while the text was matched. This is fixed in the latest version.
Just tried it again, it works correctly now! Thank you for fixing it :)
For me it’s not working, using Chrome 24.0.1312.57 on Mac OS 10.7.5.
But the idea is cool ;-)
Thanks Ben! Strange it’s not working for you. I’m using same version of Chrome with Mac 10.8.2.
I would expect @tomashpark to be highlighted.
http://o7.no/YhEVMP
Works pretty well for me: http://i.imgur.com/qJTUWXk.png (last version of Chrome, W7 x64).
works great, but the highlight color should match the one the browser uses. I’m on ubuntu, chrome dev.
The script actually uses the browser’s highlight color, since it can’t be styled with CSS. Here’s what I see with your setup: http://i.imgur.com/k057wEB.png
Unless you mean matching it to ::selection, but unfortunately that can’t be done.
Awesome tool! I can already think of use cases for a couple of projects in the works!
There is an issue I’m having right now, not sure if it’s across the board. When I search for Twitter, the alt text for the twitter icon in the footer is displayed. It’s currently covering the twitter icon when I do the search. Not sure if this is preventable, but just wanted to mention it just in case.
Thanks for making this, I can’t wait to see it in action / use it!
It looks like it’s case sensitive – Should it not be other way round?
Great script though!
Thanks
Vishal
It’s determined by how your browser’s find normally functions. I’m curious what browser you’re using that’s case sensitive.
Nice idea , but the only problem is if someone try to copy text , hidden synonyms also get selected , is there any work around this issue ?
Anyway Thanks
I haven’t found a way around this. I thought user-select might work, but that affects the appearance, not the behavior, of selection.
Screenshot on Firefox: http://awesomescreenshot.com/0d15dbat35
Nice idea. But I think it would be better if Chrome build this in or you could write a Chrome plugin for this so it works on all websites using some sort of dictionary. But that would be a much bigger project.
On Opera it seems to find the synonyms, and you can jump to them with the search, but they are not being :selected and the anchor for the search seems to be somewhere completely different.
HTTPS/HTTP mixed content errors, this demo doesn’t work.