// Blog: Short for 'Web Log'
Technology, the Web, life hacks, and more
Feb
02
Stripping 101 BY Kim Skimmons

[W]hat a teaser of a title, right? Sorry to disappoint, but while this post is not at titillating as the title suggests, it nonetheless addresses a very common problem that nearly all of my clients encounter at some point concerning layout issues — especially font size, font style, and line spacing — that suddenly appear after updating the content of a webpage on their site and which the client cannot figure out how to remedy despite numerous attempts. That’s usually when my phone rings.

Examples

“Before” Pix

For reference, here’s what my client, Rick’s, webpage looked like before he changed it:

avoiding formatting errors after copy paste - before screenshot

“After” Pix

And here’s what it looked like after Rick added the “State Government Task Force” content to the bottom of this page. As you can see, this new content doesn’t look the same as the older content:

avoiding formatting errors after copy paste - after screenshot

Another “After” Screen from a Different Site (and Client):

avoiding formatting errors after copy paste - after screenshot

What Gives?

99% of the time, these kinds of problems are caused by copying content from one location (e.g., MS Word, another website, an email) and pasting it directly onto your own webpage.

The reason this is a problem is because the content that was copied has it’s own formatting already applied to it. It has a certain font style, line spacing, paragraph margins, and so forth. When you paste this formatted text into your website, you are pasting not only the text itself but also the formatting that goes along with it, and usually that formatting does not match your site’s formatting. Hence, the visual layout problems.

How to Fix It

Not going to lie to you: It’s a pain to fix. It’s tedious, time-consuming and error prone. Usually the only way to do it is to edit the HTML directly to remove all the unwanted formatting. Unless you are very comfortable with HTML and have nothing else to do, that can be a scary thing. Let’s take a look at Rick’s HTML to see exactly how scary the problem can be:

How Rick’s Code Should Have Looked

This is not the scary part. The code below is right out of chapter 2 of any HTML book.  Pretty straight-forward stuff: Some H2 headings <h2>, paragraphs <p>, a little bolding here and there <b>, and line breaks <br>. And that’s it! Nothing fancy. And this is the goal for how it should look.

<h2>Finance & Budget Committee</h2>
<p>Prepares and reviews annual budgets, reports on expenses for the society and ensures practices are consistent with Board policies and appropriate accounting standards.</p>
<p>
<b>Treasurer: Scott Lamb, Hilton Hotels<br>
<b>Secretary: Deborah Droke, South African Airways</b>
</p>
<ul>
<li>Marc Stec, VP Strategic Business Initatives CWTSatoTravel</li>
</ul>
<h2>Bylaws, Nomination & Election Committee</h2>
<p>Assures compliance with the Bylaws of the Society. Proposes changes to bylaws as needed. Serves as nominating committee for Board elections.</p>
<p>
<b>Chair: Deborah Droke, Treasurer</b></p>
Jackye Alton, Almeda Travel<br>
Marc Stec, CWTSatoTravel<br>
Scott Lamb, Hilton Hotels<br>
Judy Silcox, IHG<br>
Paul Coleman, TRAVCO<br>
Dallas Stewart, Christopherson Business Travel<br>
Sandra Taylor, Best Western Int’l.
</p>
<h2>State Government Task Force</h2>
<p>Goal is to meet the needs of the state government travel community.   Translate those into relevant content at SGTP’s semi annual conferences, to further member benefit and provide a voice to government agencies and bureaus by providing a forum in which “Best Practices” can be shared to benefit all in government travel.</p>
<p><b>Participants:</b></p>
<p>
<b>Co-chair: Dallas, Stewart, Christopherson Business Travel</b><br>
<b>Co-chair: Tami Nelson, State of Utah</b><br>
Claudia Bonetti, Lockheed Martin Corp.<br>
Neeru Bhalla, Best Western Int’l.<br>
Dana Devine, Red Lion Hotels<br>
Ardyth Edgerton, Red Roof Inns<br>
Jeff Haag, Southwest Airlines<br>
Patt Hall, Omega World Travel<br>
James Kimble, Boersma Travel<br>
Lenora Kingston, State of Colorado<br>
Sandi Millstein, Carlson Rezidor Hotels<br>
Jason Moore, Extended Stay America<br>
Mike Parent, Coakley Williams Hospitality<br>
Thomas Puccio, Choice Hotels Int’l.<br>
Bryan Scott, Enterprise Holdings<br>
Randy Tietsort, Hertz Companies<br>
Stacey Jo Withers, State of Pennsylvania
</p>

How Rick’s Code Actually Looked (Yikes!)

Here comes the scary part. Everything you see below that is not in the previous code box is unnecessary at best and trashing your site and making you look like a rook at worst. I’m not going to go into the details of this code, but you can see it’s got lots of problems. There are so many formatting codes here that it’s difficult to find the actual content. All these extra formatting codes were dragged over when he copied and pasted the content from wherever he got it and into his site page. Scary.

