# Rich text & html

### Insert rich text in html format into your template

Ideal for user-generated content: enables you to add style and formatting to create your pdf. 

Your docx should contain the text: `{~html}`. 

* Any tag starting with `~` is used for inline HTML, such as : `{~html}` or {\~inlineComment} which will use the "inlineComment" data
* Any tag starting with `~~` is used for block HTML, such as : `{~~html}` or {\~\~styledTable} which will use the "styledTable" data

To be clear :

* The `{~inline}` tag is used when you want to replace part of a paragraph. For example you can write :

```txt
My product is {~blueText} and costs ...
```

The tag is inline, there is other text in the paragraph. In this case, you can only use inline HTML elements (`<span>` , `<b>` , `<i>`, `<u>`\\, …)

* The `{~~block}` tag is used when you want to replace a whole paragraph, and you want to insert multiple elements

```txt
{~~block}
```

The tag is block, there is no other text in the paragraph. In this case, you can only use block HTML elements (`<p>`, `<ul>`, `<table>`, `<ol>`, `<h1>`)

###

<details>

<summary>List of accepted html tags :</summary>

docMaker currently supports:

* `<br>`
* `<p>`
* `<h1-h6>` tags
* `<p>`
* `<b>`
* `<i>`
* `<u>`
* `<ul>`, `<ol>` and `<li>` for ordered and unordered lists
* `<span>`
* `<small>`
* `<s>`
* `<ins>` and `<del>`
* `<strong>`
* `<em>`
* `<code>`
* `<table>`, `<tr>`, `<td>`, `<tbody>`, `<thead>`, `<tfoot>`, `<th>` tags
* `<a href="URL">Linktext</a>`
* `<input type="checkbox">` and `<input type="checkbox" checked>`
* `<sub>` and `<sup>`
* `<pre>`, by using Courrier font and retaining all spaces
* `style="color: #bbbbbb"` property
* `style="font-size: 30px"` property
* `style="font-family: 'Times New Roman'"` property
* `style="background-color: blue"` property (or with rgb codes)
* `style="text-decoration: underline"` property
* `style="padding-left: 30px"`
* `style="width:33%; height: 50%;"` (on td only)
* `style="text-align:justify"` (or other values)
* `style="vertical-align: bottom"` (on td)
* `style="border: none"` (on table)
* `style="break-after:page"`
* `style="break-before:page"`
* `style="white-space:pre"`

</details>