In general, the WYSIWYG code editors have become much better recently. With some of them if not all even producing valid and elegant code. Eventually, when it comes to coding editors, it’s damn hard to get a clear overview of all the benefits and functionalities different editors have to offer.
These applications typically used an arbitrary markup language to define the codes/tags. Each program had its own special way to format a document, and it was a difficult and time-consuming process to change from a one-word processor to another.
The use of markup tags and codes remains popular today in some applications due to their ability to store complex formatting information.
After all, sometimes you need to provide your clients with some simple tools to edit or update the websites like the Gutenberg (new WordPress Block Editor). And this is where the utilities of WYSIWYG editors come in.
As a web-professional, you need to provide your clients with some sophisticated advice and offer a simple yet effective tool — e.g. a WYSIWYG-editor.
What is the Meaning of WYSIWYG?
WYSIWYG (pronounced “WIZ-zee-wig”) is a short form of “What You See Is What You Get.” A WYSIWYG application is one that enables you to see on the display screen exactly what will appear when the document is printed.
This differs, for example, from word processors that are incapable of displaying different fonts and graphics on the display screen even though the formatting codes have been inserted into the file.
This differs, for example, from word processors that are incapable of displaying different fonts and graphics on the display screen even though the formatting codes have been inserted into the file. In other words, WYSIWYG is an acronym for “What You See Is What You Get.” WYSIWYG is especially popular for desktop publishing.
Basically, a WYSIWYG Editor can be contrasted with more traditional editors that require the developer to enter descriptive codes (or markup ). And often, do not permit an immediate way to see the results of the markup.
General User-based Experience
WYSIWYG implies a user interface that allows the user to view something very similar to the end result—while the document is being created.
In general, WYSIWYG implies the ability to directly manipulate the layout of a document. Without having to type or remember names of layout commands.
The actual meaning depends on the user’s perspective, e.g.
- In presentation programs, compound documents, and web pages, WYSIWYG means the display precisely represents the appearance of the page displayed to the end-user. But, it does not necessarily reflect how the page will be printed. Unless the printer is specifically matched to the editing program, as it was with the Xerox Star and early versions of the Apple Macintosh.
- As in word processing and desktop publishing applications, WYSIWYG means that the display simulates the appearance. Representing the effect of fonts and line breaks on the final pagination. In particular, using a specific printer configuration, so that, for example, a citation on page 1 of a 500-page document can accurately refer to a reference several pages later.
- WYSIWYG also describes ways to manipulate 3D models in stereo-chemistry, computer-aided design, and 3D computer graphics.
WYSIWYG editors have the advantage that users do not need to have any knowledge of programming or markup languages to create a web document.
The formatting instructions are located in the background of the program, for example in Microsoft Word. Because you see immediately what you changed in the document. But, you don’t see the program instructions in the form of the source code.
What is an Example of WYSIWYG editor?
It became the basis for Simonyi’s work at Microsoft. Evolving into two other WYSIWYG applications called Word and Excel. Below is an example illustration of a Word Processed Document by jmexclusives.
One of the trade-offs, however, is that an HTML WYSIWYG editor sometimes inserts the markup code on its own. Then, the developer has to know enough about the markup language. And also to go back into the source code and clean it up.
Using the WYSIWYG editor
Important to realize, the WYSIWYG principles are used not only for editors but also for Content Management Systems (CMS) such as WordPress, TYPO3 or Drupal. This allows editors to easily edit the content of Websites without much effort and without having to learn certain programming or markup language.
Equally important, especially in the SEO area, you want to create source code that search engines can understand. However, some elements of the code should be excluded from the Indexing. And, if necessary, the search engine should be prevented from Reading and Crawling it.
Content Optimization in Modern Days
In reality, modern software does a good job of optimizing the screen display for a particular type of output. For example, a word processor is optimized for output to a typical printer.
Whereby, the software often emulates the resolution of the printer in order to get as close as possible to WYSIWYG. However, that is not the main attraction of WYSIWYG. So to say, which is the ability of the user to be able to visualize what they are producing.
In many situations, the subtle differences between what the user sees and what the user gets are unimportant. In fact, applications may offer multiple WYSIWYG modes with different levels of “realism.”
Examples of Multiple Modes include;
- Composition mode: In which the user sees something somewhat similar to the end result, but which employs an interface more conducive to composing than the layout itself (e.g., the inclusion of section breaks and non-printing characters).
- Layout mode: In which the user sees something very similar to the end result. But, which includes some additional information to facilitate proper alignment and spacing (e.g., margin lines).
- Preview mode: In which the application attempts to produce an output that is as close to the final result as possible.
The Pros & Cons you Should know
If, for example, an HTML document is edited, it may occur that it is represented differently in different browsers. Simply, because the user leaves writing the source code to the program. This way, code lines may creep in which were not intended at all.
Secondly, a line break in the WYSIWYG editor can look completely different as compared to a conventional HTML editor. If an error occurs in the program code, it will be relatively difficult to find it in the WYSIWYG editor. Of course, since you don’t have access to the source code. But, only see what the user of the program or code part will see later.
Again, there is also no distinction between content and markup. In that case, because WYSIWYG editors directly apply formatting instructions to some content directly. And which is sometimes contrary to good style when creating web pages. Good style dictates making the markup in a separate file, for example, using a CSS file.
In addition, WYSIWYG editors often generate superfluous code, which in part does not meet the requirements of the World Wide Web Consortium (W3C) and is therefore not necessarily valid.