Design

HTML

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

:html

Compatible with ODT, DOCX and PDF files.

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.

Options Available:

inline: Renders HTML within the current paragraph at the same location without moving or adding paragraphs. This option supports only the following HTML tags: a, b, strong, em, i, s, del, u. Other HTML tags are ignored and not rendered. Example usage: {d.value:html(inline)}.
nospace: Renders HTML without adding extra paragraphs at the end of each  tag. Example usage: {d.value:html(nospace)}.

Important Notes:

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

HTML Nospace Example

data

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

template

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

result

The famous fruit Banana
is an elongated, edible fruit
, botanically a berry.

HTML Inline Example

data

{
  "value" : "<b>The text is injected within the current paragraph</b>",
}

template

After

Beginning - {d.value:html(inline)} - End

Before

result

After

Beginning - The text is injected within the current paragraph - End

Before