Changes to the HTML Object
We have made several changes to the way HTML objects work, from enhancements to the HTML edit window, to moving the tool more into alignment with current versions of HTML5. While many of the deprecated tags still work (as they do in any browser), the tags generated through the toolbar buttons now use correct HTML5 syntax and styles. The HTML output generated by FormFusion should now closely match the output generated by your browser if you were to create a webpage with the same HTML.
Improvements to the HTML Editor
- The markup in the HTML edit pane now color-codes various parts of the HTML syntax.
- Tags are purple
- Attributes are red
- Attribute values are blue
- Text included in the output is black.
- Changed the font used in the edit pane to a monospaced font (Courier New).
- Added scrollbars to the preview pane to let you view the entire HTML object no matter how big it is.
- You can also expand the preview pane or the markup pane to use the entire window area:
The three buttons let you switch between text edit, preview, and split view:
- You can now use Ctrl-A to select all text in the edit pane.
- Removed the buttons to insert Shadow, Hidden, and Error tags, since these tags are not supported in HTML5.
- You can approximate the <e> tag by using a span with style="border-bottom: 1px dotted #ff0000" to create a red dotted underline for the text within the span.
- For hidden text, use style="visibility: hidden"on the container holding the text (span, paragraph, etc.).
- The text-shadow property is not supported.
Deprecated <font> Tags
In line with changes to the HTML specification, the buttons that create font tags have been updated to insert <span> tags with the appropriate font styling, instead of using the deprecated <font> tag. Existing templates that have HTML components are automatically converted to use the correct tags as part of the upgrade.
Example of fonts used in FormFusion 3.3:
<font size="12" face="Times New Roman">Testing font size 12 Times New Roman</font>
Example of fonts used in FormFusion 3.4:
<span style="font-family: Times New Roman; font-size: 12pt; ">Testing font size 12 Times New Roman</span>
One thing to note is that if you were previously using point sizes to specify your font (size="14pt" instead of the default size="14"), you may wind up with malformed HTML such as size="14ptpt". This would only occur if you typed the HTML in manually. If you used the font buttons in the toolbar to create your HTML tags you should not run into this issue. We recommend testing any templates that use HTML objects to make sure there were no issues converting your font tags to the new format.
Horizontal Rule Padding
Lines created by <hr> bars now have padding above and below the horizontal rule, in line with current browser implementations.
You can remove the padding as follows:
<hr style="margin-top: 0px; margin-bottom: 0px">
Ordered and Unordered List Styles
List items in the previous HTML component were not indented and the list did not have any padding between the top of the list and the content immediately before the list. List styles now match current browser implementations.
If you want to remove the bullet indentation, use a style as follows:
<ul style="list-style-position: inside; padding-left: 16">
To remove the padding above the list, use:
<ul style="margin-top: 0px">
Internal and Inline Styles
The new HTML editor supports using standard HTML5 styles to change the look and feel of the various elements. There are two places you can apply styling:
- In a <style> tag in the header (internal stylesheet).
- As an inline style in the opening tag of the element.
The example below uses both an internal stylesheet and inline styles to develop the look and feel of the output.
Internal Stylesheets
The <head> section comes before the <body> and includes the <style> tag, which is where you declare any classes to be used in the body of the HTML document. Here, we are declaring a class called p.red, which will affect any <p> elements assigned to the "red" class.
Within the body, notice the <p class="red"> opening tag for the second paragraph. All text within this paragraph uses the styling declared in the internal stylesheet for the p.red class. This is why the preview shows the text here as red, underlined, and bold.
Inline Styles
In order to make the word "inline" appear different from the rest of the text, we apply a local style to a set of <span> tags surrounding it. Local styles override any declarations in the internal stylesheet. Here, we change the color back to black and remove the underline for all text within the <span> tag:
<span style="color:black; text-decoration:none"> inline </span>
For more information and tutorials on how to use HTML and CSS, you can refer to http://www.w3schools.com/html/. This website is not associated with Evisions, but provides a good basic introduction to HTML.