March 1999

Special Effects with Text Using the Label Control

The Microsoft Label control can be used to manipulate the color, alignment, and angle of text on your Web pages. You can also use it to display text that flows along any lines you specify. In this article, we'll show you some examples of how you can use the Label control to create both static and dynamic text for the Web.

Label control properties, methods, and events

The Label control has several properties for manipulating text. They are:

Caption--The text to be displayed.
Angle--The angle of the text in degrees. A positive number gives a clockwise rotation.
Alignment--The alignment of the text within the control, specified by one of the values given in Table A.

Table A: Value for Alignment of Label control

Value Horizontal axis Vertical axis

0 left top

1 centered top

2 right top

3 left centered

4 centered centered

5 right centered

6 left bottom

7 centered bottom

8 right bottom

BackStyle--Whether the control's background is transparent (0) or opaque (1). An opaque background is required if you want to display a background color.
BackColor--Background color of object.
FontName--Name of a TrueType font.
FontSize--Size of the text's font.
FontItalic--Flag for italic (1) or no italic (0).
FontBold-- Flag for bold (1) or no bold (0).
FontUnderline-- Flag for underline (1) or no underline (0).
FontStrikeOut-- Flag for strikeout out (1) or no strikeout (0).
ForeColor--Font color of text.
Mode--The mode of the control, specified by one of the values
in Table B.

Table B: Values for Mode

Value Description

0 Normal, no rotation

1 Normal text with rotation

2 Apply user-specified lines, no rotation

3 Apply user-specified lines, with rotation

The user-specified lines, referred to in Table B, are created by the TopPoints, TopXY, BotPoints, and BotXY PARAM tags. These allow you to create unique shapes for your text, as we'll illustrate.

For completeness, we'll also mention the standard Label control method and events. The only method is an AboutBox, which displays an About dialog box. The events are Click, Change, DbleClick, MouseDown, MouseMove, and MouseUp.

A simple label

Let's start with a simple example. The code in Listing A contains the Label control that created the text in Figure A. We've angled the text 30 degrees, aligned it at the middle and top of the object, and made the background color pink.

Figure A: We've angled, aligned, and colored the text in this simple Label control example

[ Figure A ]

Note:

We added the Label control to our page with the ActiveX Control Pad, which is available for free download from the MSDN Online Web Workshop at http://msdn.microsoft.com/workshop/misc/cpad/default.asp

Listing A: Code for creating simple label object

<OBJECT ID="IeLabel0" WIDTH=150 HEIGHT=150
CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-
=>00AA00A47DD2">
	<PARAM NAME="Caption" VALUE="Let's">
	<PARAM NAME="Angle" VALUE="30">
	<PARAM NAME="Alignment" VALUE="1">
	<PARAM NAME="Mode" VALUE="1">
	<PARAM NAME="ForeColor" VALUE="#0000ff">
	<PARAM NAME="BackStyle" VALUE="1">
	<PARAM NAME="BackColor" VALUE="#ffc0cb">
	<PARAM NAME="FontName" VALUE="Comic Sans MS">
	<PARAM NAME="FontSize" VALUE="40">
	<PARAM NAME="FontItalic" VALUE="0">
	<PARAM NAME="FontBold" VALUE="0">
	<PARAM NAME="FontUnderline" VALUE="0">
	<PARAM NAME="FontStrikeout" VALUE="0">
	<PARAM NAME="TopPoints" VALUE="0">
	<PARAM NAME="BotPoints" VALUE="0">
</OBJECT>

Let's get dynamic

An angled label is fine, but how about adding a little creative movement, as it were. We can also use the Label control to make our text move, as shown in Figure B.

Figure B: The Label control can make our text dance.

[ Figure B ]

To make each letter move independently, each letter is created with a separate Label control. The relevant code for the page is shown in Listing B. In the interest of brevity, I've only included all of PARAM tags for the first Label object. For all of the other objects, I've included only the relevant tags.

Listing B:Code for moving label text

<HTML>
<HEAD>
<SCRIPT language = "VBScript">
Dim i, Angle, Up, Side, Corner
Angle = 0
Up = 1
Side = 3
Corner = 2

Sub stop_onclick
	timer1.enabled = false
End Sub

Sub start_onclick
  timer1.enabled = true
End Sub

