Update: View our screencast on formatting copy for the web.

If you’ve ever published copy on the web, you may have run into some formatting issues. That is, you expected the copy to display a certain way, but when you saved your work and checked the web page, the text looked a little off, or some unusual characters had sneaked in there.

Here is a common example from Pack Chat, Loyola’s student blog. After publishing a new post, this is what the page should have looked like:

However, this is what the page looked like initially:

Note that the font is incorrect and there is not enough spacing between the paragraphs. This makes the post difficult to read, and visually inconsistent with other posts on the blog.

Why formatting is important

• Consistency – When your formatting is off, content looks inconsistent across paragraphs and pages.
• Readability – Bad formatting makes your content difficult for users to read.
• No surprises – Correctly formatting copy ensures that no unpleasant display issues sneak into your content, and that your pages display correctly in all web browsers, not just yours!

How bad formatting can happen to you

Bad formatting usually results when you copy and paste text into a Rich Text Editor. At Loyola, you may come across two Rich Text Editors; one for the Drupal content management system, and one for the WordPress blogging system. Here’s what they look like.

Drupal’s Rich Text Editor:

WordPress’ Rich Text Editor:

Rich Text Editors are also sometimes referred to as What You See Is What You Get (WYSIWYG) editors, but the problem is that what you see isn’t always what you get, especially when copying and pasting text. If you copy your content from a Microsoft Word document or from another webpage, hidden formatting is often copied, too, and pasted into the Rich Text Editor along with your text.

How to clear unwanted formatting

There are several ways to ensure that your content stays pure and publishes as intended.

Method 1: Copy and paste, twice

This is the foolproof method. To be absolutely sure that no formatting is copied over from your source document or page, you’ll need to copy and paste twice. The first paste should be into a simple text editor like Microsoft Notepad, which will disregard all formatting and only accept the raw text. Next, you would highlight all the text from Notepad, copy it again, and then paste it into your Rich Text Editor.

Bonus tip: If you just have a small snippet of text to copy and paste, use your browser’s address or search bar as a temporary dumping ground. All formatting will have been stripped when you copy it back out of there.

Method 2: Paste via the toolbar buttons

The Rich Text Editors in both Drupal and WordPress provide buttons on the toolbar to help you strip formatting. They are Paste as Plain Text and Paste from Word. They look like this:

Clicking either of these buttons gives you a pop-up window into which you can paste your text, then click OK/Insert. The vast majority of the time, you’ll want to use the Paste as Plain Text button, as this will strip out all the hidden formatting in your content. Only use Paste from Word if your source content has minimal formatting (bold, italics, etc.), and even then be sure to check that nothing unexpected sneaks in.

Method 3: View source and strip manually

If all else fails and you’re familiar with HTML, you can always view the source code for the content you pasted into the editor and manually delete the badness from there. You can access the source code by clicking the HTML tab in WordPress or the Source button in Drupal.

If you need help with this, a member of the Web Team will be happy to assist you. Contact us via webteam@loyno.edu.

Avoiding formatting issues

One way to ensure that you never run into formatting issues is to never copy and paste content into a Rich Text Editor. That is, rather than typing up your content in a Word document initially, you could type it up and save it unpublished within Drupal or WordPress. Both of those systems support revisions, so you’ll have the added benefit of reverting back to a previous saved version of your work if needed. Plus, your work will be stored in just one place and you can access it from any computer.