# Design Considerations for the HTML Rendering

The HTML rendering extension renders a report into **HTML5** or **MHTML** format.

## HTML Output

The HTML5 rendering extension is based on the Image rendering extension, with some differences. For information common to both output formats, see [Image Rendering Design Considerations](https://www.telerik.com/products/reporting/documentation/styling/rendering-and-paging/design-considerations-for-report-rendering/image-rendering-design-considerations). This topic describes features that are specific to the HTML output format.

### Rendering

* All report items are rendered as separate absolute positioned `<div>` elements.
* The TextBox with rotated text is rendered as an image and displayed in `<img>` element inside the `<div>` of the report item. This is necessary as the browsers do not support rotated text.
* All output is generated with **UTF8 encoding.**
* The strings are measured using [GDI+](https://learn.microsoft.com/en-us/windows/win32/gdiplus/-gdiplus-gdi-start) on Windows and [Skia](https://skia.org/) on non-Windows systems. This can lead to differences between Image rendering and previewing in web browsers. Additionally, justified text may require to be adjusted due to the difference in the measurement algorithms.
* In Interactive preview the Table/Crosstab/List item is rendered on a **single page without page breaks**.
* Lines thinner than `1px` may not be rendered consistently.
* By default the Graph, Map, and Barcode items are rendered as `SVG` elements. In older browsers without support for SVG, the items are rendered automatically as [Bitmap](https://en.wikipedia.org/wiki/Bitmap) objects displayed in [IMG elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img). The usage of SVG elements can be explicitly controlled through the [HTML5](https://www.telerik.com/products/reporting/documentation/doc-output/configure-the-export-formats/html5-device-information-settings) and [HTML5Interactive](https://www.telerik.com/products/reporting/documentation/doc-output/configure-the-export-formats/html5interactive-device-information-settings) device information settings. More details on how to apply the settings are available in the [Device Information Settings](https://www.telerik.com/products/reporting/documentation/doc-output/configure-the-export-formats/overview) overview.

> note If the subreport report `BackgroundColor` is not `Transparent` (by default is White), subreport item borders may not be rendered. This can be avoided by setting the subreport report `BackgroundColor` to `Transparent`.

### Accessibility

To exclude a report item and its descendants from the HTML5 accessibility tree, set its [AccessibleRole](https://www.telerik.com/products/reporting/documentation/api/telerik.reporting.reportitembase#Telerik_Reporting_ReportItemBase_AccessibleRole) property to `Ignored`. The value is case-insensitive. You can also use the [AccessibleRoles](https://www.telerik.com/products/reporting/documentation/api/telerik.reporting.accessibleroles) reporting constant in an expression: `=AccessibleRoles.Ignored`.

When HTML5 accessibility is enabled, ignored items remain visible in the report and in the DOM. Telerik Reporting adds `aria-hidden="true"` to every element in the ignored subtree, so screen readers skip the content. This applies to both HTML5 and `HTML5Interactive` output.

### Pagination

Page size is calculated based on whether the report is rendered for **Interactive view** or **Print Preview**.

### Interactivity

All [Actions](https://www.telerik.com/products/reporting/documentation/interactivity/actions/overview) are supported.

The legacy ASP.NET viewer renders tooltips on SVG elements using the `<title>` attribute and browsers support it in a different manner, that's why the tooltips on SVG elements are rendered as a single line.

### Browsers and limitations

* Internet Explorer Quirks Mode is not supported, since it is based on Internet Explorer 5.5. For more details check the [Defining document compatibility](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/cc288325\(v=vs.85\)) Microsoft article.
* Compatibility View for Internet Explorer is not supported, since it is based on Internet Explorer 7. For more details check the [Defining document compatibility](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/cc288325\(v=vs.85\)) Microsoft article.
* Internet Explorer has a limitation for the number of HTML elements that can be rendered on a single page. This limitation may prevent the displaying of reports with large amounts of items rendered without page breaks. Displaying the report in "Print Preview" will page the content.
* Depending on the browser's layout engine fonts can be measured differently, which may lead to displaying clipped text in reports. The fonts used in the reports should be considered with the targeted browsers.

## MHTML Output

### Rendering

Reports can be output as MHTML (Web archive or "MIME Encapsulation of Aggregate HTML Documents") standard. MHTML is used for including resources in the same file as the HTML code. This is particularly useful when sending email because all resources, such as image and sound files, are included in a single file.

The following rendering specifics apply to MHTML:

* Styles specified in report item properties are injected into the `HEAD` tag for use in the corresponding HTML elements.
* The size of report items is the same as in design-time and the browser is responsible for sizing them.

### Interactivity

* URL actions on report items are rendered as hyperlinks in HTML. When you click the hyperlink, the default Web browser opens and navigates to the specified URL.
* Table of contents interactivity (navigational links to report items) is not supported.

## See Also

* [Export Formats](https://www.telerik.com/products/reporting/documentation/doc-output/export-formats)
* [Telerik Reporting Configuration Section](https://www.telerik.com/products/reporting/documentation/doc-output/configure-the-report-engine/overview)
* [Device Information Settings](https://www.telerik.com/products/reporting/documentation/doc-output/configure-the-export-formats/overview)