Sub timer1_timer
	if Up = 1 Then
		Up = 7
	Else
		Up = 1
	End if
	IeLabel1.Alignment = Up

	Angle = IeLabel2.Angle
	IeLabel2.Angle = Angle + 30

	Side = IeLabel3.Alignment
	if Side = 3 Then
		Side = 5
	Else
		Side = 3
	End if
	IeLabel3.Alignment = Side

	Angle = IeLabel4.Angle
	IeLabel4.Angle = Angle - 30

	Corner = IeLabel5.Alignment
	if Corner = 6 Then
		Corner = 2
	Else
		Corner = 6
	End if
	IeLabel5.Alignment = Corner
End Sub

</SCRIPT>
</HEAD>
<BODY >
<OBJECT ID="timer1" WIDTH=5 HEIGHT=5
	CLASSID="CLSID:59CCB4A0-727D-11CF-AC36-
	=>00AA00A47DD2">
	<PARAM NAME="Interval" VALUE="500">
	<PARAM NAME="Enabled" VALUE="False">
</OBJECT>

<! Label object for "Let's" from 
<! Listing A goes here

<! Letter `D'
<OBJECT ID="IeLabel1" WIDTH=100 HEIGHT=100
	CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-
	00AA00A47DD2"> 
	<PARAM NAME="Caption" VALUE="D">
	<PARAM NAME="Angle" VALUE="0">
	<PARAM NAME="Alignment" VALUE="1">
	<PARAM NAME="Mode" VALUE="1">
	<PARAM NAME="ForeColor" VALUE="#0000ff">
	<PARAM NAME="FontName" VALUE="Comic Sans MS">
	<PARAM NAME="FontSize" VALUE="40">
</OBJECT> 

<! Letter `A'
<OBJECT ID="IeLabel2" WIDTH=100 HEIGHT=100
	CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-
	00AA00A47DD2">
	<PARAM NAME="Caption" VALUE="A">
	<PARAM NAME="Angle" VALUE="0">
	<PARAM NAME="Alignment" VALUE="4">
	. . .
</OBJECT>

<! Letter `N'
<OBJECT ID="IeLabel3" WIDTH=100 HEIGHT=100
	CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-
	00AA00A47DD2">
	<PARAM NAME="Caption" VALUE="N">
	<PARAM NAME="Angle" VALUE="0">
	<PARAM NAME="Alignment" VALUE="4">
	<PARAM NAME="Mode" VALUE="1">
	<PARAM NAME="ForeColor" VALUE="#0000ff">
	<PARAM NAME="FontName" VALUE="Comic Sans MS">
	<PARAM NAME="FontSize" VALUE="40">
</OBJECT>

<! Letter `C'
<OBJECT ID="IeLabel4" WIDTH=100 HEIGHT=100
	CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-
	00AA00A47DD2">
	<PARAM NAME="Caption" VALUE="C">
	<PARAM NAME="Angle" VALUE="0">
	<PARAM NAME="Alignment" VALUE="4">
	. . .
</OBJECT>

