Blog

Signals Blog

Shorten Long IUPAC Chemical Names with this One Weird CSS Trick

IUPAC Nomenclature, although valuable as a naming system for organic chemicals, often produces very long names. Generally speaking, the larger the structure, the longer the IUPAC name. The enormous length variation in IUPAC names poses a particular problem for fixed-width HTML elements such as those used in grids and tables. Fortunately, an easy workaround comes in the form of the CSS3 text-overflow property.

Using text-overflow

Setting an element's text-overflow property to ellipsis instructs the browser to truncate overflowing text and replace what's removed with the ellipsis (…) character. As discussed elsewhere, three other properties need to be set: width; white-space; and overflow.

Truncating IUPAC Names with CSS
.iupac-name {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Selectively Showing the Full Name

If you viewed the demo, you probably realized that naive truncation of IUPAC names isn't really that helpful. Forced into a small enough space, most names will be truncated. This of course renders them all unreadable.

We need to give the user a way to reveal the full IUPAC name. The title attribute offers a simple solution.

Truncated IUPAC Name with Tooltip
<div class="iupac-name" title="(3R,5R)-7-[2-(4-fluorophenyl)-3-phenyl-4-(phenylcarbamoyl)-5-propan-2-ylpyrrol-1-yl]-3,5-dihydroxyheptanoic acid">(3R,5R)-7-[2-(4-fluorophenyl)-3-phenyl-4-(phenylcarbamoyl)-5-propan-2-ylpyrrol-1-yl]-3,5-dihydroxyheptanoic acid</div>

Now when a user hovers over the truncated IUPAC name, a tooltip showing the full name appears.

The title attribute may not be the best solution in every situation. For example, users on touchscreen devices will be unable to see the full IUPAC name.

Conclusions

Displaying IUPAC names in fixed-width page elements can wreak havoc on page layouts. This article illustrates a simple solution using standard HTML and CSS. Many more complex solutions are available.

However, before applying any solution, it's worth reflecting on the purpose of showing the IUPAC name in the first place. "Requirements" around showing IUPAC names in web pages sometimes stem from old habits rooted in print media. A well-rendered chemical structure often conveys all of the information a chemist needs.