This month at Lab Hours, we had several participants seeking the same thing -- How to provide site visitors pop-up definitions for acronyms and abbreviations. Oh, and could we please do this in a way that does not require extra data-entry from our content editors? A seemingly tall order turns out to have a rather straight-forward recipe combining a Drupal module, taxonomy and some obscure HTML tags no one seemed to know existed.

Obscure HTML elements revealed

Our first revelation occurred while unadvisedly trying to solve the display issue first. Looking for popup options, the Beauty Tips module seemed up to the task of providing an elegant solution. However, while casually Googling the term "acronym" -- the reason for the popups -- we uncovered two HTML elements we were not yet familiar with -- acronym and abbr (for abbreviation).

These elements seem to do it all -- mark the tagged acronym or abbreviation (dotted underline) and provide the description in a popup tooltip. Just what we were looking to do (albeit with some caveats for different browsers and HTML 5). Not only that, but using them adds semantic value to our content and increases accessibility.

This was all well and good, but only satisfied our display requirements. We were not looking forward to the prospect of editing all of our existing content to add HTML tags to acronyms and abbreviations. We were also concerned that it would be too clunky to expect occasional content providers to tag them properly when adding new content -- despite there being TinyMCE WYSIWYG toolbar buttons for each element. Enter the Lexicon module.

Finding the right module for the job

Lexicon, as its project page explains "generates one or more Lexicon pages based on terms in taxonomies and optionally marks and links them in the content." Lexicon definition pages will certainly be useful, but it's the that last feature that really caught our attention. To get it all to work, you create a vocabulary of terms with definitions -- which can include acronyms and abbreviations with their fully spelled-out descriptions. Once you've configured Lexicon's settings, your terms will be marked where they appear in content. Bringing us full circle, one of the marking options is to wrap appearing terms in the abbr HTML tag (acronym as well but this element has been deprecated in HTML5). The result is an on-hover triggered definition popup with an optional link to a lexicon page listing terms and definitions. Just what we were seeking to do and more.

Taking it further

This recipe is still a work-in-progress. At future sessions, I expect we'll be exploring multiple vocabularies, lexicon page management as well as cross-browser and custom styling issues. The bottom line is we "discovered" a solution to a situation faced by several organizations which ended up suggesting a valuable new feature for several more. We look forward to seeing where they take the concept next.