A method is presented to provide a definition for an abbreviation or initialism whenever the user hovers over the abbreviation or initialism.
In much of my writing, I find that I am using quite a few acronyms and initialisms. I normally write out the phrase followed by the abbreviation or initialism in parentheses. For example, I would write:
Many years ago, the US Naval Undersea Center (NUC) in San Diego, CA, was in need of a better way to access data. The University of Hawaii had assembled a very large collection of marine biological data in the Hawaiian archipelago. The collection, known as the Hawaiian Coastal Zone Data Bank (HCZDB), contained 65 million individual observations of marine life found in the waters surrounding Hawaii....
Then, somewhere further down in the document, I would use "NUC" or "HCZDB". But a large number of paragraphs could appear between a definition and its next use. So, unless the reader was familiar with the subject matter, he would have to search for the meaning of, say, HCZDB.
We are probably all familiar with the use of "green links" that appear on the web. The link is usually green with a double underline. When hovered over, a pop-up would appear, usually some form of advertising. For example,
So this was my solution. Replace the abbreviation or initialism with a "Green Link" that would provide a definition when the abbreviation was hovered over. For example,
In the page HTML, wherever a Green Link is desired, a
<span> of the form...
...is inserted. In this case, the leading semicolon specifies the separator that will be used between the abbreviation and its definition. Any printing character that does not appear in either the abbreviation or the definition may be used. The reader is cautioned that a semicolon is not useful as a separator if an HTML special character is in either the abbreviation or definition (e.g., &, ", <, >, etc.). Use a different separator, say, "!".
For Green Links to appear in the document, preprocessing is required. The preprocessing is initiated after the page has been loaded, triggered by a
<body> onload event handler:
In addition, the script creates a Remove/Restore Green Links link that allows a reader to disable (or enable) the Green Links on a page.
var abbreviation_alone_rule = null;
var abbreviation_definition_rule = null;
var green_links_displayed = false;
The first two point to the CSS rules that determine how the Green Link will be displayed. The Boolean records the display state of the Green Links.
initialize_green_links() controls the process:
function initialize_green_links ( )
var found = false;
if ( !green_links_found ( ) )
abbreviation_alone_rule = green_links_rule_retrieved (
if ( abbreviation_alone_rule == undefined )
abbreviation_definition_rule = green_links_rule_retrieved (
if ( abbreviation_definition_rule == undefined )
else if ( !initialize_green_link_action ( ) )
else if ( !revise_green_links ( ) )
abbreviation_alone_rule.style.display = 'none';
abbreviation_definition_rule.style.display = 'inline';
return ( found );
The function determines if there are any Green Links on the page. If there are none, it exits, returning that fact.
The Remove/Restore link (
green_link_action) is created and positioned on the web page. The link is positioned absolutely. As the page scrolls, the position is recalculated so that the link's position is maintained at the top left of the web page.
Finally, all "
<span>s are replaced by the "
Using the Code
Then alter the
<body> tag to include the
onload handler can be placed on each page of a web site, whether or not the page contains Green Links. The test to determine if Green Links are present is very fast, hardly affecting the page rendering time.
Now the more difficult task. Determine if a web page contains any acronyms or initialisms that could benefit from the use of Green Links. For each identified item, create the "
<span> in place of the item. Say, for example, the following text appeared on your web page:
ICF devices use "drivers" to rapidly heat the outer layers
of a "target" in order to compress it. The target is a
small spherical pellet containing a few milligrams of fusion
fuel, typically a mix of D and T. The energy of the laser
heats the surface of the pellet into a plasma.
If the initialism "
ICF" and the chemical symbols "
T" were to be replaced with Green Links, the text would become:
<span class="green_link" >;ICF;Inertial Confinement Fusion</span>
devices use "drivers" to rapidly heat the outer layers
of a "target" in order to compress it. The target is a
small spherical pellet containing a few milligrams of
fusion fuel, typically a mix of
<span class="green_link" >;D;deuterium</span>
<span class="green_link" >;T;tritium;</span>.
The energy of the laser heats the surface of the pellet
into a plasma.
and would be displayed as:
ICF devices use "drivers" to rapidly heat the outer layers of a "target" in order to compress it. The target is a small spherical pellet containing a few milligrams of fusion fuel, typically a mix of D and T. The energy of the laser heats the surface of the pellet into a plasma.
When a reader hovers over one of the Green Links, the definition would be displayed (e.g., "Inertial Confinement Fusion" for "
ICF", "deuterium" for "
D", and "tritium" for "
In order to see the results of this technique, visit Summary of Real-Time Projects. On that page, I have used Green Links (maybe overused to make the point).
This paper has presented a simple way in which to expand acronyms and initialisms to their definitions.
All of the browsers produced the expected results.
- 06/22/2011 - Original article
- 06/23/2011 - Added a link to a Green Links example