Tuesday, February 20, 2007

Invisible InChI's

Some InChI's are short, such as that for methane: InChI=1/CH4/h1H4. Others are long (think crambin), and you don't want to show them inline. Or you just want to show them anyway, but still want the chemistry to be understood. Here come the invisible InChI's.

Alt text for images

One solution is to put the InChI as content of the @alt attribute of the HTML <img> element. This has the downside that it has no explicit semantic meaning. For example, the Molecule Of The Day blog is using this approach. It's an excellent start, but not the solution.

As Keyword

Another option is to put it in as keyword, in the HTML <head> element: <meta name="keywords" content="InChI=1/CH4/h1H4"/>. But Google does not index this, so the use is restricted.

Invisible text

The most promosing alternative, however, is to put it in using the <span> element, in combination with microformats or RDFa, Like this: . It does not show up, does it? But it is really there, as you would see, if you have the special Greasemonkey script installed.

This is the HTML code for this example:
<span class="chem:inchi" style="font-size: 0%; visibility: hidden;">InChI=1/CH4/h1H4</span>

The @style attribute marks the text's visibility as hidden, and the font-size is set to 0%. It is important not to set it to zero itself, because many web browsers do not interpret zero font size correctly, and take the default font size instead.

This should solve the standing problem that we would like to include the InChI's in our blogs, if it would just not be so long and unreadable. Just hide it.

Update: Daniel informed me that Google won't index text marked 'visibility: hidden' and may even mark your webpage as spam :( Not the solution either. Read the comments for more thoughts.


  1. I'm not sure, but several search engines remove sites that have invisible marked content, because this is often spammer-behaviour. I think, a search engine of your choice will give you more info about this topic (hidden divs, cloaking, ...). But as I said: I'm not sure about that.

    Regards, Daniel

  2. Hi Daniel,

    seem that you are right :( Let's wait for Google to index my page, and see what they did with it... mmm... actually, the InChI is also present in visible form; maybe the cache will show if the invisible InChI is indexed too...

  3. You might try the title attribute as well. A construction like
    <span title="InChI=1/CH4/h1H4">Inchi</span> will show the InChi code in a mouse over effect as quick tip. In case you have a very long InChi, the display of the quick tip will be cut off after 20 characters (or 25?).

  4. Oliver,

    interesting suggestion. Unfortunately, it would also not have the semantics, and it does not seem to be combinable with span="chem:inchi" :(

    But it is a good alternative for the @alt for the img element.

  5. I recently blogged on "InChI, ChemSketch Freeware, ChemSpider and Wikipedia Integration" specifically in regards to embedding InChIs into PNG files onto Wikipedia. Visit