Introduction
A method is presented to provide a definition for an abbreviation or initialism whenever the user hovers over the abbreviation or initialism.
Background
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.
Solution
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,
Overview
Implementing Green Links requires, in addition to the HTML file, CSS and JavaScript files.
In the page HTML, wherever a Green Link is desired, a <span> of the form...
<span class="green_link">;Abbreviation;Definition</span>
...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:
<body onload="initialize_green_links();">
JavaScript functions replace the original "green_link" <span> by:
<span class="revised_green_link">
<span class='abbreviation_alone'>
Abbreviation
</span>
<span class='abbreviation_definition'>
<a id='greenlink_1'></a>
<a href='#greenlink_1'
style='text-decoration:none;
font-weight:bold;'>
<span class='abbreviation'>
Abbreviation
</span>
<span class='definition'>
Definition
</span>
</a>
</span>
</span>
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.
Implementation
In the GreenLinks.js file, three JavaScript global variables are required to maintain state.
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.
The Javascript function initialize_green_links() controls the process:
function initialize_green_links ( )
{
var found = false;
if ( !green_links_found ( ) )
{
}
else
{
abbreviation_alone_rule = green_links_rule_retrieved (
'.abbreviation_alone' );
if ( abbreviation_alone_rule == undefined )
{
}
else
{
abbreviation_definition_rule = green_links_rule_retrieved (
'.abbreviation_definition' );
if ( abbreviation_definition_rule == undefined )
{
}
else if ( !initialize_green_link_action ( ) )
{
}
else if ( !revise_green_links ( ) )
{
}
else
{
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.
I wanted to create the Green Links style sheet dynamically using JavaScript thus simplifying the use of Green Links (no need to include a GreenLinks.css file and a GreenLinks.js file, only the GreenLinks.js file). Unfortunately, Google Chrome prohibited this solution. So the style sheet must be included as a separate CSS file.
The two rules that govern how the Green Links are displayed are retrieved from the style sheet. These rules are stored in global variables to allow them to be rapidly accessed and their styles modified (see Dynamic Font Size Using HTML and JavaScript). Once retrieved, the styles for the two rules are set to the default values.
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 "green_link" <span>s are replaced by the "revised_green_link" <span>s.
Using the Code
The first step to using Green Links is to include the CSS and JavaScript files in the HTML page. Following standard practice, place the CSS file in the document's <head>.
<link type="text/css"
rel="Stylesheet"
media="screen,print"
href="./CSS/GreenLinks.css" />
Then alter the <body> tag to include the onload handler:
<body onload="initialize_green_links();">
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.
Following the online discussions by Google employees, I place the JavaScript include just before the </body> tag:
<script type="text/javascript"
src="./Scripts/GreenLinks.js"></script>
</body>
</html>
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 "green_link" <span> in place of the item. Say, for example, the following text appeared on your web page:
<p>
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.
</p>
If the initialism "ICF" and the chemical symbols "D", "T" were to be replaced with Green Links, the text would become:
</p>
<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>
and
<span class="green_link" >;T;tritium;</span>.
The energy of the laser heats the surface of the pellet
into a plasma.
</p>
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 "T") .
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).
Conclusion
This paper has presented a simple way in which to expand acronyms and initialisms to their definitions.
Browsers Tested
All of the browsers produced the expected results.
History
- 06/22/2011 - Original article
- 06/23/2011 - Added a link to a Green Links example
