Here are three examples of the type problems you can encounter when pasting text onto your website. After the examples is a suggested procedure for avoiding these issues.
Example 1.
Here text has been copied from a pdf document. First, here is the text as it was in the pdf document.
Next, you can see how the text looks when pasted into the website editor. It still looks fine here, but notice that the line breaks are in exactly the same place here as they where in the pdf.
Lastly, see how the text appears in the website. It looks a little strange – with line breaks in odd places, some lines are shorter than others. This is because the line breaks from the pdf are still present in the text.
If you click on the html button in your website editor / text input area, like the one highlighted here…
… you can see where these line breaks are in the code: as you can see, they are expressed as <br/>.
Example 2.
In this example, text is pasted from one website to another. Here you can see the text selected in its original location.
The text is copied into the website editor and saved onto second website, here is what it looks like:
While the text looks fine, with no strange line breaks like in example one, it is actually carrying the formatting from the first website still. Here is what you would see in the html editor:
In instances like this, your website would use the font family, size and characteristics (bold, italics, colours) from the old website, and not the ones which you or your web designer have chosen. For example, compare the text above to the image below, which shows what it should have looked like in this instance:
Here is what the corresponding html should have looked like:
You can see the html looks much simpler and clearer. This is because all of the fonts and things are dealt with (for the most part) “centrally” – by your “CSS”.
This issue doesn’t seem so bad at first, you may not even notice it – however, over time, you website will start to accumulate many (mismatching) styles from different websites and so can start to look a little strange. Also, text pasted in this way can be hard to edit.
Example 3.
In this example, the text is edited in a word processor before being pasted onto the website.
The text may look nice in the word processor, but sadly, the result is similar to the situation in example 2. Here you can see the resulting html:
You can see all sorts of extra formatting. Below you can see what the text looks like on the website:
Compare it too what it should look like:
If you line up these two examples, the text for the word processor and the text style native to our website next to the text pasted from another website in example 2, and you can see how miscellaneous a website can look after just a few minutes of accidental formatting errors:
Solutions
For the product we sell wholesale, we have provided a plain text version of the product descriptions. In a plain text file, if there is any formatting, you can see it (like on your html editor). In this instance, there is no formatting, which is ideal for pasting into your website.
- First of all, you need to download the file. In some browsers you will click on the link, in others you will need to right click and select “Save Link As”:
- Next you need to open the file in a text editor (rather than a word processor). There are many different text editors to choose from, however, your computer will probably have a default editor installed already, which is should suggest to you if you right click on the file. For example, “Gedit” on Gnu/Linux OS’s, “Notepad” on Windows or “Edit” on Mac OS.
- When you open the document, you might think that it looks a little “old fashioned” – however, these type of files are actually the building blocks of the internet, for example, your whole website is made up of files like this – we are just not used to seeing them.
- Now you can select the text, copy it and paste it into your website editor. If you have any problems, try pasting the text into the html area of your editor.
- You may need to re-enter your like breaks by using your enter key in the main editor window (or by using a <br/> tag in the html editor window).
- Save your changes and take a look at your website to check your work. Your text will be in the style specified by your website css.
Here are some additional steps if you are taking content from other places, such as websites, word processing document or other websites.
- Paste the text into your text editor. If you see any html that you don’t think should be there, such as fonts, you can simply delete it. Html tags usually come in parts, for example <strong> there is text here </strong> or <span style=”etc ecc”> lots of text here </span>. Try and delete both tags in the pair.
- You can also delete any line breaks that should not be there. One way to spot them is to turn “line wrapping” off – when line wrapping is turned off text will keep on running along on one long line until a line break is inserted (using the enter key). This makes it very easy to spot line breaks hiding in the middle of paragraphs, because you will see a new line begin with no capital letter. Below is a file with no line break problems next to a file with one line break problem.
- Once you are happy that there are no erroneous html tags or line breaks, you can paste the text into your website in the same way as described above.
Remember: text editors do not check spelling by default, you can run a spell check if your editor has the option, or check your spelling using your browser spell checker after pasting your text into your website editor.
Also: you can add your own styles and formatting, such as headings, bold / italic styles and bullet points if you want to – the problems described in this blog are not issues with formatting per se, but with accidentally applying formatting from outside sources to your website. Remember, if you apply some styles using your editor then you will still see them in your html editor in the same way you see erroneous html – you don’t want to delete these html tags however. Thats why its good to start with a “clean slate” and no formatting.
edit application (mac) or notepad (windows)
Anyway – for now, farewell from London, Berlin and Poznan!
BecoThings make 
