Fields - HTML Support

You can pass HTML as a field value to get the dynamic formatted text inside the output Document.

You need to add an "*" in front of your field name The final syntax should be: {*fieldName}

{description} - Regular Field that supports only text and newline character
{*description} - Special field that supports HTML as input

Supported HTML Tags

There is a limited number of HTML tags that you can use for HTML to Document conversion here is the list:

<a>
<b>
<blockquote>
<br>
<code>
<del>
<div> is treated as paragraph
<em>
<h1-h6> tags, they translate to paragraphs with different font-size
<hr>
<i>
<img>
<ins>
<p>
<pre>
<s>
<span>
<strike>
<strong>
<sub> and <sup>
<table>, <tr>, <td>, <tbody>, <thead>, <tfoot>, <colgroup>, <col>, <th> tags
<ul>, <ol> and <li> for ordered (bullet list) and unordered lists

Inline styles

Experimental: Documentero can also parse styling properties. Keep in mind that specific styles work only on specific elements, and if a value is unrecognized or cannot be converted into the document format, the styling will be omitted.

'background'
'background-color'
'border'
'border-bottom'
'border-collapse'
'border-color'
'border-left'
'border-right'
'border-style'
'border-top'
'border-width'
'color'
'column-span'
'display'
'font'
'font-size'
'font-weight'
'height' - img only
'line-height'
'margin'
'margin-left'
'margin-right'
'margin-top'
'margin-bottom'
'max-width' - img only
'min-width' - img only
'page-break-after'
'text-align'
'text-decoration'
'vertical-align'
'width' - img only

Links

If you pass link elements they will be added as clickable hyperlinks to your document. We support also linked images

<a href="https://documentero.com">Linktext</a> - Hyperlink with Text

<a href="https://documentero.com">
<img src="https://documentero.com/custom/DocumenteroNormal.png">
</a> - Clickable image

Page Breaks

Pass div element with class 'page-break' or style property 'page-break-after'

<p class="break-break"></p> - Creates page-break in output document

Mermaid Diagrams

You can pass mermaid charts, and diagrams using the syntax below. . Read more about mermaid syntax: https://mermaid.js.org/intro/

<pre class="mermaid">
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
</pre>

Hints

• Font settings for text in HTML content will be inherited from your template's Regular Text Styling Settings. You can change them in your document template styling unless they are explicitly defined with styling properties.

• Unknown tags in HTML will be omitted in the output document.

• HTML tags cannot be used inline with other text or bindings. Use them in a separate paragraph:

Some text {*description} rest of text ====> INCORRECT

{#section}  {*description} {/section} ====> INCORRECT

Some text:
{*description} 
rest of text ====> CORRECT

{#section}
{*description}
{/section} ====> CORRECT