HTML formatting in text

Set "allowHtml": true on a text component to use a small set of formatting tags. The tags are read after the {{ }} placeholders are filled in, so values from your data may contain them too.

Tags	Effect
<b>, <strong>	bold
<i>, <em>	italic
<u>, <ins>	underline
<s>, <strike>, <del>	line-through
<br>	line break
<font color="red">	text color (named, #hex, rgb())
<span style="…">	color, background-color, font-weight, font-style, text-decoration

{ "id": "note", "type": "text", "allowHtml": true, "canGrow": true,
  "text": "Total: <b>{{ row.total }}</b><br><font color=\"#b91c1c\">overdue</font>" }

Entities (&, <,  , &#…;) are decoded.

React

viewer-html.tsx

import { ReportViewer } from '@ariana-reports/react';
import { notesData, notesTemplate } from './report-data';

export default function ViewerHtml() {
  return <ReportViewer template={notesTemplate} data={notesData} zoomMode="fitWidth" />;
}

Vue

viewer-html.vue

<script setup lang="ts">
import { ReportViewer } from '@ariana-reports/vue';
import { notesData, notesTemplate } from './report-data';
</script>

<template>
  <ReportViewer :template="notesTemplate" :data="notesData" zoom-mode="fitWidth" />
</template>

Template JSON

notes.template.json

{
  "schemaVersion": 1,
  "name": "Account notes",
  "unit": "mm",
  "page": {
    "size": "A5",
    "orientation": "portrait",
    "margins": {
      "top": 12,
      "right": 12,
      "bottom": 12,
      "left": 12
    }
  },
  "dataSources": [
    {
      "name": "tasks"
    },
    {
      "name": "customer"
    }
  ],
  "styles": {
    "title": {
      "fontSize": 18,
      "fontWeight": "bold",
      "color": "#0f172a"
    },
    "muted": {
      "fontSize": 9,
      "color": "#64748b"
    },
    "th": {
      "fontSize": 9,
      "fontWeight": "bold",
      "color": "#ffffff",
      "backgroundColor": "#334155",
      "padding": 1.5
    },
    "td": {
      "fontSize": 9,
      "padding": 1.5,
      "border": {
        "width": 0.4,
        "color": "#e2e8f0",
        "style": "solid",
        "sides": [
          "bottom"
        ]
      }
    },
    "num": {
      "textAlign": "right"
    },
    "sub": {
      "fontSize": 9,
      "fontWeight": "bold",
      "backgroundColor": "#e2e8f0",
      "padding": 1.5
    },
    "note": {
      "fontSize": 9.5,
      "padding": 1.5
    }
  },
  "reportHeader": {
    "id": "rh",
    "height": 22,
    "components": [
      {
        "id": "title",
        "type": "text",
        "x": 0,
        "y": 0,
        "width": 124,
        "height": 9,
        "text": "Account notes",
        "styleName": "title"
      },
      {
        "id": "who",
        "type": "text",
        "x": 0,
        "y": 10,
        "width": 124,
        "height": 10,
        "text": "<b>{{ customer.name }}</b><br>Contact: {{ customer.contact }}",
        "allowHtml": true,
        "canGrow": true,
        "styleName": "muted",
        "style": {
          "fontSize": 10
        }
      }
    ]
  },
  "body": [
    {
      "kind": "dataRegion",
      "id": "tasks_region",
      "dataSource": "tasks",
      "detail": {
        "id": "task",
        "height": 24,
        "components": [
          {
            "id": "n1",
            "type": "text",
            "x": 0,
            "y": 1,
            "width": 124,
            "height": 6,
            "text": "{{ rowNumber }}. {{ row.title }}",
            "allowHtml": true,
            "style": {
              "fontSize": 11,
              "fontWeight": "bold"
            }
          },
          {
            "id": "n2",
            "type": "text",
            "x": 5,
            "y": 8,
            "width": 119,
            "height": 14,
            "text": "{{ row.note }}",
            "allowHtml": true,
            "canGrow": true,
            "styleName": "note"
          }
        ]
      }
    }
  ]
}

Data JSON

notes.data.json

{
  "customer": {
    "name": "Contoso Ltd",
    "contact": "Ada Lovelace"
  },
  "tasks": [
    {
      "title": "Renew <b>support plan</b>",
      "note": "Expires <font color=\"#b91c1c\">31 March</font>.<br>Call before the <u>end of the month</u>."
    },
    {
      "title": "Send <i>price list</i>",
      "note": "Include the <b>new</b> hardware range and mention the <s>old</s> discount of <b>15%</b>."
    },
    {
      "title": "Prepare <span style=\"color:#1d4ed8;font-weight:bold\">onboarding</span> call",
      "note": "Agenda:<br>1. Accounts<br>2. Training<br>3. Q&amp;A"
    }
  ]
}

Why it is safe

This is not an HTML renderer. The markup is parsed into styled text runs, and only a fixed list of tags is understood. Every other tag (<script>, <img>, <a>, <iframe> and so on) is removed together with its attributes, and only its text stays. The viewer creates text nodes and sets a few validated style properties; it never assigns HTML. Colors are validated, so url(...) or expression(...) values are dropped. Hostile markup in a template or in your data cannot add scripts, links, images or event handlers.

The same runs are used everywhere, so the formatting is identical on screen, in the PDF (a bold or italic font per run) and in Excel (rich text cells), and line wrapping measures each run with its own font.

Tips

• Text with allowHtml wraps and aligns like any other text, including justify.
• Use canGrow when <br> or long values make the text taller than its box.
• In the designer, tick Allow HTML tags in the text properties. The large text editor has buttons that wrap the selection in <b>, <i>, <u> and <s>.