How to get the most of your WYSIWYG editor: Text Formatting

If you use any web-based Content Management Systems (CMS) like WordPress, Tumblr, Blogger, Squarespace, and Joomla to post text, images and video to the web, you are probably familiar with our friend the WYSIWYG editor. WYSIWYG is an acronym for "What You See Is What You Get" and was created to allow more "layman" users to be able to post content to the web without having to know HTML code. But it still helps to know a little bit since you might get stuck in trying to format your content if you rely solely on these editors. All WYSIWYG editors allow you to toggle between the user friendly editor and HTML formats. Here are a couple quick text formatting tips that could help you keep your blog or website formatted like you want it.

Paste as plain text

To maintain text formatting consistency it's important to paste text into your CMS's WYSIWYG in plain text if possible. If you write your posts in a word processor on your computer and then paste it over, it might help to use a text editor like TextEdit (Mac) or TextPad (Windows) which allow you to write in plain text. I've found that pasting text from Word and Pages often carries over font information that are not needed and can end up making your blog look goofy with inconsistent fonts and text colors. So try to start with plain text and then add your formatting in the WYSIWYG editor to make sure you end up with the best looking blog post possible.
 

Erase formatting button

If you can't find a way to paste as plain text, there's usually a button that looks like an eraser that allows you to remove font formatting and alignment on highlighted text. But it doesn't always work consistently.
 

Font Size

I try to stay away from using the Font Size toolbar button.  Most CMS templates use percentages for font sizes as opposed to a concrete value which allows for more flexibility and readability on the variety of screen sizes on which your blog will be read.  If you lock a heading to a certain pixel size as opposed to keeping it relative to the default website text size, it may end up looking goofy on certain devices.  So to get larger text for use in headings (like in this post) I use the Format selector to choose an appropriate Heading tag - in this case, the Heading 3 or "<h3>" tag.

If for some reason the Heading tag doesn't work for me (like in a list) and it's just not enough to bold or make the text all caps to help it stand out, (WARNING: advanced formatting tip) I will use the Font Size selector to pick a pixel size, then switch to the HTML editor and change the "14px" to a percentage like "110%".
 

Paragraph vs. Line Break vs. "Div"

I like to follow the rule of using the paragraph tag "<p>" instead of the line break tag "<br />" between blocks of text. Most WYSIWYG editors default to using the Return or Enter key as a paragraph break, which is essentially like a double carriage return.

I use the line break "<br />" when separating text in a list line "<li>" or to add a single space before a new heading "<h3>". Most WYSIWYG editors use Shift+Return or Shift+Enter for line breaks. You can always manually tweak things by switching to the HTML editor. Keep in mind that line breaks don't need a closing tag like paragraphs do.

Another tidbit on line breaks is that WYSIWYG editors usually keep formatting like text alignment for entire paragraphs. So if you use a line break "<br />" to separate text, it will maintain the text alignment of the rest of the text within that paragraph.

According to w3schools.com, "a '<div>' tag is used to group block-elements to format them with styles." Try not to use div tags for text paragraphs. If you do this in Joomla and WordPress it can cause problems with certain template graphics. I use "<div>" tags only for advanced formatting of images or multiple paragraphs of text. Oddly enough, pasting from Evernote results in "<div>" tags separating paragraphs. You can highlight the offending text and choose Paragraph from the format window. You'll then have to delete additional empty paragraphs between each paragraph… UNLESS you use my Plain Text tips above. :)
 

Advanced text formatting options

There are a few more buttons in the WYSIWYG toolbar's arsenal such as lists (both "ordered"/numbered and "unordered"/bulleted), tables, block quotes, etc. But these almost always require some HTML code tweaking to get looking just right for me. So keep that in mind if you want to try and get fancy with your text using the WYSIWYG editor.

Also keep in mind that different computers with different screen sizes and different browsers all treat text slightly differently. Even if you don't really care about details like consistent code formatting, attention to little details on your website like this demonstrate to people like me that you take pride in how you are viewed online.  The devil is definitely in the details, so fine tuning such details on your website to maximize readability and the user experience can go a long way. Hopefully these tips will help keep you from getting bogged down in the details.

W3schools.com has great tutorials on all HTML tags and the best practices to follow to make sure your text looks the best it can on all the different browsers and devices out there. It never hurts to know just the basics of HTML if you use the internet as a tool for your business.

Next time I'll give you some quick tips on hyperlinks formatting using the WYSIWYG editor. And stay tuned for more tips on embedding images and video using WYSIWYG editors.

Have you run into problems getting your text "just so" using your CMS's WYSIWYG editor? How far have you been able to get without digging into the HTML editor?

Did you find this blog helpful? Share it with your friends! And if you want more information like this that we only share through email, subscribe to our newsletter and get on the list.