Skip to main content

HTML Support

Warning

The HTML asset is being deprecated and will be replaced by the text asset. This asset type is not fully supported in the Studio SDK.

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.

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

How to use the HTML asset

You can use the html asset to create text by adding your HMTL and CSS to the hmtl and css properties. You can also reference custom fonts.

{
"timeline": {
"background": "#000000",
"fonts": [
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p>Style text in video using <b>HTML</b> and <u>CSS</u></p>",
"css": "p { font-family: 'Open Sans'; color: #ffffff; font-size: 42px; text-align: center; } b { color: #21bcb9; font-weight: normal; } u { color: #e784ff; text-decoration: none; }",
"width": 500,
"height": 300
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "hd"
}
}

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.

Studio Support

Warning

The HTML asset is not fully supported in the Shotstack Studio Editor and Studio SDK.

To allow HTML asset types to show up in the Studio you can only use the paragraph p element with the data-html-type=\"text\" attribute.

CSS styling support is limited to:

  • color
  • font-size
  • font-family
  • text-align
  • opacity
{
"timeline": {
"background": "#000000",
"fonts": [
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "html",
"width": 500,
"height": 500,
"background": "#FFFFFF",
"html": "<p data-html-type=\"text\">Welcome to Shotstack</p>",
"css": "p { color: #F1C40F; font-size: 50px; font-family: 'Clear Sans'; text-align: left; }"
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "hd"
}
}