The Vagaries Of

Stupid HTML Indent Tricks

Margins?

Those neat page borders?

Truly detailed and precise page layout?

WYSIWYG?

BZZZTT!! Sorry, but thanks for playing HTML roulette.

Johnny, tell our web page author what he's won:

WYSIWYHTUWS!

What You See Is What You Hope The User Will See :-)

In fact, what I see in this page is what I hope you will see, although I know that some won't see what I see. It will appear fine for many, acceptable for some, and truly awful for a few.

The indents of this paragraph are brought to courtesy of the SIT (Stupid Indent Trick) known as 'clear GIF', a single pixel with space 'reserved' by the browser using the HSPACE attribute. Not all browsers handle transparent GIFs. Not all browsers support HSPACE. But it's fairly reliable and with care 'collapses' neatly under most browsers that don't support these features.

Other common SITs include inappropriate use of <BLOCKQUOTE>, and the invalid HTML <UL> sans <LI>, and <DL> sans <DT>/<DD> kludges. Valid or invalid, appropriate or inappropriate, these tricks are rendered by various browsers with a wide variety of indentations, ranging from 'much' to 'none'. YMMV

Many of these tricks do have valid use in controlled local/intranet environments where everyone is using a known browser. It is the open Internet where the SIT is invitation to disappointing and truly ugly page rendering.

Test Page

Along the right margin of this page, (if you're using a tables- and images-aware browser,) is a snippet of an image created by tagtest.html. Full page images can be retrieved via the browser's names in the following table. They're all in the 20-25k file size range. For those screen clips, I made a best-eyeball-guesstimate to set the browsers to 640 pixels wide, and they're all about 1024 pixels high.

For these tests, all browsers were set to 14pt proportional and fixed width fonts. (MSIE doesn't offer pt size, set to 'medium'.) My personal comfortable preference is 16pt for this 1280x1020x14" screen, but couldn't quite fit everything in for som e browsers, so used 14pt. Regardless, all browsers displayed the same indents at all font sizes.

Browser abbreviations:

MSIE
Microsoft Internet Explorer
NCSA
NCSA Mosaic
NN
Netscape Navigator
OP
Opera
OPB
Oracle PowerBrowser
SPRY
Internet In A Box Mosaic
WW
WinWeb
snippet of msie201.gif

Stupid Indent Tricks
Just the facts, Max.
  • All measurements are 'pixels'.
  • (n) = see notes below
OS: Windows 3.1
Browser Default Top Margin Default Left Margin HSPACE =5 Normal Indent Blockquote Indent UL Indent DL Indent
MSIE 2.01 20 10 21 10 31 31 10
MSIE 3.0a 16 10 21 10 52 31 10
NCSA 2.1.1 4 24 33 20 40 40 40
NN 1.22 ATT 21 13 24 13 53 53 13
NN 2.02 15 10 21 10 50 50 10
NN 3.01 15 10 21 10 50 50 10
OP 2.12 10 10 21 10 39 30 10
OPB 1.5 5 4 15 4 104 54 4
SPRY 4 4 24 33 pre 19 norm 20 (3) 21 40 40
WW 1.0a1 (1) (1) (2) pre 23 norm 24 (3) 24 48 48
Browser Default Top Margin Default Left Margin HSPACE =5 Normal Indent Blockquote Indent UL Indent DL Indent
OS: Linux X11
Browser Default Top Margin Default Left Margin HSPACE =5 Normal Indent Blockquote Indent UL Indent DL Indent
Lynx 2.8.2
(c=char)		 0c text=0c, alt=2c text=0c, ALT=2c 3ch 6c 4c 4c
NN 4.08 8 8 19 pre 8 norm 9 (3) 49 49 9

Table Notes

  • (1) For some reason I was unable to coerce WinWeb to display an image. Tried GIF89a, 87a and JPG. Screen space was reserved according to the image size, but nothing appeared. Images that carried an HREF link displayed a border, but still no image. Have no clue, don't particularly care to try much harder.
  • (2) Using an HREF imaged, WinWeb did support the HSPACE indent.
  • (3) These browsers displayed different default indents for 'normal' and <PRE>preformatted</PRE> text.

Other Notes

  • I was going to split this page into several pages, one per SIT, testing 'nested indents'. I find that to be unnecessary as -all- the above browsers support 'nested SITs'. That is, <UL><UL> or <DL><DL> indents exactly twice as much as the single SIT. This is true for all browsers listed above, and all SITs.
  • All Win 3.1 tests were done under DOS 6.22 / Win 3.1 on a VGA 1280x1024 256 color monitor with the browser window set to about 640 pixels wide. Some of the screen shots look a tad odd because I'm using 'large' Win fonts and they don't work very well in the narrower browser window.
  • I don't have Lynx running here, can't use DOSLynx because I can't find a CHAP compliant dialer that will successfully connect with Worldnet. However I am told by Matthew Wickline that for:
    • Lynx 2.4.2 / SunOS 5.4
    • Lynx 2.4.2 / Sun Release 4.1
    • Lynx 2.3 BETA / Sun Microsystems (not sure of release)
      • All versions place a six character margin on the left margin for any text. So, these six characters can't count as indentation; they're just a margin.
      • Blockquote looked just as though there were no tag at all.
      • The UL abuse did not indent the first line, but if the text in question took up more than one line, all lines after the first would be indented (like a bibliography entry or something). Thus: 
        *************************
     **********************
     *******************
     ********************

Summary

Content is all. Yes, you want your pages to render as precisely and attractively as possible under every browser in the known universe. But your efforts will take you only so far. After that, you need to learn to just 'let go'.

Put up the content, make sure it's accurate, validate, view it under a few of the popular browsers to double check it's at least acceptable, and let it go.

Comments, questions, suggestions, abuse: <jb@jbarchuk.com>

URL: http://www.jbarchuk.com/indent/