<p style=”MARGIN: 0in 0in 0pt”><b><span style=”FONT-SIZE: 12pt”><font face=”Helvetica”><font color=”#003366″>Finance &amp; Budget Committee</font></font></span></b></p>
<p style=”MARGIN: 0in 0in 0pt”><font size=”2″><font face=”Helvetica”><font color=”#003366″>Prepares and reviews annual budgets, reports on expenses for the society and ensures practices are consistent with Board policies and appropriate accounting standards.</font></font></font></p>
<p style=”MARGIN: 0in 0in 0pt”><font size=”2″><font face=”Helvetica”><font color=”#003366″><br></font></font></font></p>
<p style=”MARGIN: 0in 0in 0pt”><font size=”2″><b><font face=”Helvetica”><font color=”#003366″>Treasurer: Scott Lamb, Hilton Hotels&nbsp;</font></font></b></font></p>
<p style=”MARGIN: 0in 0in 0pt”><font size=”2″><b><font face=”Helvetica”><font color=”#003366″>Secretary: Deborah Droke, South African Airways<br></font></font></b></font></p>
<p style=”MARGIN: 0in 0in 0pt”></p>
<ul>
<li><span style=”FONT-FAMILY: Helvetica; COLOR: rgb(0,51,102); FONT-SIZE: small”>Marc Stec, VP Strategic Business Initatives CWTSatoTravel&nbsp;<br></span></li>
</ul><b><span style=”FONT-SIZE: 12pt”><font face=”Helvetica”><font color=”#003366″>Bylaws, Nomination &amp; Election Committee</font></font></span></b><br>
<p style=”MARGIN: 0in 0in 0pt”><span><font size=”2″><font face=”Helvetica”><font color=”#003366″>Assures compliance with the Bylaws of the Society.</font></font><span><font face=”Helvetica”><font color=”#003366″>&nbsp;</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span><font size=”2″><font face=”Helvetica”><font color=”#003366″>Proposes changes to bylaws as needed.</font></font><span><font face=”Helvetica”><font color=”#003366″>&nbsp;</font></font></span> <font face=”Helvetica”><font color=”#003366″>Serves as nominating</font></font></font></span> <span><font size=”2″><font face=”Helvetica”><font color=”#003366″>committee for Board elections.</font></font></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span><font size=”2″><font face=”Helvetica”><font color=”#003366″><br></font></font></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><b><font size=”2″><font face=”Helvetica”><font color=”#003366″>Chair: Deborah Droke, Treasurer</font></font></font></b></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-FAMILY: Helvetica; COLOR: rgb(0,51,102); FONT-SIZE: small”>Jackye Alton, Almeda Travel</span> <span style=”FONT-FAMILY: Helvetica; COLOR: rgb(0,51,102); FONT-SIZE: small”><br></span><span style=”FONT-FAMILY: Helvetica; COLOR: rgb(0,51,102); FONT-SIZE: small”>Marc Stec, CWTSatoTravel</span><br>
<span style=”FONT-FAMILY: Helvetica; COLOR: rgb(0,51,102); FONT-SIZE: small”>Scott Lamb, Hilton Hotels</span><br>
<span style=”FONT-FAMILY: Helvetica; COLOR: rgb(0,51,102); FONT-SIZE: small”>Judy Silcox, IHG</span><br>
<font size=”2″><font face=”Helvetica”><font color=”#003366″>P</font></font></font><span style=”FONT-FAMILY: Helvetica; COLOR: rgb(0,51,102); FONT-SIZE: small”>aul Coleman, TRAVCO</span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-FAMILY: Helvetica; COLOR: rgb(0,51,102); FONT-SIZE: small”>Dallas Stewart, Christopherson Business Travel</span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-FAMILY: Helvetica; COLOR: rgb(0,51,102); FONT-SIZE: small”>Sandra Taylor, Best Western Int’l.</span></p>
<p style=”MARGIN: 0in 0in 0pt”>&nbsp;</p>
<p style=”MARGIN: 0in 0in 0pt”><b><span style=”FONT-SIZE: 12pt”><font face=”Helvetica”><font color=”#003366″>State Government Task Force</font></font></span></b></p>
<p><font size=”2″><font face=”Helvetica”><font color=”#003366″>Goal is to meet the needs of the state government travel community. &nbsp; Translate those into relevant content at SGTP’s semi annual conferences , to further member benefit and provide a voice to government agencies and bureaus by providing a forum in which “Best Practices” can be shared to benefit all in government travel.</font></font></font></p>
<p style=”MARGIN: 0in 0in 0pt”><font size=”2″><font face=”Helvetica”><font color=”#003366″><b>Participants:</b></font></font></font></p>
<p style=”MARGIN: 0in 0in 0pt”><font size=”2″><font face=”Helvetica”><font color=”#003366″><b>Co-chair: Dallas, Stewart, Christopherson Business Travel</b></font></font></font></p>
<p style=”MARGIN: 0in 0in 0pt”><font size=”2″><font face=”Helvetica”><font color=”#003366″><b>Co-chair: Tami Nelson, State of Utah</b></font></font></font></p>
<p style=”MARGIN: 0in 0in 0pt”><font size=”2″><span><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Claudia Bonetti, Lockheed Martin Corp.</font></font></span></font></span></span></font></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Neeru Bhalla, Best Western Int’l.</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Dana Devine, Red Lion Hotels</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Ardyth Edgerton, Red Roof Inns</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Jeff Haag, Southwest Airlines</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Patt Hall, Omega World Travel</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>James Kimble, Boersma Travel</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Lenora Kingston, State of Colorado</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Sandi Millstein, Carlson Rezidor Hotels</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Jason Moore, Extended Stay America</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Mike Parent, Coakley Williams Hospitality</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Thomas Puccio, Choice Hotels Int’l.</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Bryan Scott, Enterprise Holdings</font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Randy Tietsort, Hertz Companies</font></font></span></font></span></p><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>Stacey Jo Withers, State of Pennsylvania</font></font></span></font></span>
<p style=”MARGIN: 0in 0in 0pt”><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″><br></font></font></span></font></span></p>
<p style=”MARGIN: 0in 0in 0pt”></p>
<div style=”margin-left: 2em”>
<br>
</div>
<p></p>
<p style=”MARGIN: 0in 0in 0pt” align=”left”>&nbsp;</p>
<p style=”MARGIN: 0in 0in 0pt”></p>
<p style=”MARGIN: 0in 0in 0pt”><b><span style=”FONT-SIZE: 12pt”><font size=”2″><span><font face=”Helvetica”><font color=”#003366″>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></font></span></font></span></b></p>
<p style=”MARGIN: 0in 0in 0pt”><span><font size=”2″><font face=”Helvetica”><font color=”#003366″>&nbsp;&nbsp;&nbsp;</font></font></font></span> <font face=”Helvetica”><font color=”#003366″>&nbsp;&nbsp;&nbsp;&nbsp;</font></font></p>
<h4>&nbsp;</h4>

