HTML

:html

Compatible with ODT, DOCX and PDF files.

The :html formatter allows you to render a variety of HTML tags within your documents. Currently, the following tags are supported: <br>, <b>, <strong>, <i>, <em>, <u>, <s>, <p>, <a href="URL">, <ol>, <ul>, <li>, <del> and <img>. Unsupported tags, and attributes are skipped and not rendered at this time.

CSS Styles

The :html formatter supports inline CSS style attributes color and background-color. Styles defined within a <style> element, or those applied through classes and IDs, are not supported. Here is an example of how to use inline style attributes:

<p style="color:green;background-color:#FF00FF"><b>OK</b></p> 

Supported Color Formats:

• Hexa: A six-digit representation of a color using hexadecimal notation. It defines colors by specifying the intensity of red, green, and blue components. Examples: #FF00BB or #faebd7.
• HSL: Expresses a color in the sRGB color space according to its hue, saturation, and lightness components. Examples: hsl(120deg 75% 25%), hsl(120 75 25) or hsl(120,75,25).
• RGB: Expresses a color in the sRGB color space according to its red, green, and blue components. Examples: rgb(31 120 50) or rgb(31,120,50).
• Named Color: The name of a color. Examples: red, blue, lightseagreen, and more.

Additional styles will be supported in upcoming updates.

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 <p> tag. Example usage: {d.value:html(nospace)}.

Important Notes:

• Paragraph Handling 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. Use the inline mode, to inject the HTML inside a paragraph, e.g. HTML Inline Example.
• Font Properties: If a font family or size is applied to an HTML tag, the content will be rendered with those font properties. However, Carbone does not retain text alignment for the rendered HTML content.
• Hyperlink Validation: When the anchor tag <a href="URL"> is included, Carbone verifies the URL format before injecting it into the document. Learn more about hyperlink validation.
• Image Support: For the <img> element, the source and sizing are required:
  • Source: 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...."/>
  • Sizing: The image size is determined by the width and height attributes provided in the HTML tag, such as <img src="" width="300" height="100"/>. These values must be in pixels. If the width or height attributes are missing, a default size of 5 cm (1.96 inches) is applied while retaining the image's aspect ratio.
• Support for Tab Entities: Use the character entities &ensp; or &emsp; to create a tab. Avoid using 	, as HTML parsers will collapse it into a single space due to the whitespace collapse principle. To control tab spacing in text editors:
  • LibreOffice: Select the paragraph where the HTML formatter is > Right Click > Click on "Paragraph" > Paragraphs… > Click on the "Tabs" tab > Define a position value in Inch unit > Save.
  • MS Word: Select the paragraph where the HTML formatter is > Right Click > Paragraph > Click on the "Tabs…" button at the bottom of the menu > Change the default stops or add a new tab stop > Save by clicking on "OK".

HTML Example 1

HTML Example 2

The :html formatter creates new paragraph.

HTML Nospace Example

HTML Inline Example