Home Web Design Programming Fairlight CMI Soap Box Downloads Links Biography About... Site Map

The Holmes Page Simulating Leading

Web Design Design Tips Programming Tricks Web Page Makeovers



BACK TO
WEB
PROGRAMMING
TRICKS
 At the present time, the HTML standard does not provide a way to specify leading (pronounced "ledding" because old-time printers used strips of lead), which is the vertical spacing from one line of text to the next. (Note: the new Cascading Style Sheet specification allows you to specify inter-line spacing.) 
Often it is desirable to increase the space to make the text easier to read, especially if the lines are long. 
This paragraph uses the standard leading of your font size. Probably 12-point. This paragraph uses increased leading by replacing spaces with a stretched single-pixel gif. This paragraph uses increased leading by replacing spaces with a stretched single-pixel gif.
This is the code:
<IMG SRC="dotclear.gif" WIDTH=1 HEIGHT=18>
Because the dotclear.gif image is small (about 80 bytes) it loads quickly, and of course it is re-used from the cache. 
One of the problems with this trick is the slightly wider space between words. Another problem is the increase in HTML source code size. Each "stretched" space takes 45 extra characters, and you have to put in a lot of them because you don't know where the lines are going to wrap. 
A third problem is the number 18 in the HEIGHT attribute. It indicates, in pixels, how high the image should be. Unfortunately, pixels do not always equal points. There are about 72 points per inch, but high-res VGA displays are often run at 96 pixels per inch. 
NEW!
 Another way to achieve this effect is to use the HTML <SUB> tag. 
This paragraph uses the standard leading of your font size. Probably 12-point. This paragraph replaces spaces with a subscripted space to increase leading. This paragraph replaces spaces with a superscripted space to increase leading.
To see the spaces, select several lines of text with a mouse or other pointing device. 
Notice that the subscript version allows the text to line up with the top of the normal paragraph, whereas the superscript version moves the text down a bit first. Also, in Netscape Navigator and Microsoft IE the subscript method creates more inter-line space than the superscript method. 
This is the code:  <SUB> </SUB>  or  <SUP> </SUP> . 
The interesting thing about this idea is that it scales with the size of the text, because the subscript and superscript size is generally one size less than the standard text size. But, for the same reason, the spaces will be a bit narrower than normal spaces. 
This method uses only 11 extra characters per space and does not use images, so it will mean one less trip to the Web server. 
For larger or smaller spaces between lines (and between words), increase or decrease the font size of the subscripted or superscripted spaces. 
Or you can nest the tags like this:  <SUB><SUB> </SUB></SUB> . 
However, like so many other things in HTML, you can fool around until you achieve the effect you want, but then you can never be absolutely certain what it will look like to anyone else!


Home Web Design Programming Fairlight CMI Soap Box Downloads Links Biography About... Site Map

Site Map Send comments about this site to Greg at gregh@ghservices.com
All pages copyright © 1996-1999 GH Services™   Created 1996/10/01   Last updated 1999/09/30
All trademarks contained herein are the property of their respective owners