wrapVowelChars - test page

wrapVowelChars is a free standalone Javascript module that traverses a DOM Branch and wraps any vowel characters it finds in a <span class="vowel"> element.

It defaults to processing the entire document.body, but can also be scoped to only process certain elements within the page. (See below)

This module was originally written to provide websites with "quick and dirty" support for the Icelandic accessibility service Stillingar.is - which allows dyslexic users to request that all vowels be highlighted.

View Source to see how it works and how clean the HTML is.
Here's the uncompressed source (5.432 bytes including comments)
Here's a packed version of the script (1.866 bytes + comments)

Usage Instructions

To activate the script, simply drop in the following line of code anywhere within your HTML document:

  <script src="vowels.js" charset="utf-8" type="text/javascript"></script>

That's all. It runs automatically when the page has loaded - processing the entire <body> part of the HTML document.

Limiting the processing scope

To limit the processing scope to something other than the whole document.body, simply declare an Array called wrapVowelCharBlocks anywhere in your document, anytime before window.onload fires. The array should contain one or more element references to process - or element DOM ID strings, if your're feeling lazy.

Example:

  var wrapVowelCharBlocks = [
    document.getElementById("elementId"),
    "myOtherId"    // DOM ID strings are also allowed.
  ];

If you don't define wrapVowelCharBlocks, the script will default to document.body

Canceling the processing

You can also cancel the automatic processing on window.onload, by assigning an empty array to wrapVowelCharBlocks.

Like so:

  var wrapVowelCharBlocks = [];

Manual processing

You can run the wrapVowelChars function any time you like by simply passing it a reference to a DOM Element node.

Example:

  wrapVowelChars(document.body);

You can run it multiple times on the same Element, and it will safely skip over the existing <span class="vowel"> elements, but creates new ones where new text has been added by a script.

Resetting the text

To remove the vowel-nodes from within any DOM element, simply run wrapVowelChars.resetText and pass it the element you wish to reset as a parameter. The default element is document.body.

  wrapVowelChars.reset();

Script configuration:

Here's the default configuration that the script uses:

  wrapVowelChars.vowelTag   = "span";
  wrapVowelChars.vowelTagClass = "vowel";
  wrapVowelChars.vowelChars = "aeiouyæöáéíóúýøâàäåêèëîìïôòûùüÿ";

You're free to override these values to suit your site's particular needs.

Licence

Feel free to use this code in any way you like as long as the copy you distribute includes a comment with an URL pointer to this page: https://minar.stillingar.is/js/vowels/test.htm

Nov. 2006 - Hugsmiðjan ehf. - premiere web-development and web-accessibility innovation in Iceland.