Using the <PRE> Tag
Return to the Index
How do I use the <PRE> Tag in an OverLIB popup?
The <PRE> tag senses natural CRLF's in the html source, and takes them to be the equivalent of <BR>. (Whereas normally, a CRLF is taken by the browser to be just another blank space in a continuous run of text. )

The problem is that the TEXT argument to overlib() is a quoted string, so any CRLFs would break up the string quoting.

NS4.7 and IE5 both recognize embedded CRLFs and both generate additional CRLF's before and after the <PRE> block. However, it appears that NS 4.7x does not honor the <PRE> tag quite correctly. NN4.7x does not shift to a fixed-pitch font, even in straight HTML context.

Mouseover the words to see examples. The examples here employ TEXTSIZE,3 to specify a size for the text, but in v4.00 and up, one can also use a text size that is a string consisting of both a number and an unit specifier, as in TEXTSIZE, '12px', which will cause the font to be 12pixels. #1 and #2 will look the same in an IE5 browser.

1. Use <PRE> and force line breaks (will work in both browsers except for fixed-pitch font in NS)

    <script>
    HeadString = 'standard text<br>1234567890<br>iiiiiiiiii<br>wwwwwwwwww'
    TextString1 = HeadString + '<PRE>1234567890\niiiiiiiiii<br>wwwwwwwwww</PRE>more standard text';
    </script>

    <a href="javascript:void(0)" onmouseover="return overlib(TextString1,TEXTSIZE,3)" onmouseout="nd()"> word</a>

    Note that either '\n' or '<br>' works to cause the line feed inside the <PRE> tags. '\n' spoofs the normal CRLF within a quoted string, and is probably preferable in this context.

2. Improved for NS. Force fixed pitch font.

    <script>
    TextString2 = HeadString + '<PRE><font face="courier">1234567890\niiiiiiiiii<br>wwwwwwwwww</font></PRE>more standard text';
    </script>

    <a href="javascript:void(0)" onmouseover="return overlib(TextString2,TEXTSIZE,3)" onmouseout="nd()"> word</a>

3. Generic solution - both browsers - if the popup is strictly <PRE> with no other variable-pitch text

    <script>
    TextString3 = '<PRE>1234567890\niiiiiiiiii<br>wwwwwwwwww</PRE>';
    </script>

    <a href="javascript:void(0)" onmouseover="return overlib(TextString3,TEXTFONT,'courier',TEXTSIZE,3)" onmouseout="nd()"> word</a>

4. Cosmetic Generic solution - The page builder insists that the OverLIB impementation must emulate the cosmetic appearance of the underlying HTML. That is, the <PRE> statement must lay out on separate lines with visible indents in the source statements. The end game is to use the <PRE> tag construct as a "layout tool for dummies", while displaying it within an OverLIB popup.

We can come close, but remember some points of reality:

  1. OverLIB is a Javascript function, and you must obey all the rules of Javascript in order to use overlib().
  2. Arguments are passed to Javascript functions, and the arguments must be well-formed under Javascript rules. In the specific case of the TEXT arg, it MUST be a quoted string, or a variable which contains quoted string(s).
  3. Javascript does NOT UNDERSTAND THE CONCEPT of a literal CRLF within a quoted string - in other words, a string that opens with a quote mark, then stretches over several lines before the closing quote mark. This is unlike, say, UNIX shell, which routinely handles this.
      textvariable="This is a
      good UNIX statement
      but bad Javascript"
    In the UNIX shell, " takes precedence over CRLF. In Javascript, CRLF takes precedence. The javascript parser will complain that the first line is un-closed. Then it goes on to the next line after the CRLF, treats it as a line of javascript commands, and complains that it is not a good statement. (AND, since the second line is not in quotes, it is also not a good string assignment).
  4. So we have to write good Javascript that can be passed to the overlib() function. Then Overlib() will pass it to the browser. At THAT time, it must satisfy the HTML rules for the <PRE> tag. i.e. built-in spaces and CRLFs.
  5. It's easier done than said.

Start with the intended <PRE> statement

    <PRE>
    1. no indent
        1.1 four indent
            1.1.1 eight indent
            1.1.2 eight indent
                    deliberate blank line
        1.2 four indent
            1.2.1 eight indent
            1.2.2 eight indent
    </PRE>

Make it look like a well-formed string variable - that is, you can continue to use separate lines, but make each one of them a string and join the strings with the '+' string concatenation operator. This involves defining a variable and putting a quotation mark before and after each line, and a '+' sign at the end of each line.

    <script language=javascript>
    TextString4="
    <PRE>"+
    "1. no indent"+
    "    1.1 four indent"+
    "        1.1.1 eight indent"+
    "        1.1.2 eight indent"+
    ""+
    "    1.2 four indent"+
    "        1.2.1 eight indent"+
    "        1.2.2 eight indent"+
    "</PRE>";
    </script>

After passing through the various Javascript function arg lists, overlib()'s internals send the string into a document.write() which delivers it as HTML to the browser. Now, we need those CRLFs again because the WHOLE PURPOSE of this exercise is to present a CRLF-separated list to the <PRE> tag. Document.write() interprets \n as newline (same as many languages) and puts the CRLF back, so <PRE> can work as expected. So add \n INSIDE the quotes at the end of each line.

    <script language=javascript>
    TextString4="<PRE>"+
    "1. no indent\n"+
    "    1.1 four indent\n"+
    "        1.1.1 eight indent\n"+
    "        1.1.2 eight indent\n"+
    "\n"+
    "    1.2 four indent\n"+
    "        1.2.1 eight indent\n"+
    "        1.2.2 eight indent"+
    "</PRE>";
    </script>

And then make the <a> tag as before.

<a href="javascript:void(0)" onmouseover="return overlib(TextString4,TEXTFONT,'courier',TEXTSIZE,3)" onmouseout="nd()"> word</a>

Please let me know if you encounter problems.Modified by REB,June 1, 2004