Formatting Problem in MS Word & Office

Several users have reported problem with their blog colors and styles. A lot of the time this can be traced back to copying and pasting content from MS Word or Office to Blogger. Pasting content from MS Word or Office should be avoided.

MS Word uses HTML with Apple-style-span in the output coding.This is also a web-kit browser (Safari and Chrome) output coding as well. The problem is this attribute is unnecessary and clusters up the HTML coding. Sometimes this can cause your Template Designer (CSS coding) to be unresponsive.  

This is what normal HTML looks like. (Depending on Browser)

<span style="background-color:#ffff00">Test</span><br>

When using Word the generated HTML is cluttered with class="Apple-style-span" attributes.

Example:

<font class="Apple-style-span"><span class="Apple-style-span"
style="background-color:#ffff00">Test</span></font><br>

Apple-style-span is simply a pointless and unneeded HTML code. You can also look at this as  Messy HTML coding.  I will be explaining how to fix this issue at the bottom.

While MS Word may have the Apple-style-span attribute, MS Office uses MsoNormal attribute. This is much like the MS Word problem with being completely useless and pointless in all ways. The only difference is the Apple-style-span attribute is replaced with MsoNormal attribute.

MS Office also has another issue not seen in MS Word, while Word only uses HTML output coding, Office sometimes uses a CSS output as well. CSS coding is different from HTML in many ways and CSS is what the Template Designer uses to function. So by pasting content into your post from Office you may end up with a snippet of CSS coding in that post. Unlike HTML which only controls the in-line styles, CSS controls everything on the page it displays on.You may even see your sidebar links effected by this as well. In other words your template styles are no longer in control of your font making the Template Designer commands useless on a page that display this.

This below is an example of coding actually pulled from a users blog post.

<style>p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0in 0in 0.0001pt; font-size: 12pt; font-family: Times; }h1 { margin: 0in 0in 0.0001pt; page-break-after: avoid; font-size: 12pt; font-family: Times; font-weight: normal; font-style: italic; }a:link, span.MsoHyperlink { color: blue; text-decoration: underline; }a:visited, span.MsoHyperlinkFollowed { color: purple; text-decoration: underline; }div.Section1 { page: Section1; }</style>

This code above was present in a users post which was causing all the links on the homepage to remain blue and underlined. You would never know this was taking place when pasting content copied from MS Office.  Notice the red MSO that can be easily recognized as MS Office coding. If you have been pasting from either MS Word or MS Office then it is not a matter of "Is this going to cause problems?", but rather where and when it will cause you problems. I highly recommend not using either one of these programs with any website.  If you wish to use a text editor, then you should use Live Writer . How do I fix this? Their are two way you can go about fixing this issue. If the post with the issues is full of images then you maybe better off going with option 01. Option 01: In the Blogger Post Editor their is a option in the tool bar called "Remove Formatting". Just highlight the text in the post and click this option. This will bring your text back to default which can then be styled with the Template Designer or in the Post Editor. Option 02: This option is the best way to make sure you don't miss any of this nasty coding in your blog. Copy all text in  "Compose" mode in the Post Editor. Switch over to "Edit HTML" mode and remove everything you see. Paste the content you just copied into the post. Switch over to "Compose" mode and you can add any style you need or leave it up to the Template Designer to style your font. Note: You can also try to manually remove the formatting through Edit HTML mode in the post editor. This will take knowledge in HTML and or CSS coding so you know what your looking for. If you must use MS Word or MS Office then you should first filter the content by pasting it in "Edit HTML" mode. After pasting it you can switch over to "Compose" mode and add any necessary styles.