A hands-on guide for multilingual Web sites - includes related article on creating legible graphics files from text

Communication World, June-July, 1999 by Gerry Dempsey, Robert Sussman

TEXT AS ART

Turning text into graphics is the digital equivalent of photographing a word-processing file. The resulting image can be resized and repositioned, but its content cannot be edited. It is no longer text, but rather an image, indistinguishable (as far as the computer is concerned) from any other graphic, whether a corporate logo or a picture of the Brooklyn Bridge. Therefore it no longer matters that the object is in, say, Japanese. Any website professional can take that graphic and link it to the HTML in such a way that it will have the same look as its original English counterpart. But first it is necessary to create the graphics file itself. Step one is to make sure that the text looks exactly the way it is meant to appear on the web site. It should be formatted to match the height and width of the original English text. In general, each paragraph or independent unit of text should be converted to a separate art file. This approach gives the web-site professional more flexibility when positioning the files, and it provides for a faster download by the browser. Step two is to generate a .gif file using Photoshop (see sidebar). Although .gif generation requires specific skills, it does not require knowledge of foreign languages, so almost any company should have the resources to produce text in a graphics format.

As complicated as the processes above may seem at first, the task really is simple: embed the text in the HTML codes for the Western-language translations, and embed the text in .gif files for the Eastern-language translations. Using this dual approach, companies can produce multilingual web sites that not only showcase their commitment to the global marketplace, but also do so in a way that is accessible to everyone online.

Creating Legible Graphics Files from Text 1. Format the text in a word processor such as MSWord 97. Use the zoom function or change the font size to get the text close to the way you want it to appear in your HTML document.

2. Do a screen capture [ALT PRINT SCREEN] and paste the resulting .bmp file into a new Photoshop file. Be sure to move your cursor out of the way or it will also be captured.

3. Use the crop tool to eliminate the peripheral elements from the image, leaving only the text you want. Create a copy of the background layer for safekeeping.

4. To match the background color of an existing web site, go to that site and capture the background image. Paste that file into a layer of your Photoshop file. Use the eyedropper to grab the color from the background image. Create a new layer, and fill this layer with the background color. Place your text layer above the background color layer. Select the white in your text layer with the magic wand. Set "feathering" to the minimum. Again, select the white in your text layer with the magic wand. Cut the white. If your background layer is visible, you'll now see your black text over the background layer.

5. Merge layers down. You may have unwanted anti-aliased pixels in your black text. Zoom in to check. If necessary, zoom in so that the anti-aliased pixels are very large. Use the magic wand to select one of the offending shades of gray. Select "similar." Make sure that your desired background color is the foreground color on your tools palette. Use the "fill" command to fill the selection.