WYSIWYG not showing the same as saved work

If the page contents looks fine in the WYSIWYG editor, but in preview the font and alignment is a mess, you could be seeing the results of numerous errors. While WYSIWYG stands for What You See Is What You Get…you have learned that it is not always what you get. Ultimately, the answer to this formatting issue is in the code. It would be to your advantage to become familiar with Cascade’s edit HTML button, and a few basics of HTML code. 

Read more about some basic HTML tips >> 

Here are a couple of possible problems you are encountering...

Copied text from Word

If you remember from training, you can not copy directly from Word. When you generate & format, then copy your website text straight from Word and paste into the Cascade WYSIWYG editor, you will have a mess! Microsoft embeds an enormous amount of code (metadata) that you do not see in the WYSIWYG editor....THAT is what was messing up your page.

How to avoid (or fix) this messy-code problem:

  1. generate the content as desired (in Word or another text tool)
  2. copy all of the text from the Word file
  3. open notepad (or a similar text editor)
  4. paste all of the text from the Word file into a text editor
  5. select all text from Notepad and "copy"
  6. then paste the completed text from Notepad into Cascade's WYSIWYG editor
  7. then format the text as desired (paragraph format, headings, links, images, bold, numeric order)

...now the code to create this web page is clean and your page will be correct in the preview.

Too much text is bold or underline

Open the HTML editor (html button) from the WYSWIG formatting tool bar.

Review the page contents for inconsistencies in the code. Look for an open and closed tag with no content between. Such as:

<b></b> ...will cause all following text to be bold

<u></u> ...will cause all following text to be underlined

<ul></ul> .....will cause indenting in all text between these tags

...in this case, delete the entire tag set <ul> and </ul>

Sometimes the tags are "opened" [ <b> ] and there is no "closing" tag [ </b> ]...for example:

<p><b>Page Headline</p><p>Text on the page about what this page is telling the viewer</p> 

...in this case the bold tag [ <b> ], is not closed [ </b> ] and all text following this opening will be bold. You can either delete the opened tag...or add a closed tag where applicable.

Remember to save your changes by choosing the update button button at the bottom left of the HTML editor pop-up window. 

Special to a 3-column layout

You may notice that the text in the center column of a 3-column layout is not appearing in the browser as you originally formatted it. In this case, the formatting tag error lies in the WYSIWYG editor for the right column content. Follow the above recommendations, but be sure to review the HTML for the right column contents.

 

 

W3 Schools has great resources in HTML :