Fixing Style Discrepancies

Have you ever noticed that you have pages with weird styles that don't match the rest of the site? Perhaps it is causing some accessibility errors or conforming to your style guide. The reason for this may be that your browser is copying rich text.

What is Rich Text and Why Does It Matter?

Rich text maintains any formatting a document or email may have set. This can be useful as it will maintain linked text, font type, sizing, as well as may other attributes. It's designed to save you time reformatting your text every time you paste it. A good example would be taking a report created in Microsoft Word and pasting the contents into an email. Microsoft Outlook would keep your text looking exactly as it did in the word document.

The problem with this is that in SharePoint, it maintains this styling by using html style attributes that override the styling of the site. By default, the SharePoint web template is designed for consistency and accessibility and the styles captured in rich text can cause accessibility issues or make pages unreadable. Below is an example of a page that has had rich text pasted in, versus how it would look if you had created it using SharePoint's styling:

In addition to the styling not matching the rest of the site, the underlying HTML structure changes as well. The block created in SharePoint looks like this:

It has a proper header and text is in paragraph tags. This HTML is semantic and accessible. Pasting the block in rich text however shows a different picture:

The code is a mix of spans with inline styling and additional attributes. There is no header element. This page is not accessible in addition contains a lot of additional HTML content that is unnecessary. While it's not a lot in this block of text, across a website it can lead to increased file size and poor performance.

How Do I Avoid This?

Thankfully, modern browsers provide an easy way to paste text without copying all of the web styling. When going to paste your text, you can right click and select "Paste as plain text" or use the shortcut "Ctrl+Shift+V". 

How Do I Fix a Page That is Incorrectly Styled?

Fortunately, there's an easier way of fixing styled content than modifying the underlying HTML. 

1. Copy the styled section from the website
2. Paste the content as plain text directly below the existing content.
3. Using the old content as a guide, relink and restyle any content that needs attention.
4. Delete the old content.