Windward DocumentationWindward DesignerDesigner for Microsoft OfficeReference20.0.0 HTML and CSS Tags and Attributes Supported By Out Tags

20.0.0 HTML and CSS Tags and Attributes Supported By Out Tags

Along with text and images, the Out Tag can also display HTML. In doing so, the HTML tags are converted to their Microsoft Office equivalents. For example, if an HTML snippet has a bold tag <b> applied it will convert the text it surrounds to be bold when displayed in Microsoft Office report template output.

Here is a list of supported HTML Tags and attributes. 

Don't forget you must set the Out Tag property type to TEMPLATE for the HTML to be properly interpreted. This functionality is not supported in PowerPoint Templates, so HTML will not be rendered.

Changes in Version 20.0.0

The HTML Tag had support added:

  • <br>

This CSS attribute was added for <ol> and <ul> tags:

  • list-style-type

Supported HTML and CSS Tags and Attributes

Tag HTML Attributes CSS Attributes Notes
<a> href; style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<b>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<body>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<br/>

none </br> tag in DOCX output will use styling at beginning of previous paragraph for imported HTML in 20.0.
<div> bgcolor; style
  • background-color
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<em>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<font>
color; face; size; style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<i>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<img/>
alt; src
none
<li>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<ol>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-style (italics/oblique only)
  • font-size
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • list-style-type
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<p>
align; bgcolor; class; style
  • background-color
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<span>
bgcolor; style
  • background-color
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<strike>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<strong>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<sub>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<sup>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<table>
bgcolor; border; style; width
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
  • width

<tr>
bgcolor
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<td>
bgcolor; style; width
  • background-color
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
  • width

<u>
style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<ul>
style
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • list-style-type
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<h1> align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<h2> align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<h3> align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<h4> align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<h5> align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

<h6> align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

Supported Formats for HTML

HTML Attribute Supported Formats
alt any text
align left; center; right; justify
bgcolor
  • hex values, e.g. #F03; #FF0033
  • black; silver; gray; white; maroon; red; purple; fuchsia; green; lime; olive; yellow; navy; blue; teal; aqua
border px values
class any text
color
  • hex values, e.g. #F03; #FF0033
  • black; silver; gray; white; maroon; red; purple; fuchsia; green; lime; olive; yellow; navy; blue; teal; aqua
face  any text
href any text
list-style-type

size
  • 1-7 (standard HTML sizes)
  • pt or px values
src any text
style CSS
width
  • px values
  • numbers (px)
  • percentage values

Supported Formats for CSS

CSS Attribute Supported Formats
background-color
  • hex values, e.g. #F03; #FF0033
  • black; silver; gray; white; maroon; red; purple; fuchsia; green; lime; olive; yellow; navy; blue; teal; aqua
  • "rgb(R,G,B)" where R, G, B are integers
color
  • hex values, e.g. #F03; #FF0033
  • black; silver; gray; white; maroon; red; purple; fuchsia; green; lime; olive; yellow; navy; blue; teal; aqua
  • "rgb(R,G,B)" where R, G, B are integers
font-size
  • 1-7 (standard HTML sizes)
  • pt and px values
list-style-type
  • "upper-alpha"; "upper-roman"; "decimal"; "decimal-leading-zero"
width
  • pt values
  • percentage values
  • numbers (px)

CSS elements must be identified individually in the current version.  For instance you cannot specify a border with the “shorthand” property like: 

border: 5px solid red; 

The border must be defined like:

border-width: 5px;

border-style: solid;

border-color: red;

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.