|
You have a word document of text information that you want on your webpage or newsletter. You decide to copy the text and paste it right into your webpage editor. You save it and check how it looks.
You now see one of 3 things:
- It looks fine.
- It looks wrong, the formatting, font etc is messed up.
- Your whole page is broken and will not load.
Why?
It's quite simple - When you copy from word, you don't just copy what you see, you actually copy all the hidden formatting code that word uses. This code is 'Word-only' code, and web browsers simply do not know how to interpret it.
Here is a classic example:
The following is the code from Word after pasting a simple 3 column table:
<TABLE style="width: 1335px; height: 439px; mso-cellspacing: 1.5pt; mso-yfti-tbllook: 1184; mso-padding-alt: 1.5pt 1.5pt 1.5pt 1.5pt" class=MsoNormalTable border=0 cellPadding=0 width=1335>
<TBODY>
<TR style="mso-yfti-irow: 0; mso-yfti-firstrow: yes">
<TD style="border-bottom: #f0f0f0; border-left: #f0f0f0; padding-bottom: 1.5pt; background-color: transparent; padding-left: 1.5pt; width: 25.55pt; padding-right: 1.5pt; border-top: #f0f0f0; border-right: #f0f0f0; padding-top: 1.5pt" vAlign=top width=34>
<P style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt" class=MsoNormal align=center><FONT face=Calibri><FONT color=#000000><B><SPAN style="mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-GB; mso-bidi-font-family: Arial; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-hansi-theme-font: minor-latin" lang=EN-GB> <FONT color=#333333>1995</FONT></SPAN></B><SPAN style="mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-GB; mso-bidi-font-family: Arial; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-hansi-theme-font: minor-latin" lang=EN-GB><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></SPAN></FONT></FONT></P></TD>
<TD style="border-bottom: #f0f0f0; border-left: #f0f0f0; padding-bottom: 1.5pt; background-color: transparent; padding-left: 1.5pt; width: 8.5pt; padding-right: 1.5pt; border-top: #f0f0f0; border-right: #f0f0f0; padding-top: 1.5pt" vAlign=top width=11>
<P style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt" class=MsoNormal align=center><SPAN style="mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-GB; mso-bidi-font-family: Arial; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-hansi-theme-font: minor-latin" lang=EN-GB><FONT face=Calibri><FONT color=#333333>-<o:p></o:p></FONT></FONT></SPAN></P></TD>
<TD style="border-bottom: #f0f0f0; border-left: #f0f0f0; padding-bottom: 1.5pt; background-color: transparent; padding-left: 1.5pt; width: 389.2pt; padding-right: 1.5pt; border-top: #f0f0f0; border-right: #f0f0f0; padding-top: 1.5pt" vAlign=top width=519>
<P style="line-height: normal; margin: 0cm 0cm 0pt" class=MsoNormal align=left><SPAN style="mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-GB; mso-bidi-font-family: Arial; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-hansi-theme-font: minor-latin" lang=EN-GB><FONT face=Calibri><FONT color=#333333>information here </FONT></FONT></SPAN></P></TD></TR></TBODY>
</TABLE> |
And, here is the exact same table, using just normal HTML code, as it should be in a browser:
<TABLE width="99%" border="0" cellPadding="8" cellspacing="0"0>
<TR>
<TD>1995</TD>
<TD>-</TD>
<TD>Information here</TD>
</TR>
</TABLE> |
It is interesting that Word decided that the table width should be 1335 pixels wide, which is wider than most screens. This is because word sets up documents for printing, rather than displaying on a screen.
The fact that there is so much code for a simple table, also means that it is slower to download the page and that means they your pages will be slow to load. Imagine if there was a whole page of tables and other text, all with the various language formatting and multiple font styles... you'd end up with a massively slow to load webpage.
And then there are all the font styles Word puts in which will mess up your page and are completely unnecessary.
So, what's the solution?
Well, it's not as difficult as typing everything manually, just use the 'paste from word' feature of the editor, (Available on the right-click menu when you right click where you want to paste, or click the little down arrow of the paste button on the toolbar) which automatically strips out the nasty formatting, or even better - use the 'paste as plain text' option, and then go in and apply the formatting you want manually, and recreate the table if you have one using the editor table options.
|
