HTML Support in the LISTSERV Maestro Editor

The WYSIWYG HTML editor in Maestro supports only a certain subset of all possible HTML tags. This subset includes the most commonly used HTML features, especially those that are used in HTML emails.

If you use the editor in (WYSIWYG) Design Mode, then the HTML code that is created will automatically contain only HTML features that are supported by the editor. If the design mode is the only mode you ever use, then this is all you need to know about the editor's HTML support.

But if you are an experienced user with HTML coding knowledge and you sometimes switch the editor into Code Mode to fine tune the HTML or to enter your own code, then the following information may be helpful.

In code mode, the system can of course not stop you from trying to enter HTML code that is not supported by the editor, either by typing it directly into the editor window or via copy & paste from an external source. However, all HTML code that you enter in code mode is checked by the editor at the moment when you submit it, either when you switch back to design mode or when you exit the editor with the [Save & Close] button. If the editor finds unsupported HTML code, then this code will either be stripped or converted into supported code, as described below.

If you do not want the editor to strip or convert your HTML code, you have to forgo the advantages of the WYSIWYG editor and use only the plain source code editor. You do this by selecting the HTML Content, Source Code Editor template in the template gallery (or by uploading HTML code that you have created in an external editor).

Further below you can find a table that describes all HTML tags that are supported by the WYSIWYG HTML editor. All other HTML code is either converted into supported code (if listed below) or is stripped altogether.

Also, when editing the underlying HTML code directly, please keep the following in mind:

• The editor encloses all text in paragraph tags <p>...</p>. In design mode, all text that you enter is automatically enclosed in <p> tags. In code mode, if you enter text without enclosing <p> tags, then the <p> tags will automatically be added when you submit the code.

• In design mode, if you press ENTER, the editor automatically starts a new paragraph that is surrounded with its own <p> tags. Press SHIFT+ENTER if you want to insert a simple <br> linebreak instead.

• All empty paragraphs are automatically filled with a single non-breaking space, i.e. <p></p> automatically becomes <p>&nbsp;</p>.

• For the text styles "Bold", "Italic", Underline", "Strikethrough", "Superscript" and "Subscript", the editor uses the HTML tags <b>, <i>, <u>, <s>, <sup> and <sub>, respectively.

• For the text styles "Font Face", "Font Size", "Text Color" and "Background Color", the editor uses an enclosing <span> tag with the styles font-family, font-size, color and background-color, respectively.

• Take care when specifying values for a style attribute. Not all of the styles that you specify manually in this fashion will be recognized by the editor. This means that even though the specified style remains in the code, the editor may still not be aware of it and may thus behave unexpectedly. For example if you have a <div style="font-weight:bold">, then all text in this <div> will appear as bold, but the editor will not be aware of this, so if you place the cursor in the middle of this text, the [B] button in the toolbar will not be highlighted as it normally would be if the cursor is placed inside of text that is bolded with <b> tags.

• For <table> tags, if the "color" style is not specified, the editor automatically adds "color: inherit". And if the "font-size" style is not specified, the editor automatically adds "font-size: inherit".

• The editor converts the following HTML tags automatically:

  • <em> tag: converted into <i> tag
  • <font> tag: converted into <span> tag, with original "color", "face" and "size" attributes converted to style="color:xxx; font-family:xxx; font-size:xxx", where the value for "font-size" is one of the following: x-small, small, medium, large, x-large, xx-large.
  • <span style="font-weight:bold"> tag: converted into <b> tag.
  • <span style="font-style:italic"> tag: converted into <i> tag.
  • <span style="text-decoration:underline"> tag: converted into <u> tag.
  • <span style="text-decoration:line-through"> tag: converted into <s> tag.
  • <strong> tag: converted into <b> tag.

• The editor converts the following tag attributes automatically into inline styles:

  • <p> and <h1> ... <h6> tags: The "align" attribute is converted into style="text-align:xxx".
  • <img> and <input type="image"> tags: The "align" attribute is consolidated with the "float" style: If a "float" style is present, its value is written into the "align" attribute. If no "float" style is present but the "align" attribute is, and the attribute has the value left or right, it is kept and copied into the "float" style, otherwise the attribute is removed.
  • <img> and <input type="image"> tags: The "border" attribute is converted into style="border-style:solid; border-width:xxx;".
  • <img> and <input type="image"> tags: The "height" attribute is consolidated with the "height" style: If a "height" style is present, its value is written into the "height" attribute (but without the "px" unit). If no "height" style is present but the "height" attribute is, then it is copied into the "height" style (and the "px" unit is added, if applicable).
  • <img> and <input type="image"> tags: The "width" attribute is consolidated with the "width" style: If a "width" style is present, its value is written into the "width" attribute (but without the "px" unit). If no "width" style is present but the "width" attribute is, then it is copied into the "width" style (and the "px" unit is added, if applicable).
  • <img> and <input type="image"> tags: The "hspace" attribute is consolidated with the "margin" style: If present, the attribute is kept and copied into the "margin" style (for margin-left and margin-right). If no "hspace" attribute is present but the "margin" style defines left/right margins with the same value (and not 0), then this value is used to add a "hspace" attribute.
  • <img> and <input type="image"> tags: The "vspace" attribute is consolidated with the "margin" style: If present, the attribute is kept and is copied into the "margin" style (for margin-top and margin-bottom). If no "vspace" attribute is present but the "margin" style defines top/bottom margins with the same value (and not 0), then this value is used to add a "vspace" attribute.
  • <ol> and <ul> tags: The "type" attribute is converted into style="list-style-type:xxx".
  • <table> tag: The "bgcolor" and "width" attributes are converted into style="background-color:xxx; width:xxx".
  • <td> and <th> tags: The "align", "bgcolor", "height", "nowrap", "valign" and "width" attributes are converted into style="background-color:xxx; height:xxx; text-align:xxx; vertical-align:xxx; white-space:nowrap; width:xxx".