Preventing it from happening in the future

Hint: You do NOT need to become an HTML expert

It is said that an ounce of prevention is worth a pound of cure. Definitely true in this case, and fortunately there are easy ways to prevent this problem.

Key:  Strip off formatting before pasting into your site

Obviously, getting rid of the formatting codes afterwards is too painful, so a better approach is to strip off the codes before you paste them into your site. But how??? There are a few easy options for doing this:

Option #1: Use An Intermediary Program (Windows & Mac)

After you copy some formatted text from someplace, paste it into an intermediary program that doesn’t understand formatting (i.e., a plain text editor). Pasting into a plain text editor will automatically remove all formatting codes leaving only the plain text and line breaks. Perfect! Then copy the text from that program into your site.

On Windows you can use the Notepad program to do this:
1. Copy the formatted text you want to use on your site.
2. Open Notepad.
3. Paste (CTRL+V) your text into Notepad.
4. Highlight all the text you just copied in Notepad and copy it again (CTRL+C).
5. Paste this clean, unformatted text into your site.

On a Mac, use TextEdit:
1. Copy the formatted text you want to use on your site.
2. Open TextEdit on your Mac.
3. Paste (COMMAND+V) your text into TextEdit.
4. Press COMMAND+SHIFT+T to convert your text to plain text (no formatting).
5. Highlight all the text you just copied in TextEdit and copy it again using COMMAND+C.
6. Paste this clean, unformatted text into your site.

In any browser on Windows or Mac:
1. Copy the formatted text you want to use on your site.
2. Paste the text into the URL/address bar of the browser.
3. Copy the now-clean text from the browser’s address bar. (Triple-clicking the address bar should highlight the full contents of the address bar, then you can just copy it to the clipboard.)
4. Paste it where you want it.

This last one is good if the amount of text is small. It can get confusing to some people if there is an entire page’s worth of text in the address bar.

Option #2: Use Special Paste Command That Strips Formatting (Mac)

On a Mac only, instead of using COMMAND+V to paste, use:

SHIFT+OPTION+COMMAND+V

This will paste as plain text. It requires a little finger dexterity, but with a little practice you figure it out quickly. I usually use two hands. On my left hand I use my pinky to press the SHIFT key, my thumb to press the OPTION key and my index finger to press the COMMAND key. Then I use my right index finger to press the V key.

Option #3: Third-Party Programs to Create Your Own Keyboard Shortcuts (Windows)

You can also choose to install a little program that will create a nifty keyboard shortcut for you to copy/paste plain text for you:

PureText – http://stevemiller.net/puretext/
Better Paste – http://lifehacker.com/5388814/better-paste-takes-the-annoyance-out-of-pasting-formatted-tExt

I haven’t used these, but others around the Web seem to swear by them.  There are probably others like them — these are just two that I happen to know about.

My Preference?

I prefer using Notepad. I work on a Mac, but I have Windows installed under Parallels Desktop so I also have a full version of Windows running on my Mac. Mac purists hate this, but oh well. There are some programs that I use that are only available on Windows (no Mac version), so I have both. And since Notepad is such a simple program to use, I find it quick and easy to paste into Notepad, then copy/paste from Notepad into my web pages.