<! Letter `E'
<OBJECT ID="IeLabel5" WIDTH=100 HEIGHT=100
	CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-
	00AA00A47DD2">
	<PARAM NAME="Caption" VALUE="E">
	<PARAM NAME="Angle" VALUE="0">
	<PARAM NAME="Alignment" VALUE="4">
	. . .
</OBJECT>

<BR>
<! Start and stop buttons added for debugging
<Input type = "button" id = "stop" 
	value = "Stop!" >
<Input type = "button" id = "start" 
	value = "Start!" >
</BODY>
</HTML>

As you can see from the code, we've programmed the Timer control to repeatedly change one property of each of the letters:

D moves up and down between an alignment of 1 and an alignment of 7.
A rotates clockwise by having a positive 30 degrees added to its angle each time.
N moves side to side between an alignment of 3 and an alignment of 5.
C moves counter-clockwise by having a negative 30 degrees added to its angle each time.
E moves from the upper-right corner to the lower-left corner between an alignment of 2 and an alignment of 6.

Leading text down a path

Our final example of using the Label control, shown in Figure C, illustrates how you can define lines along which you can have your Label's text flow.

Figure C: Make text flow along any lines you specify.

[ Figure C ]

The idea is to provide the Label control with a series of TopPoints and BotPoints that define the top line and the bottom line for your text. The lines can take on any shape, and can run parallel, converge, and even cross, with very interesting results.

In our example, we've defined two lines that are sine waves, matched in period and amplitude, and with a slope. The code can be found in Listing C. Since there are more than 100 points for both the top and bottom lines, we've only included the first 10 or so points of each line by way of illustration. To see all of the code, download it from our FTP site.

Listing C: Defining lines for text to follow

<HTML>
<HEAD>
</HEAD>
<BODY >
<OBJECT ID="IeLabel1" WIDTH=300 HEIGHT=300
 	CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-
	00AA00A47DD2">
	<PARAM NAME="Caption" 
		VALUE="SKI MT EVEREST">
	<PARAM NAME="Angle" VALUE="0">
	<PARAM NAME="Alignment" VALUE="4">
	<PARAM NAME="Mode" VALUE="3">
	<PARAM NAME="ForeColor" VALUE="#0000ff">
	<PARAM NAME="FontName" VALUE="Impact">
	<PARAM NAME="FontSize" VALUE="20">

	<! Define the number of points for the 
	<! top line
	<PARAM NAME="TopPoints" VALUE="101">

	<! List of points for the top line
	<PARAM NAME="TopXY[0]" VALUE="(0,40)">
	<PARAM NAME="TopXY[1]" VALUE="(6,43)">
	<PARAM NAME="TopXY[2]" VALUE="(12,45)">
	<PARAM NAME="TopXY[3]" VALUE="(18,46)">
	<PARAM NAME="TopXY[4]" VALUE="(24,45)">
	<PARAM NAME="TopXY[5]" VALUE="(30,44)">
	<PARAM NAME="TopXY[6]" VALUE="(36,41)">
	<PARAM NAME="TopXY[7]" VALUE="(42,38)">
	<PARAM NAME="TopXY[8]" VALUE="(48,35)">
	<PARAM NAME="TopXY[9]" VALUE="(54,31)">
	. . .

	<! Define the number of points for 
	<! the bottom line
	<PARAM NAME="BotPoints" VALUE="101">

	<! List of points for the bottom line
	<PARAM NAME="BotXY[0]" VALUE="(0,155)">
	<PARAM NAME="BotXY[1]" VALUE="(6,158)">
	<PARAM NAME="BotXY[2]" VALUE="(12,161)">
	<PARAM NAME="BotXY[3]" VALUE="(18,162)">
	<PARAM NAME="BotXY[4]" VALUE="(24,163)">
	<PARAM NAME="BotXY[5]" VALUE="(30,163)">
	<PARAM NAME="BotXY[6]" VALUE="(36,162)">
	<PARAM NAME="BotXY[7]" VALUE="(42,160)">
	<PARAM NAME="BotXY[8]" VALUE="(48,159)">
	<PARAM NAME="BotXY[9]" VALUE="(54,157)">
. . .

</OBJECT>
</BODY>
</HTML>

Label limitations

The only problem I found with the Label control was with positioning. I tried using CSS1 positioning attributes, and putting the object inside of a positioned DIV block. Neither of those worked. By creating a Label object bigger than your text (by adjusting the object's height and width attributes), you do have a lot of flexibility moving the text around within the object using the Alignment property; however, any space taken up by the object can't be used for other elements you may want to place on your page.

What I found worked the best for positioning was using a traditional table layout for your page and placing the Label object into one of your table cells. It's not as straightforward a solution as one might like, but it's workable.

Conclusion

As you can see, the Label control offers you the chance to be creative with your text in ways that Cascading Style Sheets just don't offer. Particularly impressive is the ability to animate text, and to make it follow an arbitrary pre-defined path Rregardless of its limitations, the Label control is one more trick you can add to your toolbox for building creative pages for the Web.

Copyright © 1999, ZD Inc. All rights reserved. ZD Journals and the ZD Journals logo are trademarks of ZD Inc. Reproduction in whole or in part in any form or medium without express written permission of ZD Inc. is prohibited. All other product names and logos are trademarks or registered trademarks of their respective owners.

Value	Horizontal axis	Vertical axis
0	left	top
1	centered	top
2	right	top
3	left	centered
4	centered	centered
5	right	centered
6	left	bottom
7	centered	bottom
8	right	bottom

Value	Description
0	Normal, no rotation
1	Normal text with rotation
2	Apply user-specified lines, no rotation
3	Apply user-specified lines, with rotation