Cinnamon.js: Find In-Page Text using Synonyms

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.

Cinnamon
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

16 comments Write a comment

  1. 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.

        • 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.

  2. 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’s determined by how your browser’s find normally functions. I’m curious what browser you’re using that’s case sensitive.

  3. 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

Leave a Reply


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>