Design

HTML

How to render HTML content in your document?
ENTERPRISE FEATURE Available for:
Carbone Cloud
Carbone On-premise
Embedded Carbone JS v4.1+

:html

It is possible to render the following tags:  , , , , , , <s>, , <a href="URL">, <ol>, <ul>, <li>, <del> and <img>. Unsupported tags, attributes and styles are skipped and not rendered for now.

Important notes:

Compatible with ODT, DOCX and PDF files.

When the anchor tag <a href="URL"> is included, Carbone has to verify the URL format before injecting it into the document. Learn more about hyperlink validation.
If a font family or/and a font size is applied on a HTML tag, the content will be rendered with the same font properties. Carbone doesn't keep text alignment on the rendered HTML content.
When the HTML tag is placed inside a paragraph and mixed with other content, the content will be pushed in a new paragraph above or below the rendered HTML, e.g. HTML Example 2.
To render HTML lists, such as <ol>/<li> or <ul>/<li>, create a bullet list on the template then delete it, then the generated report will render the list. A new Carbone version is coming to no longer do this operation.
The image tag <img> is supported and rendered into DOCX/ODT/PDF documents.
- The image source attribute can be an URL or Data-URL, such as <img src="https://carbone.io/img/favicon.png"/> or <img src="data:image/jpeg;base64,/9j...."/>
- The image size is rendered based on width and height attributes provided by the HTML tag, such as <img src="" width="300" height="100"/>. Values must be pixels. If width or height attributes are missing, the size of 5cm (1.96in) is applied by default while retaining the image aspect ratio.

HTML Example 1

data

{
  "name" : "<b>raptor</b>",
  "description" : "The engine is <u>powered</u> by <i>cryogenic liquid methane</i><br>and<br><b><i>liquid oxygen</i></b> (LOX),<br><s>rather than the RP-1 kerosene and LOX</s>."
}

template

{d.name:html}

{d.description:html}

result

raptor

The engine is powered by cryogenic liquid methane
and
liquid oxygen (LOX),
rather than the RP-1 kerosene and LOX.

HTML Example 2

The :html formatter creates new paragraph.

data

{
  "name" : 'Banana',
  "description" : '<b>is an elongated, edible fruit</b>'
}

template

The famous fruit {d.name} {d.description:html}, botanically a berry.

result

The famous fruit Banana

is an elongated, edible fruit

, botanically a berry.