Windward DocumentationWindward DesignerDesigner for Microsoft OfficeReference16.7.0 HTML and CSS Tags and Attributes Supported By Out Tag

16.7.0 HTML and CSS Tags and Attributes Supported By Out Tag

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 16.3.0

The following HTML tags were added:

  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

The following CSS attributes were added:

  • 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 HTML and CSS Tags and Attributes

Tag HTML Attributes CSS Attributes
<a> href; style
  • border-style
  • border-color
  • border-width

  • 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
<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
  • 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
<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
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
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.