# Rich Text

Learn how to use the RichText report item in ActiveReportsJS.

## Content

A `Rich Text` report item displays static or dynamic mixed-format text in a report. You can use it to create mail-merge reports, labels or display the pre-formatted content from a data source.

### Adding a Rich Text

You can add a `Rich Text` into a report by either double-click the corresponding item in the [toolbox](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#toolbox) or drag-and-drop it to a report page area or other container, such as a [Banded List Section](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/BandedList).

### General Rich Text Configuration

The general configuration includes [Base Report Item properties](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#base-properties), [Common Style Properties](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties), [subset of Text Properties](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) and [Visibility](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#visibility)

### Content

The `Markup Type` property sets the language of mixed-format content. Currently, the only supported language is `HTML`. You can use the following HTML tags in the `Value` property.

* [`<p>`](https://www.w3schools.com/tags/tag_p.asp) \- a paragraph
* [`<span>`](https://www.w3schools.com/tags/tag_span.asp) \- a generic inline container
* [`<h1>` - `<h6>`](https://www.w3schools.com/tags/tag_hn.asp) \- a section heading
* [`<ul>`](https://www.w3schools.com/tags/tag_ul.asp) \- an unordered list
* [`<ol>`](https://www.w3schools.com/tags/tag_ol.asp) \- an ordered list
* [`<li>`](https://www.w3schools.com/tags/tag_li.asp) \- an item of the ordered or unordered list
* [`<a>`](https://www.w3schools.com/tags/tag_a.asp) \- a hyperlink with the [href attribute](https://www.w3schools.com/tags/att_a_href.asp)
* [`<strong>`](https://www.w3schools.com/tags/tag_strong.asp) or [`<b>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) \- a bold text
* [`<em>`](https://www.w3schools.com/tags/tag_em.asp) or [`<i>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) \- an italic text
* [`<sup>`](https://www.w3schools.com/tags/tag_sup.asp) \- a superscript text
* [`<sub>`](https://www.w3schools.com/tags/tag_sub.asp) \- a subscript text
* [`<img>`](https://www.w3schools.com/tags/tag_img.asp) \- an image

The following CSS styles are supported for those above tags.

* [font-family](https://www.w3schools.com/cssref/pr_font_font-family.asp) \- overrides the `Font Family` property of the [rich text report item](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)
* [font-size](https://www.w3schools.com/cssref/pr_font_font-size.asp) \- overrides the `Font Size` property of the [rich text report item](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)
* [font-style](https://www.w3schools.com/cssref/pr_font_font-style.asp) \- overrides the `Font Style` property of the [rich text report item](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)
* [font-weight](https://www.w3schools.com/cssref/pr_font_weight.asp) \- overrides the `Font Weight` property of the [rich text report item](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)
* [color](https://www.w3schools.com/cssref/pr_text_color.asp) \- overrides the `Color` property of the [rich text report item](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties)
* [background-color](https://www.w3schools.com/cssref/pr_background-color.asp) \- overrides the `Background Color` property of the [rich text report item](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties)
* [background-image](https://www.w3schools.com/cssref/pr_background-image.asp) \- overrides the `Background Image` property of the [rich text report item](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties)
* [text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) \- works for the supported [block-level](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) elements only
* [text-indent](https://www.w3schools.com/cssref/pr_text_text-indent.asp) \- works for the supported [block-level elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) only
* [text-decoration](https://www.w3schools.com/cssref/pr_text_text-decoration.asp) \- the `underline` and `line-through` values are supported.
* [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) - `pt`, `pc`, `in`, `mm`, `cm`, `em` [length units](https://developer.mozilla.org/en-US/docs/Web/CSS/length), `normal` keyword, and [percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage), and [number](https://developer.mozilla.org/en-US/docs/Web/CSS/number) values are supported.
* [list-style-type](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) \- works for `<ul>` and `<ol>` elements only
* [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height) \- works for `<img>` elements only

The `img` element supports the [src](https://www.w3schools.com/tags/att_img_src.asp) attribute that you can set to the URL of an external image. If you want to display an [embedded image](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/report-configuration/layout-properties#embedded-images) or image data from a data set, then you can use the following `data-*` attributes for the `img` tag:

* `data-source` attribute accepts the `Embedded` and `Database` values.
* `data-value` attribute accepts the name of an embedded image or a data set field containing image data.
* `data-mime-type` attribute accepts the mime type of an image. Supported types are `image/jpeg`, `image/png` and `image/svg+xml`.

The `Value` [expression](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression) sets the mixed-format content using those above tags and styles. Using the [interpolation syntax](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Expressions) you can set the dynamic content for a rich text, for example:

```html
<p>Thank you for your purchase {name}!</p>
<p>Your order number is: #{orderID}</p>
<p>If you require any changes to your order or delivery address you must <a href="https://tradecompany/changeorder/{orderID}">contact us</a>
<span style="color:red;font-weight:bold"> as soon as possible</span> and it might not be possible if your order has already gone through to fulfilment.</p>
```

At runtime, a rich text with this `Value` property generates the output like this:

![image](https://cdn.mescius.io/document-site-files/images/47f99832-236c-4f21-ab3d-46658c668072/image.47016c.png)

If the `Value` property is the [bound field reference](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Expressions/references#data-set-fields) and a field's value is the `HTML` content, then the supported tags and styles will be recognized and rendered accordingly.

### Layout

* The `Keep together` flag ensures that a rich text always appears on a single page if it fits.
* The `Can Grow` flag indicates whether a rich text can increase its height to accommodate growing content.