WYSIWYG

QUESTION: What does WYSIWYG mean?

ANSWER: Pronounced "WIZ ee wig," WYSIWYG stands for "What You See Is What You Get." It is an acronym that's used in the printing & publishing community to refer to document-creation systems (such as page-layout software and illustration software) that allow a user to interact with something on the computer screen that looks a lot like the document will look in its final form.

Some examples of document-creation systems that qualify as WYSIWYG systems are Adobe Illustrator, Adobe InDesign, and QuarkXpress. These systems can rightfully be called WYSIWYG systems because, when you're using one of these systems, the on-screen representation of the document that is displayed by the system looks very much like your document will look when it is finished and rendered on the intended media or device. For example, if you're using the Times-Roman font for your text, the shapes of the characters on the screen look very much like the shapes of the characters that are rendered in Times-Roman on your finished document; and those characters are positioned on the on-screen document in much the same way that they'll be positioned on the finished document (relatively speaking). And if you create a red circle on your document, the red circle will be displayed on your screen in approximately the same color that will be used on your finished document, at approximately the same size and in approximately the same place where it will appear in your finished document.

Note that we avoided using the word "paper" in the preceding paragraph when referring to finished documents. That's because many documents are not printed on paper these days. That is: some documents (such as this Web page) are created for on-line use only, and some are printed on things other than paper, such as tee shirts, CDs, billboards, and sides of buses.

If you were born sometime after 1970 (or so), you might have felt a little puzzled when you were reading the first couple of paragraphs above, because — unless you're a Web designer or a computer programmer that specializes in printing & publishing technology — you might never have seen or used a document-creation system that does not operate in WYSIWYG fashion or close to it.

To get an idea of how a "non-WYSIWYG" document-creation system works, take a look at this:

As you can see, the text above contains some letters, numbers, and other symbols that are used to control the formatting of the text but don't have semantic value. These letters, numbers, and symbols are referred to as "tags" and "markup characters."

To render the text as intended, a computer program known as an "interpreter" is needed. When a file that contains text with embedded tags and markup characters is processed by the proper interpreter, the text will be rendered (i.e., displayed or printed) with the specified formatting.

There are many different markup languages for formatting text. One markup language that is widely used is HyperText Markup Language, or HTML. HTML is the markup language that is used on Web sites to lay out text and graphics on Web pages, such as the Web page you are reading now. Your Web browser has an interpreter that acts on the tags and markup characters in HTML pages and renders the resulting formatted text and graphics on your screen.

If you are a Web developer that does not use a WYSIWYG HTML editor, you know the tags and formatting characters in the example above are part of the HTML language. For example:

And you know that line breaks within the HTML text are ignored when the text is rendered by an HTML interpreter.

When you use your non-WYSIWYG HTML editor, you actually type the characters that make up the tags and markup characters at the same time that you type your text (or perhaps your HTML editor provides some macros that cut down on your typing by entering some of the tags and markup characters for you).

In contrast, if you are a Web developer that uses a WYSIWYG HTML editor, then you're probably not accustomed to dealing with tags and markup characters. Instead, your HTML-editing software probably lets you highlight text and assign font attributes to it, it probably lets you drag and drop graphics onto your pages, and it probably shows you a Web page on your screen that looks very much like the Web page will look when it is displayed in a Web browser.