By Sarah Reed

If you are using a content management system like Wordpress, Joomla or Drupal to manage your site, you will have noticed that you can make your edits through one of two views: the “visual side” or the “HTML side.”

When you use the “visual” tab to make your edits, you are in fact using a WYSIWYG, which is an acronym for What You See Is What You Get. It allows a person with no HTML or coding knowledge to easily edit the content and images in the body of their website. This is of course wonderfully convenient for anyone who is not a coder, but there are a few times when you may need to look behind the curtain of a WYSIWYG in order to properly make the changes you want.

A WYSIWYG is basically a foreign language translator, translating “normal” text into HTML code and vice versa. As with any foreign language translator, the translation is not always perfect, and words can get rearranged or scrambled, which can result in something breaking or not appearing correctly on your website. Here are a few examples of instances when edits need to be made directly in the HTML code:

• Scripts – If a script is being used in the content of the page, you will need to make edits in the HTML because the code for the script does not translate correctly to the WYSIWYG.
  How can you tell if a script is being used? If something moves in the text area of your website (i.e. – click a button and a menu appears or expands).
• Facebook or other badges – If you are adding a badge from a social site like Facebook (such as a “Like Box”), you will be given a piece of code from that site to add into your website code to make the badge appear. You cannot enter this code into the WYSIWYG because a WYSIWYG does not read code and will simply show the code as text on your website. The code needs to be entered into the HTML side of the site in order to appear correctly.
• Pasting Text – Even though your WYSIWYG may act like a Microsoft Word document as far as usability for editing, it is in fact not a Word document, and you cannot simply paste text into it.
  When you paste text into a WYSIWYG, you are also pasting a large amount of style information for that text (which you can see if you switch to the HTML view). If the font for your website is Helvetica, for example, but the document where you wrote your text was written using Arial, when you paste that text into the WYSIWYG, the text will appear on your website as Arial.
  To avoid this, if you are going to be pasting text, either do so into the “HTML” side of your site (be sure to make note of the paragraph (<p>) and break (<br />) tags that create the paragraphs) or use the “paste as plain text” feature of the WYSIWYG.
• Single Line Spacing – When you hit enter/return in a WYSIWYG, it assumes that you are starting a new paragraph and adds in the spacing for a new paragraph. If you do not actually want to start a new paragraph and just want to move text to the next line, you can either use the HTML side and hit enter/return there so that it will not add in the extra space, or you can hit shift-enter while in the WYSIWYG to achieve the same effect.

When making your edits you should always preview your edits (if this option is available) before making them live. This will allow you to see if you have made any errors in your edits and allow you to correct them before saving the changes so you can ensure your page comes out just as you planned.

This entry was posted on Monday, August 2nd, 2010 at 5:13 pm and is filed under Blog, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.