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

In the page HTML, wherever a Green Link is desired, a <span> of the form...

<spanclass="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., &amp;, &quot;, &lt;, &gt;, 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:

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

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:

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><spanclass="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
<spanclass="green_link">;D;deuterium</span>
and
<spanclass="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.

Share

About the Author

I started programming more than 42 years ago using AutoCoder and RPG (note no suffixing numbers). Programs and data were entered using punched cards. Turnaround between submitting a job for compilation and execution was about 3 hours. So much for the "good old days!" Today, I particularly enjoy programming real-time software. I consider myself capable in WinForms, Mobile Apps, and C# although there are occasions that I yearn to return to C and the Win32 API.

Although what you say may be true, "rich content" was not the purpose of this technique. Rather, I sought a means whereby I could provide a definition when a user hovered over an abbreviation. I think I achieved my objective.

This isn't a flame. I expect that I have missed something fundamental and am wondering what it is.

Can you elaborate on how this is better that just using the <acronym> tag? Apart from being able to toggle on / off and being able to style the expansion, I cannot see anything significant. An obvious, simple enhancement would be to save the definitions as you scan on the first appearance of a definition in an object (property name = abbreviation, property value = definition), then on subsequent appearances, you could just do <span class="green_link">;ICF</span> and reuse the previous definition.

Without this, what is the difference between what you have written and the following zero JavaScript version (using one of your texts)?

I do not believe that any commentary that you've made is in any way "flame." I think you may see things differently. And differences in opinion are what make life interesting. So much for philosophy,

I think that the <acronym> tag produces output that is just plain ugly. I think that "being able to toggle on/off and being able to style the expansion" are two factors that influenced me to provide a mechanism that was different from the <acronym> tag . There comes to mind two down sides to Green Links:

• Must include two files (.js and .css - CSS only because Chrome won't accept dynamic style sheets)• Must modify the <body> tag to invoke the preprocessing of the <span> tags

I have placed your "zero Javascript" version and a Green Links version of the same text on the same web page. I'll be honest; I think the Green Links look better. But that is my perception and not necessarily the perception of others.

Your suggestion about building a dictionary is a nice idea. But to implement this feature would probably require two passes over the document: the first to build the dictionary and the second to replace the Green Links. The first pass is required to insure that a definition did not appear later in the document than its first use. Other than that, I think it's a neat idea.