Skip to main content

HTML Support

Shotstack supports basic HTML rendering which is useful for styling text and some table based layouts. It is based on a subset of HTML4 and CSS 2.1.

The HTML asset clip can have its bounding box size set (i.e. 400px x 200px) and can be positioned anywhere on screen using the position and offset parameters.

Advanced features of HTML5 such as CSS animations or absolute/relative positioning is not supported at this time. Images are also not currently supported.

Supported HTML Tags#

TagDescriptionComment
bBold
bigLarger font
blockquoteIndented paragraph
bodyDocument bodySupports the bgcolor attribute, which can be a #RRGGBB color specification.
brLine break
centerCentered paragraph
citeInline citationSame as i.
codeCodeSame as tt.
ddDefinition data
divDocument divisionSupports the standard block attributes.
dlDefinition listSupports the standard block attributes.
dtDefinition termSupports the standard block attributes.
emEmphasizedSame as i.
fontFont size, family, and/or colorSupports the following attributes: size, face, and color (#RRGGBB).
h1Level 1 headingSupports the standard block attributes.
h2Level 2 headingSupports the standard block attributes.
h3Level 3 headingSupports the standard block attributes.
h4Level 4 headingSupports the standard block attributes.
h5Level 5 headingSupports the standard block attributes.
h6Level 6 headingSupports the standard block attributes.
headDocument header
hrHorizontal lineSupports the width attribute, which can be specified as an absolute or relative (%) value.
htmlHTML document
iItalic
liList item
nobrNon-breakable text
olOrdered listSupports the standard list attributes.
pParagraphLeft-aligned by default. Supports the standard block attributes.
prePreformatted text
sStrikethrough
smallSmall font
spanGrouped elements
strongStrongSame as b.
subSubscript
supSuperscript
tableTableSupports the following attributes: border, bgcolor (#RRGGBB), cellspacing, cellpadding, width (absolute or relative), and height.
tbodyTable bodyDoes nothing.
tdTable data cellSupports the standard table cell attributes.
tfootTable footerDoes nothing.
thTable header cellSupports the standard table cell attributes.
theadTable headerIf the thead tag is specified, it is used when printing tables that span multiple pages.
trTable rowSupports the bgcolor attribute, which can be a #RRGGBB color specification.
ttTypewrite font
uUnderlined
ulUnordered listSupports the standard list attributes.

Block Attributes#

The following attributes are supported by the div, dl, dt, h1, h2, h3, h4, h5, h6, p tags:

AttributeValues
alignleft, right, center, justify
dirltr, rtl

List Attributes#

The following attribute is supported by the ol and ul tags:

AttributeValues
type1, a, A, square, disc, circle

Table Cell Attributes#

The following attributes are supported by the td and th tags:

AttributeValues
widthPixel or percentage value
bgcolorHex color value
colspan
rowspan
alignleft, right, center, justify
valigntop, middle, bottom

Supported CSS Properties#

PropertyValuesDescription
background-colorcolorBackground color for elements
colorcolorText foreground color
font-familyfamily nameFont family name
font-size[ small | medium | large | x-large | xx-large ] | sizept | sizepxFont size relative to the document font, or specified in points or pixels
font-style[ normal | italic | oblique ]
font-weight[ normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]
text-decorationnone | [ underline | overline | line-through ]Additional text effects
font<font-style> <font-weight> <font-size> <font-family> ]Font shorthand property
text-align[ left | right | center ]Text alignment
text-indent<length>pxFirst line text indentation in pixels
white-space[ normal | pre | nowrap | pre-wrap ]Declares how whitespace in HTML is handled.
margin-top<length>pxTop paragraph margin in pixels
margin-bottom<length>pxBottom paragraph margin in pixels
margin-left<length>pxLeft paragraph margin in pixels
margin-right<length>pxRight paragraph margin in pixels
padding-top<length>pxTop table cell padding in pixels
padding-bottom<length>pxBottom table cell padding in pixels
padding-left<length>pxLeft table cell padding in pixels
padding-right<length>pxRight table cell padding in pixels
padding<length>pxShorthand for setting all the padding properties at once.
vertical-align[ baseline | sub | super | middle | top | bottom ]Vertical text alignment. For vertical alignment in text table cells only middle, top, and bottom apply.
border-collapse[ collapse | separate ]Border Collapse mode for text tables. If set to collapse, cell-spacing will not be applied.
border-color<color>Border color for text tables and table cells.
border-top-color<color>Top border color for table cells.
border-bottom-color<color>Bottom border color for table cells.
border-left-color<color>Left border color for table cells.
border-right-color<color>Right border color for table cells.
border-style[ none | dotted | dashed | dot-dash | dot-dot-dash | solid | double | groove | ridge | inset | outsetBorder style for text tables and table cells.
border-top-style<border-style>Top border style for table cells.
border-bottom-style<border-style>Bottom border style for table cells.
border-left-style<border-style>Left border style for table cells.
border-right-style<border-style>Right border style for table cells.
border-width<width>pxWidth of table or cell border
border-top-width<length>pxTop border width for table cells.
border-bottom-width<length>pxBottom border width for table cells.
border-left-width<length>pxLeft border width for table cells.
border-right-width<length>pxRight border width for table cells.
border-top<width>px <border-style> <border-color>Shorthand for setting top border width, style and color
border-bottom<width>px <border-style> <border-color>Shorthand for setting bottom border width, style and color
border-left<width>px <border-style> <border-color>Shorthand for setting left border width, style and color
border-right<width>px <border-style> <border-color>Shorthand for setting right border width, style and color
border-top<width>px <border-style> <border-color>Shorthand for setting top border width, style and color
border-bottom<width>px <border-style> <border-color>Shorthand for setting bottom border width, style and color
border<width>px <border-style> <border-color>Shorthand for setting all four border's width, style and color
background<background-color>Background shorthand property
page-break-before[ auto | always ]Make it possible to enforce a page break before the paragraph/table
page-break-after[ auto | always ]Make it possible to enforce a page break after the paragraph/table
float[ left | right | none ]Specifies where text will be placed in another element. Note that the float property is only supported for tables.
text-transform[ uppercase | lowercase ]Select the transformation that will be performed on the text prior to displaying it.
font-kerning[ normal | none ]Enables or disables kerning between text characters.
font-variantsmall-capsPerform the smallcaps transformation on the text prior to displaying it.
word-spacing<width>pxSpecifies an alternate spacing between each word.
line-height<number>[% | px | pt | cm]Specifies the height of a line. It can be one of the following: 1) fixed line height in pixels, points, or centimeters. 2) a percentage of the current font size.

Supported CSS Selectors#

All CSS 2.1 selector classes are supported except pseudo-class selectors such as :first-child, :visited and :hover.