Text Pasted Straight From Word

Written in Word, pasted into the site

Many owners write their website pages in Word. It has the spell checker they trust, it is where drafts go back and forth by email, and the approved version is already sitting there.

So the finished text is copied from Word and pasted into the website's editor, where it looks almost right.

On the live site, some paragraphs are in a different font from the rest. Spacing jumps between sections, a bulleted list has turned into odd symbols, and on a phone the page looks different again.

All of it comes from formatting nobody could see, pasted along with the words.

What comes along with the text

• Font names and sizes, set on every paragraph.
• Spacing before and after paragraphs, in Word's own measurements.
• Lists made of indented paragraphs with symbol bullets.
• Empty paragraphs wherever someone pressed Enter twice.
• Tables with widths fixed for a printed page.
• Tab-aligned price lists that lose their alignment.

The first causes the most visible trouble. A font set on the paragraph itself overrides the font the site's design chose, so those paragraphs ignore the design entirely.

Why it looks fine in the office

Word's default font for years has been Calibri, which is on every Windows computer with Office installed.

Phones and many Macs do not have it. The browser substitutes another font, and the pasted paragraphs now differ from both the design and the office version.

Sizes fixed in points, rather than in the design's own units, also stop the text adjusting the way the design intends on small screens.

And the person who pasted the text checks it on the computer it was written on, where everything Word asked for is available.

Paste as plain text

Plain text carries the words and nothing else. The site's design then decides the font, size and spacing, as it does everywhere else.

WordPress has a Paste as text button on the second row of its editor toolbar, which the toolbar toggle button reveals. Switch it on before pasting.

Any editor can be given plain text another way: paste into Notepad, or into TextEdit set to plain text on a Mac, then copy from there.

The cost is that bold, headings and lists have to be added again in the editor. Which is the point.

Use the editor's own headings and lists

The website's editor has a format menu for headings and buttons for bulleted and numbered lists. Those produce real headings and real lists, which the design styles consistently.

Real headings also tell search engines and screen readers how the page is organised. Bold text set large in Word tells them nothing.

Real lists wrap neatly on a phone, with the bullet beside each item. Indented paragraphs with symbol bullets do not, and on some devices the bullet shows as a stray character.

A worked example

A lamp repair shop rewires table and floor lamps, replaces sockets and switches, converts old oil lamps to electricity and restores vintage fixtures, from a small workshop with a counter at the front.

Its pages were written in Word on the shop computer and pasted into the site when it was built in 2011. On that computer they looked right.

On a phone, the service pages appeared in a different font from the headings, the gaps between paragraphs varied, and the price list, lined up with tabs in Word, ran prices into the names of the jobs.

The list of lamp types the shop works on came through as indented paragraphs, each starting with a small symbol that showed as an empty box on some phones.

Each page was pasted again as plain text, with headings and lists set in the editor and the price list rebuilt as a simple list. The editor now pastes plain text by default.

Finding the pages already affected

Word leaves recognisable traces in a page's code: the word MsoNormal, settings beginning with mso, and font settings naming Calibri or Times New Roman.

In WordPress, the Text tab of the editor shows that code for a single page. Your developer can search every page at once for those traces and give you a list.

Check the pages people read most first: the home page, the main services, prices and contact.

Cleaning a page

For a short page, the quickest route is often to copy the text out, paste it back as plain text, and set the headings and lists again.

For a longer page, the editor's Clear formatting button strips fonts and sizes from selected text, though lists and tables usually still need rebuilding.

Pictures in a Word document do not travel with pasted text. Upload them to the site separately, at a sensible size, with a description.

Check each cleaned page on a phone before moving to the next.

Make plain text the default

The editor can be set to paste plain text every time, whatever the source. A developer can make that change once, for everyone who edits the site.

It removes the problem for future pages, including pages pasted by staff who never read a post like this one.

Text copied from emails, PDFs and other websites carries its own formatting too, so the setting helps well beyond Word.

The counter-case

Word is a good place to draft, especially when several people comment on a page before it goes live. Nothing here argues for writing in the website's editor instead.

Some editors also clean up pasted Word text reasonably well, and a page of three short paragraphs may come through with nothing worse than an extra gap.

And if a rebuild is already planned for later this year, the cleaning can be folded into that work rather than done twice.

For every page that stays, though, the rule is simple: draft wherever you like, paste as plain text, and format with the editor's own tools.

Cleaning up after Word

1. Turn on paste as text before the next paste.
2. Ask for a list of pages with Word traces.
3. Clean the most visited pages first.
4. Rebuild lists and headings in the editor.
5. Upload pictures separately.
6. Open each cleaned page on a phone.
7. Make plain text pasting the default.

Step seven is the one that stops the problem coming back. Every other step cleans up the past, and without it the next pasted page starts the mess again.

The same drift in the office's own documents is covered in quotes and invoices in whatever font Word picks.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.