CRCL, Bangkok -- Single Pixel Tricks

SOUTHEAST ASIAN
COMPUTING AND LINGUISTICS

Produced by Doug Cooper / Center for Research in Computational Linguistics,
Bangkok. Presented in cooperation with . . . ( 0.2 -- comment only )

SINGLE PIXEL TRICKS

WHY? -- In a sense, good design is easy -- it's good production that's difficult. This page describes how to achieve a variety of effects with extremely small gif files. The main advantage of this technique is that it's quick: a one-pixel gif is about 80 bytes, and can be displayed very quickly even when it's scaled up to larger sizes.

Here are the tools you'll need. To copy any of these (assuming you're using Netscape), point your mouse in the middle of the box, click the right button, then choose the "Save this image as..." option. Note that each one is actually a scaled-up single pixel, so if you look at the gif you save, it will be very, very small.

The pixel on the far left is clear, the one on the far right is white. To make backgrounds transparent, and to create interlaced gif files, download one of these:

giftrans.zip (21K) -- zipped copy of giftrans.exe
giftool.zip (71K) -- zipped copy of giftool.exe

David Siegel's design page has a good discussion of the method. Basically, IMG SRC can be given two kinds of size arguments. vspace and hspace specify distance from surrounding text, and are filled with empty space. The width and height arguments -- the ones that the manuals say are there to speed rendering of bitmaps -- actually scale the image. If the original is just a single pixel, then saying that it's WIDTH=5 and HEIGHT=2 causes it to be rendered as 5x2 image with the original pixel's color.

To draw a thin colored line (as in the masthead), save a single colored pixel and call it like this:

<IMG SRC="../gif/reddot.gif" WIDTH=200 HEIGHT=1>

Here's a 200 by 1 red bar and a 300 by 10 yellow bar:

You can roughly center a thin line between existing text lines by adding a clear pixel -- scaled to be tall -- to the same line:


<IMG SRC="../gif/cleardot.gif"

WIDTH=1 HEIGHT=16 ALIGN="ABSMIDDLE">

The section header I frequently use is just a series of scaled yellow, clear, and red pixels. View the source of this page to see how it works:

HEADING

CLEAR PIXELS AND BACKGROUNDS -- Making a pixel invisible is easy as pie. Create a single white pixel, then get program giftool.exe. Call it like this:



@rem create interlaced gifs.  White is transparent.

@Save the original first.

xcopy %1.gif %1.old

giftool -i -o%1.gif -rgb white %1.old

giftool.exe also turns the gif into an interlaced gif89 format file, which is monumentally silly for one-dot images, but rather handy for anything bigger. Call it as giftool -? to find out how it works.

CONTROLLING INDENTING AND SPACING -- The scaled-clear-single-pixel trick is also good for getting more control over indenting and interline spacing. This skips about two-thirds of a line, then indents by about half an inch:



<BR><IMG SRC="../gif/cleardot.gif"

WIDTH=25 HEIGHT=20 ALIGN="ABSBOTTOM">

It's how I've been indenting new paragraphs. To get the space without the indent, set the WIDTH to 1, and break instead of aligning.

All original work © 1995 Doug Cooper. Please see this disclaimer, which takes responsibility for content, and the release notice, which gives you the right to copy it. We believe that all files referenced by these pages may be distributed for research / educational purposes. If any file should not be distributed, please let us know and we will remove it.