Microsoft Word is Bad

Never copy and paste content directly into a web page from Microsoft Word.

UNBC Uses Web Style Sheets

All content on the UNBC website is designed with specific styles for text in terms of font, sizes, colours and more. This helps all content share a common look and feel so that it is distinctly recognizable as being UNBC branded. It’s not just about branding, however; it’s also about creating a strong user experience.

The use of common styles across the website means that a web user can easily browse the UNBC website and scan content without having to relearn how content is presented.

Microsoft Word also uses Styles

And they are not the same as the UNBC web styles.

Microsoft Word is a word processing tool and is not meant for publishing web content. Fonts in Word may not be accessible online; text sizes are defined by styles and code meant for printing, not for the web; etc. The coding used by Microsoft Word to define styles of content for word processing just does not work online.

Copy/Paste from Word Corrupts Web Code

When you copy content directly from a Word document, the styles defined in Word will attach to that content and be pasted into the web code along with your text.

Code that has carried over MSO (Microsoft Office) code is easily identifiable:

What Goes Wrong

Everything.

It is nearly impossible to style content with MSO code attached using UNBC’s web styles. The web code will have a very hard time resolving what should display. And not just about what text to make Header 3, but it can break the entire layout of the webpage.

When the UNBC website migrated into Drupal, we encountered many pages with MSO code. As the old content management system used outdated HTML standards, these pages would

often display fine. Now that we are using current web standards, this is no longer the case.

Here are some screenshots of some worst case examples of how MSO code broke UNBC webpages:

 

Recognizing the Problem

You might have an MSO code problem if you find that you are having difficulty editing a webpage, even when following simple, step-by-step editing directions.

MSO code has caused problems ranging from not being able to apply UNBC web styles, to content disappearing or shifting on the page, to not even being able to edit/select text on the page.

Fixing the Problem

There are two options:

  1. Review and repair the code on the page, line by line.
  2. Start from scratch.

Most often, we will delete all content and code from a page that has MSO code embedded within it as repairing the code manually is simply too time consuming and prone to error.

Preventing the Problem

Preventing this problem is easy peasy.

Simply past your content from MS Word using the “Paste as Plain Text” button within the Drupal WYSIWYG editor.

This will remove all formatting and MSO styles and paste your content into the page as plain text. It’s just like copy and pasting your content through Notepad before pasting in the web page.

From there, you can add appropriate styles as selected from the UNBC web styles.

Tip: Don’t waste your time formatting your content in Word if it will be displayed online. You’ll just end up doing it again in Drupal. 

In Conclusion

  • MS Word is excellent word processing software.
  • MS Word is not meant for web publishing.
  • Editing pages that have MSO code embedded within them is a nightmare.
  • Never copy and paste into a web page directly from MS Word.
  • Always use the “Paste as Plain Text” when copying content from MS Word into a web page.

Make a list that links to anchors

You may recognize Anchors as Bookmarks, which is what they were called in the old CMS. An anchor acts as a destination point for when its corresponding hyperlink is clicked.

Step 1 Create a list of items you will have on your page ie., Lions, Tigers and Bears. This will act as a sort of index.

Step 2 Add the corresponding content to your page below the list (see example below).

Step 3 Create anchors by placing your cursor at the beginning of the word where you want your anchor to be. Click on the anchor icon in the WYSIWYG toolbar and give your anchor a name (I usually name it the same as the word it lives next to). I made each header below my list an anchor.

Step 4 Once you have created all of your anchors, go back to the list you created above and assign each item in your list to an anchor. Do this by selecting the list item and turning it into a hyperlink by selecting the hyperlink icon. Choose “anchor” in the drop-down menu that pops up and then choose the corresponding anchor you created in step 3.

 

First Step in Creating Content

What is the first step that you should always take when creating content in the WYSIWYG editor?

Use templates! Always make sure that your content is within a template. Even if you just want your content in one column.

Think of this analogy: templates are like Lego because you can stack them.
Stacking templates allows you to present your content using multiple layout templates on one page.

Screenshot of content template selector window