PageBuilder Blinking Marquees

     This tutorial suggests some methods for using the proprietary WebTV/MSIE <marquee> tag to make "blinking" text to enhance email, NG posts, and PageBuilder webpages, similar to the blinking text provided by the Netscape <blink> tag. WebTV marquee design and layout is virtually unlimited – limited only by personal preference, creativity, and skill of their creators. Webbers have created thousands of phenomenal, personal, and unique marquee designs; but, have had problems making text blink as desired with the the marquee tag – especially single words and phrases inside blocks of text, which are so easy with the netscape blink tag. Try the suggestions I make here, work with them, and let us all know what else you discover about making blinking marquees.

Here's the code for the centered blinking marquee:

<p align="center"><font color="red"><blink style="background-color: skyblue;"><marquee hspace="90" bgcolor="skyblue" behavior="scroll" direction="left" scrollamount="359" scrolldelay="800">Here's how to "blink" a PageBulder Marquee</marquee></blink><font></p>

     To put a blinking <marquee> on a PageBuilder webpage, requires a precise calculation of the blinking text length and the distance the message scrolls during each blink from the margin to the center position I selected. To make this calculation, we need to know the total width in pixels of the text characters to be used in the marquee message, and the distance, referred to as "scrollamount," that the marquee text travels across the screen to its blinking position. You must use the desired font size code, and count the characters in "Preview," to see full line length, when you make the test line suggested here. Unless you use default text size, you will count less characters per line with larger text size – always count characters in "Preview!" So, to measure the message text character width; fill a line of various characters, at your desired font size, and always use the full alphabet for the best average length of a line, like this:

     Which, with medium text default size setting, gives us 60 characters per line on our WebTV screens. Therefore each character reguires, 544 / 60 = 9.07, which is 9-pixels per character. The above message contains 42 characters and spaces, which will make the message 378 pixels long. To find the additional margin space required, to center the message text, we divide the balance of screen space by 2 and add this figure to the message width to calculate the scrollamount. The TV screen area is 560 pixels wide with 8 pixel margins, which makes the TV screen text area 544 pixels wide. Therefore the scrollamout equals: (544-378) / 2 + 378 = 461, which is the distance the message text, as a marquee, has to travel to its' centered blinking position from the margin space. Typically, the marquee scrolldelay attribute, which is the interval in milliseconds between blinks, should be set at 400 or higher – I set it at 800 here (0.8 second).

     Note: The per character pixel width calculations used here are based on a "medium" print size setting for webpages and email. If your font size settings are "small" or "large," you would have more or less characters per line in your calculations. Also, remember if you set other font sizes in a PageBuilder document, you must count characters per line in "Preview," as noted above. And, remember: WebTV screen size is fixed at 560 pixels wide, while computer screens vary by user choice from 640 to 1024 or more pixels wide – typically 800 pixel width. When your marquees are viewed on computers with these larger screen width settings, your marquee text will shift off your set position as explained below.

Here's a line with first two words blinking. Note: WebTV viewers, if you do not see the blinking text correctly sized and positioned, check your webpage text size "Setting" from your Home Page – you need your browser text size set to "medium" to see the blinking text correctly sized and positioned, as explained herein. Computer users please refer to my comments about screen size below.

     Note: I used the "bgcolor" attribute in two (2) of the marquees above to show how it enhances the "attention-getting" effect of the blinking text. With WebTV and MSIE you put the "bgcolor" attribute inside the marquee tag. But, for Netscape I had to put a background "style" attribute in the blink tag or font (color) tag to get a background color that Netscape browsers display, as shown in the code for the first marquee at the top of this webpage. And, Netscape blinks both the background color and text, while WebTV/MSIE blinking marquee backgrounds do not blink with the text.

     Note: the text width calculations I used in this tutorial are based on your browser's text size set on "medium" as default text size. If you have your browser's settings on "small" or "large" default text size, the blinking marquee words will not fit the space, and will overlap blink – because the marquees are based on calculated text width. If the marquees don't blink in their proper position for your browser, change your default text size to "medium" on your "Settings" page.

     Note: I made the seven (7) marquee words blink in the above paragraph just to demonstrate that I could place the blinking marquees anywhere within the paragraph text by my method; but, it looks kinda tacky, and irritating; which illustrates my point that you should not overdue your use of blinking text so as to make it annoying and distracting to your webpage viewers. Also, I put Nescape "blink" tags around the marquee tags and it works for Netscape browser users. But; because the Netscape blink position is not positioned by the marquee scrollamount, I had to add alignment attributes to the Netscape blink tags, paragraph tags, or table tags in this document. As an example, for style use: style="text-align: left | center | right" where required in some of the examples in this webpage.

     Here's the code I used. Note: I don't show all the blinking tags, just to save typing; but, you can see all the code by using the source code viewer below. I had to use alternate (escape) characters (&lt;) to show the code, because the HTML tag "<plaintext>" is not supported by the newest browsers. The plaintext tag is now obsolete and has been depreciated under HTML 3.2 and 4.0. Most browsers (computers), except WebTV, do not support the use of the plaintext tag to show HTML code as plaintext.

