What is the Purpose of Wysiwyg in Word Processing.
How-tos & Tutorials
What is WYSIWYG?
Published May 25th, 2022
WYSIWYG is pronounced “wiz-ee-wig” and stands for What You Run into Is What You Become.
Sr. Manager of Marketing at Tiny
If y’all’re a developer, designer, or work anywhere with technology, you’ll probably have heard this term a lot. So, we’ve put together this guide to help you understand everything you lot need to know nearly WYSIWYG including:
- What it is and what it ways
- How to evaluate the correct text editor to arrange your project
- What WYSIWYG isn’t and why that matters
- How it came to exist, it’s origins and the myths
- Examples of the of import components of a WYSIWYG experience
- The future of WYSIWYG and how to hereafter-proof your application
Commencement though, let’south explore the basics of a WYSIWYG editor.
What is WYSIWYG?
The underlying concept backside WYSIWYG isn’t that complex — it stands for What You lot See Is What Yous Get. Online, it’southward used to denote that in certain applications (or any user interface), what you’re seeing is likewise the end product produced.
In the more frequently used context, WYSIWYG occurs where the text you are editing exactly matches how the final product looks.
For case, when you’re writing a document in a give-and-take processor, it’s using the WYSIWYG concept. What you lot blazon into your document, how you format and/or edit it, is exactly replicated in the cease certificate that you lot print or ship as a PDF (ie. what y’all created on screen, you get).
But WYSIWYG editing isn’t limited to discussion processors. Y’all as well run into it in modernistic applications like CRMs, CMSs, Certificate Management Tools, Emails Builders, almost anything that includes written content.
A question people frequently ask is why these applications use a WYSIWYG editor.
The ascension in popularity of this writing and editing style, has seen Developers and Product Managers alike incorporating ease-of-use WYSIWYG elements into their interfaces:
WYSIWYG software allows users to click, drag and type to make things happen without having to know whatever code or commands. It brings what used to be technical jobs, into the realm of the everyday user.
Information technology’s generally much faster to use a WYSIWYGtext editor than formatting the text from scratch. This results in increased productivity and gives applications a competitive border.
Considering users are visualizing the terminate product as they’re creating it, they tin easily make adjustments in real-time without needing to publish, edit and republish (which could interrupt their workflow).
Online HTML editing
For people who want to write HTML and have their markup translated past the WYSIWYG into accurate text — a skilful WYSIWYG provides HTML editing online. You no longer demand to compromise, with the correct editor yous can have the all-time of both worlds.
Nosotros’ve covered what a WYSIWYG (rich text editor) is, so on the flipside, what isn’t a WYSIWYG editor?
Simply put, not-WYSIWYG editors are the ones that developers may dearest, simply end users don’t. Why’s that?
Not-WYSIWYG editors simply have the power to insert plain text. In guild to style or format the text (with paragraph breaks, sizes, fonts, italic, bold, underline, and other elements), users need to exist able to use code or tags.
In other words, what you see isnot
what you get at all!
Why is that a big deal? Nearly writers aren’t coders by merchandise, so they’ll oft struggle with:
- Code and tags that visually clutter the text
- Having to empathize which program uses what linguistic communication/markup (because information technology isn’t standardized)
- Having to learn the required language/markup
- Most content authors don’t know how to code (and don’t have fourth dimension to acquire)
- Formatting options are often limited — unless they want to learn to code similar a pro
- Information technology creates separation between formatting and composition, which makes drafting and reviewing processes more difficult, and they ofttimes need to publish it to examination or meet a alter or format
Only what about user interfaces that autumn in betwixt WYSIWYG and non-WYSIWYG?
In order to phone call something WYSIWYG, how close does ‘what y’all see’ need to be to ‘what you go’ — practice the lines need to lucifer up perfectly and do the colors need to exist 100% on-point?
In almost instances, WYSIWYG means that users look the output to exist an verbal replication of the input or brandish.
There are occasions, where a 100% WYSIWYG experience isn’t necessary for the user to achieve their goal. However compared to the not-WYSIWYG alternatives (which might offering lilliputian to no formatting options or a code-based experience), those kinds of WYSIWYG interfaces are even so considered WYSIWYG.
Did you know?
More and more than products are delivering on end users’ desire for true WYSIWYG experiences.
After learning what defines a WYSIWYG, it’due south time to empathise the features and benefits they provide. Information technology’south of import to counterbalance which editor is the best choice for your project, because after all, not every editor is made equal.
When choosing your WYSIWYG, these five things should be taken into consideration:
Does the editor take all the features you need now, and the ability to extend in the time to come?
Not all open source editors are the same, and is their licensing model correct for your product?
If annihilation goes wrong, are you stuck with relying on the community or is there the option to access a professional development team to help set up information technology?
Total Cost of Ownership –
One time y’all install the editor, that’s not the finish. You demand to maintain it in your app, then are yous:
- Able to configure the toolbars and menus
- Able to accompany your text with media
- Able to insert tables
To assist with your WYSIWYG editor evaluation and decision, read these guides on What makes the best editors, and what’s the Best WYSIWYG features.
Only different the 2022 feel of WYSIWYG, the very first WYSIWYG experiences were far from what we see today.
In hindsight information technology may sound lightheaded to telephone call WYSIWYG editors ‘a move’, but it was. Without the introduction of WYSIWYG editors to applications and software, people who don’t code wouldn’t have the ability to interact, communicate and digitally engage beyond the earth. WYSIWYG helped bring the internet to everyone, no matter where they live.
But, when did it first?
It’southward generally accustomed that the first WYSIWYG user interface was Bravo, a 1974 programme that was used to set documents for printing on the Xerox Alto.
Users could meet text displayed with formatting like fonts, margins, sizes, and other options. That said, since the Alto screen resolution didn’t match up with the laser printers used at the fourth dimension, what you saw on the screen wasn’t necessarily what yous’d get when you hit print. The technology too certainly wasn’t in every home.
Other early WYSIWYG software that built on this initial attempt includes HP’s BRUNO (HP Draw), WordStar give-and-take processor, Apple’s LisaWrite and MacWrite, and others.
Only interestingly, the phrase ‘what yous see is what you get’ wasn’t coined past a computer geek…
Comedian, Flip Wilson, brought the saying ‘what you come across is what yous get’ to popularity in 1969, via his elevate persona, Geraldine Jones.
Cheers to Wilson, the following decade brought with it numerous song titles and albums with the title ‘What You See is What You Get’. Using these timelines… yous could speculate that someone in the computing world was inspired to employ the phrase in their work, after listening to the radio (or “wireless” as it was called at the time).
There’due south some contend about who first used the term WYSIWYG to describe their technology.
Some say John W. Seybold and his colleagues, who created the WYSIWYG software Bravo 3, used the term in the mid-70s. Others credit Bill Tunnicliffe who used the term in a presentation (involving the Graphic Communications Association and Printing Industries of America) in the late 70s.
Even Larry Tesler, the inventor of copy-paste, is also credited as maxim “What you lot run into on the screen should exist what you get when you print it”.
Given the number and multifariousness of players in this puzzle game, it’s likely we’ll never know the true origin of WYSIWYG, nor who to give thanks for this revolutionary acronym in the development world.
The best style to really understand WYSIWYG, is to look at some of the about popular (and familiar examples) of its use.
Mayhap one of the virtually popular, and well known examples worldwide, is the apprehensive word processor. Almost everyone who’s ever interacted with computers or the internet have experienced these ever-pop editing tools, that range from Microsoft Word to Google Docs and everything in between.
These types of WYSIWYG editors are set so that the on-screen display closely represents the last product. These days, the default view on MSWord is set to ‘Impress Layout’, simply other options include:
- Read Mode
- Spider web Layout
- Vertical or Side to Side Page Movement
- Show Rulers, Gridlines, and Navigation Console
You can control how they see the content, depending on how they adopt to write, and whether the concluding product is printed.
You can also switch between views — to focus on different parts of the artistic process. For example, they might do the writing and editing in Focus view, and then switch to Print Layout to add the formatting.
So, you may exist thinking, why can’t I just driblet a word processor straight into my application? Unfortunately these types of WYSIWYG editors aren’t designed for utilise within software or applications (they’re solely used in document creation), and so yous instead demand to rely on WYSIWYG tools like TinyMCE — a WYSIWYG editing component that can exist integrated into your application, so you can get this style of editing feel.
A good DMS allows anyone storing their documents on it to retrieve those docs quickly, make edits if needed, organize their archive, or extend its size as needed. Any WYSIWYG practical directly into a DMS needs to not only provide the flexibility needed for these different deportment (shop, retrieve, edit), simply it also must allow for writing and editing all different kinds of documents that might appear. Some of the capabilities a DMS can provide: Copy and paste without meta information
- Word count
- Search and replace
- Enhanced Epitome Editing
- Compliance checking
- Collaboration tools
A WYSIWYG in a DMS as well needs to exist flexible such that a programmer tin extend and alter its functions as needed.
To manage a project effectively, you need communication with your squad. WYSIWYGs that feature commenting and collaboration provide first-class integration with projection direction and workflow apps. For case, Project.co is a workflow management app — its advice abilities were improved after integrating the TinyMCE WYSIWYG.
Website builders are increasingly popular. Specially those that allow builders to drag and drop elements into place. They have a lot in mutual with WYSIWYG text editors, because they besides allow users to visually build sites without using code.
With over 3 million agile installs on WordPress.org sites, Elementor is generally considered the most popular page builder available.
One of Elementor’s elements is the WordPress text editor, which incorporates TinyMCE’s rich text editor in its backend, and then users can easily add together and edit text blocks while visually building their site. They simply click to edit, type text, format it using the toolbar options, and see the updated text displayed on the spider web page. This combines a building block approach with a WYSIWYG editor to create a more than seamless experience for CMS builders.
Every CMS needs an intuitive WYSIWYG editor that’s feature-rich and easy to use for content creators, spider web managers, subject thing experts, or journalists who don’t have coding skills. A reliable WYSIWYG in a CMS allows writers to publish make clean and compliant output. A CMS working with a WYSIWYG needs optimal pattern tools and capabilities such every bit:
- Image manipulation and editing
- Enhanced Media Embed
- Preview content
- Optimization for desktop and mobile devices
- Auto resize
- Custom UI command
- Link checking
CMSs let any contributor using the WYSIWYG to produce what they need, keeping the content compliant with corporate standards and regulations, while assuasive for creative freedom and graphical direction at the same time.
A messaging app or electronic mail software product commonly has a WYSIWYG installed, rather than a text editor, and so that anyone writing an email or message can add dash and meaning to their writing with manner, color, fonts, images, and emoji. WYSIWYGs installed inside email and messaging apps too benefit writers when they alloy seamlessly with the interface, while also matching the tools their writers are familiar with.
More other WYSIWYG examples, an email and messaging integration must be easy to apply. There must exist no obstacles stopping the writer from communicating.
Software that connects you with customers, and allows y’all to build an audience, track how customers interact with your project, or nurture the relationship through points of contact represents a CRM. And a CRM calls for a WYSIWYG that tin can streamline the CRM experience. Information technology should be easy to create content and consign information technology. Lightweight WYSIWYGs that are easy to customize excel in a CRM project.
What’south important in an LMS is the interaction between the teacher and the learner. A WYSIWYG in an LMS must let for easy advice between the two. Information technology must provide:
- Ease of collaboration
- Communication and feedback through comments
- Text modification through highlighting
- Exporting of content
- Media manipulation
- Integration with other communication pathways such as word boards and email
The WYSIWYG editor must be feature-rich, and easy to use for teachers, course creators, subject field matter experts and administrators who don’t have the time or skill to code from scratch.
Scalable SaaS products congenital for growth and multi-employ internal tools have circuitous
tech stacks. Their various components need to piece of work together to evangelize value to users, and produce the user feel you need. A WYSIWYG editor is a vital component within that internal, SaaS application tech stack.
Developers are specifically tasked with assembling these stacks, and therefore a WYSIWYG in an internal SaaS app must be like shooting fish in a barrel to configure. The WYSIWYG must be enterprise-form and customizable (if you need). Just as capabilities for the SaaS apps target customers are vital, the WYSIWYG’s developers must maintain it. The experts backside the WYSIWYG must have a deep domain experience.
Let’s be honest. Features are often taken for granted when it comes to online editing. But not everything (be it a cadre editor or avant-garde features/plugins) is built equal. Information technology’s of import to force per unit area test the features you both desire and need across different editors, to ensure they handle your electric current needs and future growth.
Only a few companies build WYSIWYG editors to product ready condition, and of course, at that place besides are product teams who cull to build their own WYSIWYG editor, rather than using ready-made specialist components.
Past comparing how unlike WYSIWYG features perform inside the virtually popular editors, there’south a better likelihood of satisfying your users’ needs.
Clean copy and paste
If you’ve e’er pasted content between applications, for instance, pasting from Discussion into a content management system, chances are you’ve experienced weird formatting or broken lawmaking. Not all editors tin manage the copy and paste menses cleanly.
Advanced spell checking
When it comes to professional person evolution teams selecting an editor to employ in their applications, compliance and spell checking cannot be overlooked. It’s of import to check if the editor yous’re interested in tin actually save you lot from making costly spelling mistakes or not.
Automated accessibility checking
Accessibility is vital for developers and organizations that desire to create high quality websites and applications, and not exclude people from using their products and services. It’s frequently an overlooked feature, still, and not anybody tin can implement it.
Exporting content to a PDF
Export is the power to copy the content that’southward within a rich text editor, change it into another format (usually a portable grade), and send information technology to a destination. It’s useful, merely not every editor tin can provide it.
Generating mentions within comments and documents
AtMentions are a fast way to communicate over documents. They are also called ‘@mentions’ considering they include the ‘at’ symbol equally trigger characters. Make sure the editor you want tin can provide this ability if you need to communicate within the WYSIWYG.
Generating threaded comments
Comments have been a part of web development since the very get-go — only like mentions, non all WYSIWYG developers take configured this capability.
Quickly replicating formatting beyond the document
Format Painter represents an essential editing tool despite the fact that non all editors implement it effectively.
When thinking near a WYSIWYG editor for your application, it definitely pays to:
- Recall nearly your time to come needs and long-term product roadmap
- Look at the track record of the company yous’re considering
- Consider their history of innovation.
Regardless of the editor selected, make sure it has the post-obit:
Looking back at the very first WYSIWYG engineering, information technology’south amazing to come across how far information technology’s come. WYSIWYG software is more sophisticated, easier to use, more intuitive, and more accurate in terms of output.
In the hereafter, developers tin can await the gap between ‘what yous see’ and ‘what you go’ to continue to compress, as more features, functionality and aspects are added to editors.
Today’due south users desire more control over the content they’re producing, without needing to lawmaking from scratch. Already, the all-time WYSIWYG editors like TinyMCE give users a huge amount of control.
In the future, we’ll see better UIs that intuitively show the features users need right now, while hiding annihilation that might clutter their view.
In some applications, context menus are already used instead of persistent toolbars. For more than details and examples that show how this works, check out more virtually inline editing.
Tools like TinyMCE allow software developers to control:
- What users can see and do
- How the editing interface looks
- What the final published production will await like.
Therefore, developers tin reduce the number of errors, command the make feel, and create a more consequent look and feel.
We’re already seeing an increase in content cosmos and publishing on every device, from desktop to mobile.
The time to come will see WYSIWYG editors and publishers that continue to respond to this ‘anywhere, someday’ trend, by ensuring their tools are functional on all devices.
Interested in trying TinyMCE?
Bank check out 3 ways to try TinyMCE or get started with a FREE API key. You can also contact us to find out more than about how TinyMCE tin can aid you create a WYSIWYG feel for your software production and build a more intuitive user experience for your customers.
Sr. Director of Marketing at Tiny
Senior Director of Marketing at Tiny. Elise has marketing experience beyond a range of industries and system sizes, and loves to alloy the creative aspect of marketing together with data to develop engaging and constructive marketing strategies and campaigns
What is the Purpose of Wysiwyg in Word Processing