CHAPTER 9
Dynamic Text and Typography
This chapter explores a range of dynamic classes for enhancing the way you use text in a web page, including a typewriter or teletype effect, a way of cleaning up strings by removing unwanted characters and whitespace, automatically loading Google fonts in from the Google servers when you reference them, vertically aligning text within an object, and creating glow effects by cycling the foreground and background colors of objects.
PLUG-IN 76: Typetext (typetext[n])
Plug-in 76 displays the contents of an object as if it is being typed out on a typewriter or teletype machine. The class also takes a parameter specifying the duration of the animation so you can specify the exact time you require.
For example, in Figure 9-1 the poem “The Tyger” by William Blake is being typed to the screen over the course of 60 seconds.
Variables, Functions, and Properties
About the Class
This class removes the contents of the object it applies to and then replaces it over a time duration passed to it.
FIGURE 9-1 Displaying a poem like a typewriter using this plug-in
How to Use It
To use this class, enter its name into the class argument of the containing object, along with the animation duration within square brackets, as with the following example, which was used for the screen grab in Figure 9-1:
<pre><div class='typetext[60000]'> Tyger, Tyger burning bright, In the forests of the night: What immortal hand or eye, Could frame thy fearful symmetry? In what distant deeps or skies. Burnt the fire of thine eyes! On what wings dare he aspire! What the hand, dare sieze the fire? And what shoulder, and what art, Could twist the sinews of thy heart? And when thy heart began to beat, What dread hand? and what dread feet? What the hammer? what the chain, In what furnace was thy brain? What the anvil? what dread grasp, Dare its deadly terrors clasp! When the stars threw down their spears And water'd heaven with their ears: Did he smile his work to see? Did he who made the Lamb make thee? Tyger, Tyger burning bright, In the forests of the night: What immortal hand or eye, Dare frame thy fearful symmetry?</div></pre>
The JavaScript
if (classname.search(/typetext/, 0) != -1)
{
cnamecopy.replace(/typetext[([^]]*)]/, function()
{
TextType(thistag, 1, arguments[1])
} )
}
PLUG-IN 77: Digits Only (digitsonly)
Plug-in 77 removes any characters from an input field that are not digits or whitespace. For example, in Figure 9-2 the user has been asked for their credit card number and has also entered some irrelevant text.
FIGURE 9-2 The user has input more than just a card number.
FIGURE 9-3 The unwanted characters have now been removed.
But in Figure 9-3, as soon as the user moves the mouse away, all the erroneous characters are automatically removed, leaving behind only the numbers and whitespace.
Variables, Functions, and Properties
About the Class
This class is triggered whenever the mouse moves out of the object employing it, at which point it calls the CleanupString() function (from the PJ.js library) to strip out all characters that are not digits or whitespace.
How to Use It
When you want to ensure that an input field contains only digits or whitespace, place this class name in the class argument of the element, like this:
<input name='creditcard' class='digitsonly' size='30' />
The field will be automatically cleaned up for you with no further effort on your part.
The JavaScript
if (classname.search(/digitsonly/, 0) != -1)
{
thistag.onchange = thistag.onmouseout =
thistag.onsubmit = function()
{
this.value = CleanupString(this.value, 0, 0, 1, 1)
}
}
PLUG-IN 78: Text Only (textonly)
Plug-in 78 is similar to the previous one in that it removes all characters that are not text or whitespace from an input field. For example, in Figure 9-4 the user has entered some numbers into the field, which are not allowed.
However, in Figure 9-5 only the text and whitespace remain once the mouse is moved out of the field.
Variables, Functions, and Properties
About the Class
This class is triggered whenever the mouse moves out of the object employing it, at which point it calls the CleanupString() function to strip out all characters that are not text or whitespace.
FIGURE 9-4 The user has entered numbers, which are not allowed.
FIGURE 9-5 The field has been cleaned up by removing the numbers.
How to Use It
When you want to ensure that an input field contains only text or whitespace, place this class name in the class argument of the element, like this:
<input name='name' class='textonly' size='30' />
The field will be automatically cleaned up for you with no further effort on your part.
The JavaScript
if (classname.search(/textonly/, 0) != -1)
{
thistag.onchange = thistag.onmouseout =
thistag.onsubmit = function()
{
this.value = CleanupString(this.value, 1, 1, 0, 1)
}
}
PLUG-IN 79: No Spaces (nospaces)
With Plug-in 79, you can remove all the spaces from an input field. It is probably most useful for stripping spaces out of credit card numbers. For example, how often have you entered your credit card online only to have a form re-presented to you advising that the input was invalid because spaces are not allowed? It’s certainly happened a few times to me, and it’s so unnecessary because it’s an easy problem to fix on behalf of the user. For example, in Figure 9-6 a credit card number has been entered with spaces.
However, once the user moves the mouse away, clicks into another field, or submits the form, the whitespace is removed (see Figure 9-7).
Variables, Functions, and Properties
FIGURE 9-6 A credit card number containing spaces has been entered.
FIGURE 9-7 Now the spaces have been automatically removed.
About the Class
This class is triggered whenever the mouse moves out of the object employing it, at which point it calls the CleanupString() function to strip out all whitespace from it.
How to Use It
To remove the whitespace from a field, place this class name in the class argument of the element, as in the following example, in which both the digitsonly and nospaces classes have been used (they generally go well together when used for inputting credit card details):
<input name='creditcard' class='digitsonly nospaces' size='30'/>
The field will be automatically cleaned up for you by removing all non-digits and all whitespace.
The JavaScript
if (classname.search(/nospaces/, 0) != -1)
{
thistag.onchange = thistag.onmouseout =
thistag.onsubmit = function()
{
this.value = CleanupString(this.value, 1)
}
}
PLUG-IN 80: No Punctuation (nopunct)
Sometimes you want just the bare text to be posted to a web form, and not any punctuation like exclamation points and question marks. You can do this easily with Plug-in 80, which strips them all out for you.
For example, in Figure 9-8 the user is being prompted for a reminder phrase that will be used to prompt them if they forget their password.
FIGURE 9-8 This input contains several punctuation characters.
But in Figure 9-9 the user has moved the mouse away and so the punctuation has been automatically filtered out.
Variables, Functions, and Properties
About the Class
This class is triggered whenever the mouse moves out of the object employing it, at which point it calls the CleanupString() function to strip out all punctuation characters from it.
How to Use It
To remove the punctuation characters from a field, place this class name in the class argument of the element, as in the following example:
<input name='reminder' class='nopunct' size='30'/>
The field will be automatically cleaned up for you by removing all the punctuation.
FIGURE 9-9 The punctuation has now been removed.
The JavaScript
if (classname.search(/nopunct/, 0) != -1)
{
thistag.onchange = thistag.onmouseout =
thistag.onsubmit = function()
{
this.value = CleanupString(this.value, 0, 0, 0, 1)
}
}
PLUG-IN 81: Minimum Whitespace (minwhitespace)
Using Plug-in 81, you can remove all the additional whitespace characters users sometimes enter, replacing any groups of more than one whitespace character with a single space.
For example, in Figure 9-10 a <textarea> has been created in which a user is entering their bio, with a somewhat messy use of whitespace.
However, after passing the mouse away, the extra whitespace is removed, leaving a much better formatted text (see Figure 9-11).
FIGURE 9-10 This <textarea> contains a lot of unnecessary whitespace.
FIGURE 9-11 Now the text has been stripped of unnecessary extra whitespace.
Variables, Functions, and Properties
About the Class
This class is triggered whenever the mouse moves out of the object employing it, at which point it calls the CleanupString() function to strip out all extra whitespace characters from it.
How to Use It
To remove the extra whitespace from a field, place this class name in the class argument of the element, as in the following example:
<textarea class='minwhitespace' rows='6' cols='30'></textarea>
The field will be automatically cleaned up for you by removing all the extra whitespace.
The JavaScript
if (classname.search(/minwhitespace/, 0) != -1)
{
thistag.onchange = thistag.onmouseout =
thistag.onsubmit = function()
{
this.value = CleanupString(this.value, 0, 0, 0, 0, 0, 0, 1)
}
}
PLUG-IN 82: Google Font (gfont[n])
In Plug-in 28 of Chapter 4, you saw how to incorporate Google fonts into your web pages. Unfortunately, you have to fiddle around with it a bit since you must add a <link rel…> tag for every font you include. But using this class, you simply mention a Google font by name, and if it hasn’t been loaded in yet, it is fetched automatically for you.
Figure 9-12 is similar to Figure 4-9 but was achieved using this plug-in, and without having to manually load in all the fonts.
FIGURE 9-12 This class makes using Google fonts even easier.
Variables, Functions, and Properties
About the Class
This is a very easy class to use but a little complicated to explain. If you are interested only in how you can use it, then skip to the next section.
This class works by making a note of every class argument you use that mentions the gfont[] class name. Then, if the font required has not been marked to be fetched from Google’s servers, the full font name is added to the gfonts[] array, and the fontFamily property is set to the font to use.
Later on, the fonts are all loaded in from Google’s servers, but only after all the dynamic functions have been processed. This is because the act of loading in the new style sheets changes the document object model (DOM) by adding new elements to it which, if done before the HTML processing is complete, would corrupt the array of elements to be processed each time a new font is fetched.
How to Use It
To use this class to access Google’s fonts, just mention it in a class argument, supplying the shorthand name of the font from Table 9-1 in the following square brackets, like this:
<div class='gfont[crimson]'>Crimson Text</div>
TABLE 9-1 The Google Font Families and Shorthand Class Argument Names
Once all the dynamic classes used in a web page have been processed, the following JavaScript code is run to load in all the Google fonts from Google’s servers that were accessed in the page:
for (index = 0 ; index < gfindex ; ++index)
{
var newcss = document.createElement('link')
newcss.setAttribute('href', gfurl + escape(gfonts[index]))
newcss.setAttribute('rel', 'stylesheet')
newcss.setAttribute('type', 'text/css')
document.getElementsByTagName('head')[0].appendChild(newcss)
}
With the fonts loaded, all browsers that support these fonts will be displaying them, with the exception of Opera, which requires a nudge to redraw the browser, like this:
if (gfindex && window.opera) setTimeout(function()
{ document.body.style += "" }, 1)
Following is the code used in the main section of JavaScript to process just the gfont[] class
The JavaScript
if (classname.search(/gfont/, 0) != -1)
{
cnamecopy.replace(/gfont[([^]]*)]/, function()
{
switch(arguments[1])
{
case 'cantarell' : font = 'Cantarell'; break
case 'cardo' : font = 'Cardo'; break
case 'crimson' : font = 'Crimson Text'; break
case 'droidsans' : font = 'Droid Sans'; break
case 'droidsansm' : font = 'Droid Sans Mono'; break
case 'droidserif' : font = 'Droid Serif'; break
case 'imfell' : font = 'IM Fell English'; break
case 'inconsolata': font = 'Inconsolata'; break
case 'josefin' : font = 'Josefin Sans Std Light'; break
case 'lobster' : font = 'Lobster'; break
case 'molengo' : font = 'Molengo'; break
case 'neuton' : font = 'Neuton'; break
case 'nobile' : font = 'Nobile'; break
case 'oflsorts' : font = 'OFL Sorts Mill Goudy TT'; break
case 'oldstandard': font = 'Old Standard TT'; break
case 'reenie' : font = 'Reenie Beanie'; break
case 'tangerine' : font = 'Tangerine'; break
case 'vollkorn' : font = 'Vollkorn'; break
case 'yanone' : font = 'Yanone Kaffeesatz'; break
}
if (!window[font]) { window[font] = true gfonts[gfindex++] = font } S(thistag).fontFamily = font if (window.opera) setTimeout(function() // Required by Opera { document.body.style += "" }, 1) // to redraw window } ) }
PLUG-IN 83: Text Middle (textmiddle)
Plug-in 83 vertically centers text using the trick of setting the CSS line-height property to that of the containing object. This is easy enough to do in your CSS on a single-element basis, but because exact heights must be entered, this class is superior since it does the calculation for you.
For example, the <div> in Figure 9-13 has been set to 100 pixels in height, and the text within it has been vertically centered using this plug-in.
Variables, Functions, and Properties
About the Class
This class looks up the height of the object and then sets the line height of its contents to the same as the object height, which has the effect of vertically centering the text.
FIGURE 9-13 The text within the object has been vertically centered.
How to Use It
To vertically center text within an object, mention this class in its class argument like in this example, which first sets the object height to 100 pixels, and the background to aqua, so you can clearly see the effect:
<div class='h[100] textmiddle aqua_b'> This line is vertically centered </div>
The JavaScript
if (classname.search(/textmiddle/, 0) != -1)
{
S(thistag).lineHeight = Px(H(thistag))
}
PLUG-IN 84: Text Glow (textglow[#nnnnnn|#nnnnnn|n])
Plug-in 84 cycles between two colors over a time period you specify, providing a glowing effect. For example, in Figure 9-14 the text has been set to cycle through from yellow to red over the course of a second, and then back again, and so on.
Variables, Functions, and Properties
FIGURE 9-14 You can create a text glow effect with this class.
About the Class
This class calls the ColorFade() function (from the PJ.js file) to constantly fade between two text colors. It uses the JavaScript replace() function to capture the values passed with the class, and then supplies them to ColorFade() via the arguments[] array.
How to Use It
To use this class, you must specify two six-digit hex color numbers, prefaced by # symbols, as well as a duration for the animation in milliseconds. These parameters should be separated by | symbols and placed within square brackets following the class name that is passed in a class argument, like this:
<div class='textglow[#ffff00|#ff0000|1000] b'> This text cycles from yellow to red over the course of a second </div>
This example cycles between the colors yellow and red over the course of a second (1000 milliseconds), and then back over the same duration, at which point the animation begins again.
The JavaScript
if (classname.search(/textglow/, 0) != -1)
{
cnamecopy.replace(/textglow[([^|]*)|([^|]*)|([^]]*)]/,
function()
{
ColorFade(thistag, arguments[1], arguments[2], 'text',
arguments[3])
} )
}
PLUG-IN 85: Background Glow (backglow[#nnnnnn|#nnnnnn|n])
Plug-in 85 is similar to the previous one, but it provides a glow effect to the background color property of an object, as shown in Figure 9-15. This is the same as the previous example, except that a background glow from lime green to blue over 1.5 seconds has been added.
FIGURE 9-15 Combining background and foreground color glows
Variables, Functions, and Properties
About the Class
This class calls the ColorFade() function with slightly different arguments to constantly fade between two background colors. It uses the JavaScript replace() function to capture the values passed with the class, and then supplies them to ColorFade() via the arguments[] array.
How to Use It
To use this class, you must specify two six-digit hex color numbers, prefaced by # symbols, as well as a duration for the animation in milliseconds. These parameters should be separated by | symbols and placed within square brackets following the class name passed in a class argument, like this:
<div class='textglow[#ffff00|#ff0000|1000] b backglow[#00ff00|#0000ff|1500] b'> This text cycles from yellow to red over the course of a second, while the background cycles from lime green to blue over 1.5 seconds </div>
This example cycles between the text colors yellow and red over the course of a second (1000 milliseconds), and then back over the same duration, at which point the animation begins again. At the same time, the background color cycles from lime green to blue over 1.5 seconds, and back again, and so on.
CAUTION Due to the way the two color glow functions operate, they require six-digit hex color values, and will not accept three-digit or name color values.
The JavaScript
if (classname.search(/backglow/, 0) != -1)
{
cnamecopy.replace(/backglow[([^|]*)|([^|]*)|([^]]*)]/,
function()
{
ColorFade(thistag, arguments[1], arguments[2], '',
arguments[3])
} )
}