<font color="red"><blink style="background-color: skyblue;"><marquee bgcolor="skyblue" width="78" direction="right" scrollamount="76" scrolldelay="600" align="texttop">First two</marquee></blink></font> words in line blink, the rest don't. The first two words blink and just to make it fun, I made several inline row interior words blink below. It's real simple folks, if you use the correct HTML alignment code syntax! Also, the blinking text paragraph below works with MSIE, Netscape, and WebTV browsers! </p><p>     How did I do this? Simple! I just made the <font color="white"><blink style="background-color: black;"><marquee bgcolor="black" width="78" direction="left" scrollamount="76" scrolldelay="600" align="texttop"> marquee </marquee> </blink> </font> direction opposite the side I wanted to blink; so that the blinking text is .... well you get the idea – that's enough for you to see the code syntax. The key here to remember is that the marquees width and scrollamount equals the text width, and is basically just like inserting images inline – just use the correct alignment attributes.

     Netscape browsers don't support MSIE's <marquee> tag, but there is a way to make Netscape appear to show a marquee. It can be done with a javascript scrolling text script, like this:

Note: Some older browser users will have to "click" on the text box to start the message scroll, because their browsers do not support the "onFocus" and "onBlur" event handlers that I use to start and stop the scrolling message.

     Hey, who said Netscape couldn't show a marquee like MSIE? Not really; but, this little trick is close enough, isn't it, folks? This script can be used with Netscape browsers to scroll text in the status bar, text boxes, or across the screen. It just uses the old familiar status bar scroller script in an input text box; which incidently, many of you may remember that Netscape originated status bar scrolling text with Netscape 2.0. Then Microsoft countered with the propriatary "marquee" tag in MSIE 3.0. Then Netscape followed with it's propriatary "blink" tag in Netscape 3.0.

Here's the script I used:

