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