WYSIWYG – What You See Is What You Get is a term we may all be familiar with from content management systems like Wordpress or Hubspot. I hear a lot of customer complaints about frustration with WYSIWYG editors, mostly because well, they aren’t. Sometimes your WYSIWYG editor can make you feel like you’re trying to walk a big Saint Bernard that doesn’t want to go where you do. This blog will help you tame your WYSIWYG editor.
The term WYSIWYG was actually coined during the desktop publishing revolution over 25 years ago when computer users became fed up that the beautiful documents they created on screen (remember these were typically little 9” black and white Mac screens!) did not render accurately on paper. Back then it was Adobe’s Postscript language that enabled printers to accurately recreate what was on the screen....
Today the medium is the web, the language is HTML and WYSIWYG editors are especially helpful to people that have little skill or desire to learn HTML. However, sometimes using a WYSIWYG editor can lead to unintended code fragments in the HTML of your content. Seemingly simple actions such as hitting a return key at the end of a line can have unintended consequences. These issues can be compounded if you originally author in a word processing program like Microsoft Word and then cut and paste into your WYSIWYG editor. Extra space appears where spacing was previously correct and when you try to delete the space it still isn’t right. Argh!!! So much for WYSIWYG!
When A Return Is Not A Return…
Here’s what’s going on. Sometimes hitting ENTER to create space at the end of a paragraph can cause a code fragment to appear in the HTML of the content you’re creating. You can’t see this fragment on your screen, but it’s there. To prove it to yourself, click into the HTML view in the editor and look for fragments like these between your paragraphs:
Looks gross, right? Notice these fragments at the end of your paragraphs have no content in them. That   is HTML for “space”. Because there is an opening paragraph tag <p> and a closing tag </p> with that “ ” inside of it, the editor is creating extra space that you can’t see in your WYSIWYG editor but is there when your page gets rendered by a browser (see desktop publishing frustration above!). Simply deleting strings like the example above will cure the problem.
Here is another example of something you might see with the offending code highlighted:
<p>The quick brown fox jumps over the lazy dog.</p>
<br /><br />< br />
<p>This dog don’t hunt! Where is Caesar Milan when you need him? <a href=”http://www.link.com”>With a link in the paragraph.</a></p>
As you can see there are three intentional hard breaks <br /> between the two paragraphs that belong, but again, there is also some phantom code with opening and closing tags that have no content between them. Removing those phantom fragments eliminates the spacing and alignment issues you may be having.
A Powerful Cure Stubborn Spacing Problems
A third tip that has saved me when all else fails is the shift-return. In HTML and any other ASCII-based language, there are really two types of returns. You may have run into this in Microsoft Word or Powerpoint as well. Simply hitting return creates a hard return. However, using a shift-return instead, creates a space but does not trigger some of the editor’s automation features like next bullet or, and this is very useful in the Hubspot CMS, the abbreviated preview at the beginning of a blog.
Hubspot’s preview tool looks for a hard return in order to display your first paragraph as a preview. However, if you want a series of short paragraphs in your preview, as I have done in this blog, or want your preview to end on a suspenseful sentence fragment in the second paragraph, use two shift-returns to create your space and fool the Hubspot CMS into showing more than one paragraph in the preview. When you want the preview to end, simply use a return. Ta-da! Shift-returns can solve a number of other WYSIWYG spacing issues so if you get stuck, delete the unwanted, misbehaving space and try a shift-return instead.
So if you get stuck in your WYSIWYG editor, try these tips to get the editor to do what you want it to do. Anyone else have favorite editor tricks? Let’s hear about them!