<p align="center"><font color="navy"><form name="Scroll"><script>myMsg="Here's a scrolling message Netscape sees like a marquee, isn't it neat?..."; pos=0; function scrollMsg() {document.Scroll.ScrollBox.value=myMsg.substring(pos, myMsg.length) + myMsg.substring(0, pos-1); if (pos < myMsg.length) pos++; else {pos=0} scrollTime=window.setTimeout('scrollMsg()', 100); function clearTimer() {clearTimeout(scrollTime);}};</script><input type="text" name="ScrollBox" size="50" value="" bgcolor="skyblue" nohighlight usestyle onFocus="scrollMsg()" onBlur="clearTimer()"></form></font></p>

     In the above script, I created a javascript function named "scrollMsg()" and called the function with an "onFocus" event handler in the input text box HTML tag. I stop the message scroll by using the "onBlur" event handler in the input text box to call a "clearTimer()" function, which clears the window.setTimeout()" timer. You can vary the speed of the scrolling message by changing the millisecond value in the setTimeout – ie, changing the setTimeout() value from "100" to 200, 300, etc, will slow down the scroll speed to the basic WebTV marquee scroll speed. Play with the setTimeout intervals to get the speed you desire. You can also use this script to just scroll a message across a webpage, or in a browser's status bar, as well as the text box shown above.

     Check out the use of this script at my beginning DHTML website. See how simple the above script is for this function; but, WebTV is real quirky about JavaScript syntax, so you need to learn how to script for WebTV PageBuilder webpages! Check out my WebTV PageBuilder JS scripting webpage for an explanation of the precise scripting syntax for WebTV PageBuilder webpages. JavaScript works great in PageBuilder if you learn the basic scripting syntax I suggest at the above website.

     Also, the marquee bgcolor is a marquee tag attribute; but, the font color must be used outside the blink and marquee tags. Also, the marquee width attribute is not used because of the quirky way it works with the bgcolor attribute. If I wanted to set marquee width for a blinking marquee with a bgcolor attribute, I would have to include the right margin width, too. That would make the bgcolor extend to the edge on the right side , which would be real tacky. So to use a blinking marquee with "bgcolor," you have to use the marquee "hspace" attribute; which defines space on each side of the marquee, and therefore, the marquee width. You then calculate the marquee "scrollamount" from the width of the marquee, inside the "hspace," instead of from the webpage margin. In the first example at the top of this webpage: I calculated the width of the marquee blinking text, and subtracted the marquee text width from the full page width to get the total webpage space around the marquee; ie, sum of the left and right margins, which I divided by two (2) to get the "hspace" attribute value, which is the space on each (either) side of the marquee. But, I had to "tweek" the values a little to get the exact width and perfectly centered blinking marquee with bgcolor. Why is all this "tweeking' necessary? Because WebTV uses the Helvetica "proportional" font which makes each different combination of letter and number characters to be of various total lengths. You could use the fixed width "Monaco" font by using the <pre> or <tt> tags to simplify your calculations, but this monospaced font looks like crap. Work with the bgcolor attribute in the marquee tag and you'll see what I mean. Remember, it works differently when you put marquees inline inside paragraphs of text as shown above; ie, you just select the bgcolor and it will be the required length for the marquee – check the source code to see the difference. And practice, practice, and practice!

     Please note: Computer users may have to adjust their computer screen width to correctly position and view the blinking marquees in this webpage. Screen sizes larger than the WebTV screen width the marquees are calculated for will show displaced and/or overlaping text. I suggest computer users view WebTV PageBuilder webpages with "Desktop Area" size set to 640 x 480 pixels. Also, to view a webpage like this, where screen width equal to WebTV screen width is critical, I suggest that viewers click the "Restore" icon on the window title bar; and then click on the bottom right corner of the smaller window and "drag" the window border to resize the window to approximately the WebTV screen size. If your computer using friends will learn to resize their windows when it appears screen width may be a critical factor for your webpage content spacing, aspect ratios, and positioning to be viewed as you intended, they will never have any problems viewing your PB websites – unless the problem is a code syntax error, that your WebTV browser overlooks when editing and viewing your webpage.

     Now folks, here's another very simple suggestion that will always insure that your computer using friends always view your webpages as you intended: have them download the WebTV Viewer at: http://developer.webtv.net/design/tools/viewer/. The WebTV Viewer is a free 6.3mb file download, available in both PC and Mac versions, that is basically a WebTV browser for Windows or Mac computers that views webpages as our set-top browsers sees them. If all your computer using friends used the WebTV Viewer, they wouldn't have any problems viewing your PageBuilder webpages. Remember, as we all know from the HTML validator websites, WebTV is very lax and tolerant about many HTML syntax errors; but, all the latest browsers are very strict on HTML code syntax because they support the very strict code syntax required for XHTML and XML.

     Here's the marquees aligned left and right, respectively, just by changing the marquee direction and the scrollamount values, calculated as explained above:

     In the above examples, the left aligned marquee has a direction of left and a scrolldelay of 2000 milliseconds (2 seconds between blinks); and the right aligned marquee has a scrolldelay of 400 milliseconds (0.4 seconds between blinks), with a direction of right. And, because the marquees are blinking at the margins, the scrollamount is: 560 – (2 x 8) = 544 (pixels), which is the width of the TV screen text area, and the distance the marquee moves to its' blinking position.

     The above examples show how to do the math as a way of explaining the problems involved with blinking marquees. However, remember to tell your computer using friends that this only works on computers with 640 x 480 display screen size. Larger computer screen sizes with MSIE will have the marquee shifted opposite to the direction of travel by an amount equal to the difference in screen size; ie, the marquee will always be displayed at the scrollamount distance from the margin opposite the direction of travel. Netscape will see a center screen blink it you use center tags or center aligned paragraphs, or other container elements, outside the blink and marquee tags.

     In the above example, I easily and quickly C&P'd 18 nonbreaking spaces ahead of the marquee in the marquee text area, to move it to the right. Why 18 spaces instead of the 10 character shift to the center you see here? Nonbreaking spaces are default sized to the smallest text characters – in this case, 18 nonbreaking spaces equal 10 characters, or 90 pixels, which is 5 pixels per nonbreaking space. You must enter the nonbreaking spaces on the same side of the text as the marquee direction, so the nonbreaking spaces push against the direction of text flow; ie, direction-left, spaces first on left; direction-right, spaces last on right, in the marquee text area. To move your blinking text where you want, add or delete nonbreaking spaces and change marquee direction, as explained above. Note: This example came from Paul Erickson in summer '98. I was using alignment tags and the "hspace" marquee attribute to position and center my blinking marquees; but, Paul preferred the non-breaking spaces because he could push the marquee to any desired horizontal alignment. We also used "Alt-Space" instead of the non-breaking spaces to push the blinking marquees into the desired horizontal alignment.

     To show you how to put blinking marquees in your WebTV signature box code, I made a table below the width of our email pages; ie, considering sidebar (110 pixels wide) and margins (8 pixels each) the emal text area is: 560 – (110 + 8 + 8) = 434 (pixels) wide. Here's some blinking marquees for email page width in a 440 pixel wide right-aligned table. The extra 6-pixels is to allow for table cellpadding (default 3-pixels) on each side, in this PageBulder webpage table. However, you may want to set cellpadding to "zero" if you don't want the spacing. Put something like this in your email signature boxes:

     The "GUNGHO" blinking table above shows some of the neat things you can do with blinking marquees in your email signature boxes. If you use these type of blinking marquees on a PageBuilder webpage they work the same as in your sig; but, remember to put them in a table the width of your email "write" screen. Also, remember WebTV and HTML 4 uses: valign="middle" for <td>'s, while Microsoft uses: valign="center" on some (?) of our WebTV NT servers. Just for your information; but, outside the scope of this tutorial, also note: WebTV supports several proprietary table tags, such as "align=(bleedleft | bleedright | absmiddle | justify)," "absheight," "abswidth," "valign=(baseline | bottom | middle | top)," that you may use for WebTV (and some Microsoft) specific webpage content. Check out these tags to see if you may want to use them.

Note: In the above blinking table box, computers will see the blinking text as plaintext, in their default font type, instead of the proprietary WebTV "emboss(ed)" text and table background "gradcolor" tags I used for WebTV viewers!

     When making a blinking marquee table, it's trial and error to get it right. Just patiently "tweek" the values – add or subtract a few pixels at a time, and add the pixel width of any spaces you want around the text if you use background color. Remember to carefully observe the effects of each change you make so you can increase or decrease the changes, or make an opposite change if necessary. Understanding the mechanics and lots of practice is all that's required to make blinking marquee text. Blinking text is a novelty, use it in good taste – don't make it annoying or distracting from your other webpage and email sig. box content!

     Remember, our signature boxes have an 8-pixel margin, that is put inside our email page body which also has another 8-pixel margin. If you center the text in the box in your email write page, your sent emails will show the box text shifted to the right because of the extra margin. Therefore, you must set the blinking text in the box to appear shifted 8-pixels to the left, to compensate for the shifting when you send the email that is caused by the extra margin space explained above. It's trial and error, folks. Just increase or decrease the scrollamount and/or table widths in small increments until you get the message text positioned where you want it.

     Use PageBuilder "Preview," to check webpages; or email yourself to check how emails or posts look. Also, to check your email sig. boxes and how your posts on the NG servers will appear, you can use the news:alt.discuss.test NG to try your blinking signature boxes. Just remember this: our WebTV email servers appear to display some of our sig. box content differently in our emails, than on the NG servers. Use the test NG noted above to get your blinking marquees like you want them for your NG posts.

Have fun with this, folks!

© 2000 The Weather Underground, Inc.

Site Visitors

Since 07/03/00