Click here to Skip to main content
Click here to Skip to main content

Green Links - Acronyms and Initialisms exposed

, 23 Jun 2011
Rate this:
Please Sign up or sign in to vote.
Describes a method whereby the definition of Acronyms and Initialisms can be shown when the user hovers over a specially displayed Abbreviation or Initialism

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., &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:

<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

Google Chrome   Firefox   Internet Explorer   Opera   Safari

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

gggustafson
Software Developer (Senior)
United States United States
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.

Comments and Discussions

 
Questionvery nice PinmemberCIDev15-Jul-11 7:47 
GeneralMy vote of 5 Pinmemberashishkumar00823-Jun-11 21:12 
GeneralMy vote of 5 PinmemberPablo Aliskevicius22-Jun-11 22:17 
GeneralMy vote of 3 PinmemberFiro Atrum Ventus22-Jun-11 15:09 
GeneralRe: My vote of 3 PinmemberPablo Aliskevicius22-Jun-11 22:16 
GeneralRe: My vote of 3 Pinmembergggustafson23-Jun-11 3:32 
GeneralRe: My vote of 3 PinmemberSnorri22-Jun-11 23:10 
GeneralRe: My vote of 3 Pinmembergggustafson23-Jun-11 1:46 
GeneralRe: My vote of 3 PinmemberFiro Atrum Ventus26-Jun-11 15:36 
GeneralRe: My vote of 3 Pinmembergggustafson27-Jun-11 5:17 
GeneralRe: My vote of 3 Pinmemberjsc4227-Jun-11 22:35 
GeneralRe: My vote of 3 Pinmembergggustafson28-Jun-11 5:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140709.1 | Last Updated 23 Jun 2011
Article Copyright 2011 by gggustafson
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid