HTML Code for Scrolling Text

HTMLCode.jpg

One of the most useful snippets you can have is the HTML code for scrolling text. It tightens up the presentation of your content and is very easy to implement without much coding at all.

The Basic HTML Code for Scrolling Text

Strictly speaking, it's not pure HTML code that is currently used for this effect. It really falls into the realm of cascading style sheets, using a <DIV> tag and associated properties such as "overflow". However, since you can set all of those properties directly within the HTML on your page, it counts; just realize that you might want to set this in a separate .CSS document if you're planning on using a lot of text boxes with scroll bars.

First, the Code

Here is the basic syntax for a scrolling text box:

<div style="height:150px;width:225px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">This is where your text goes. The scroll bars only appear when the text actually goes further than the limits of the box you defined.</div>

Now, to understand the code, it's important to realize that the whole thing is enclosed first and foremost in a <DIV>. That's what defines the area of this particular text box, and if you don't define the boundaries then the browser simply makes the boundaries as big as they can be. Since that defeats the purpose of a scrolling text box, you need to define the size by using the "height" and "width" properties (in this case 150 pixels high, 225 pixels wide). You'll notice that after each property, the value is given after a colon, and after both property and value are defined, a semi-colon is put in afterwards. It's important to include these, even for the last property, or the CSS won't work.

The next property after size is the font. You may notice that while the size, line height, and font type are defined, none of those words are used. This is one of the advances in HTML 5.0 and CSS. Some properties are defined without having to spell them out.

The last property of the <DIV> is one example: "overflow: scroll;". It tells the <DIV> box what to do if the text inside spills out over the boundaries defined by height and width. In this case, it's supposed to put a scroll bar on the left side to allow the viewer to read all the text. Notice that you didn't have to tell the browser where to put the scroll bar; it defaulted to the right. What if you wanted the scroll bar to be horizontal on the bottom? You simply become more specific saying "overflow-x: scroll" (which indicates the horizontal or "x" axis).

Other Variations

There are many other properties that you can use to customize the <DIV>, and therefore make your scrolling text box look exactly the way you want:

  • Background: You can determine a background color using hexadecimal or other color codes
  • Background Image: For more texture you can use a background image, even controlling the X and Y repeat values.
  • Border: Setting off the text box with a border styled as a line, dash, inset, or other variant is also possible.

More types of code can be brought in using other CSS and HTML properties, as defined in sites like Page Resources or Quackit.

Marquee: the Other Scrolling Text

There is another kind of scrolling text that is rarely used anymore because, like the blink tag, it was considered to be annoying to the eye. But the <MARQUEE> tag can be used much like the <DIV> tag, including setting properties such as:

  • Behavior: slide, scroll, alternate
  • Direction: left, right, up, down
  • ScrollAmount: this value indicates speed, with 1 being slow and 20 being fast.

Quackit.com has a full rundown of the implementation of this kind of HTML code for scrolling text, including a link to the Falling Text Generator. However, while this kind of scrolling text may seem cool to begin with, it quickly becomes annoying to the user on your site.

On the other hand, using the <DIV> to keep the content of your site tightly laid out will make your site much more professional looking and easier for the user to comprehend. Understanding the code is a core step of any developer's education.

Was this page useful?
HTML Code for Scrolling Text