RichText

The RichText component parses and displays HTML text.

Applicable scenarios:

The RichText component is suitable for loading and displaying segments of HTML strings in scenarios where extensive customization of the display effect is not required. The component supports only a limited set of universal attributes and events. For details, see Attributes and Events.

The underlying layer of the RichText component uses the Web component to provide basic capabilities, including but not limited to HTML page parsing and rendering. Therefore, the use of the RichText component needs to follow Web component constraints. Common typical constraints are as follows:

The default viewport size of a mobile device is 980 px, which can ensure that most web pages can be viewed correctly on mobile devices. If the width of the RichText component is lower than this value, the HTML inside the content may generate a scrollable page wrapped by the RichText component. If you want to replace the default value, add the following tags to content:
```
<meta name="viewport" content="width=device-width">
```
Inapplicable scenarios:

The RichText component is not suitable for application scenarios that require extensive customization of HTML string display effects. For example, the RichText component does not allow for changing the background color, font color, font size, or content by setting attributes and events. In this case, the Web component is recommended.

The RichText component consumes significant memory resources. When RichText components are repeatedly used in a List loop, issues such as stuttering and sluggish scrolling response may occur.

NOTE

This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

This component is not able to auto-adapt its width and height to the content. Therefore, you must set the layout when using this component.

This component is no longer updated and maintained. You are advised to use the Web component.

Child Components

Not supported

APIs

RichText(content:string | Resource)

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
content	string \| Resource ²⁰⁺	Yes	HTML string or local resource file.

Events

onStart

onStart(callback: () => void)

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	() => void	Yes	Callback triggered when a web page is loaded.

onComplete

onComplete(callback: () => void)

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	() => void	Yes	Callback triggered when a web page is loaded.

Attributes

Among the universal attributes, only the width, height, size, and layoutWeight attributes are supported.

Supported Tags

Name	Description	Example
<h1>--<h6>	Defines six levels of headings in the HTML document. <h1> defines the most important heading, and <h6> defines the least important heading.	<h1>This is an H1 heading</h1> <h2>This is an H2 heading</h2>
<p></p>	Defines a paragraph.	<p>This is a paragraph</p>
<br/>	Inserts a newline character.	<p>This is a paragraph<br/>This is a new paragraph</p>
<font/>	Defines the font style for the text contained within it, including the font face, size, and color. In the tag, the font size can be set only to a number ranging from 1 to 7, with the default value being 3. This tag is deprecated in HTML 4.01 and not supported in XHTML1.0 Strict DTD. Use the CSS font properties to style text instead. CSS syntax: <p style="font-size: 35px; font-family: verdana; color: rgb(24,78,228)">	<font size="3" face="arial" color="red">This is in red</font>
<hr/>	Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.	<p>This is a paragraph</p><hr/><p>This is a paragraph</p>
<image></image>	Defines an image.	<image src="resource://rawfile/icon.png"></image>
<div></div>	Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time.	<div style='color:#0000FF'><h3>This is the heading in a div element</h3></div>
<i></i>	Displays text in italic style.	<i>This is in italic style</i>
<u></u>	Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the <u> tag where it could be confused with a hyperlink.	<p><u>This is an underlined paragraph</u></p>
<style></style>	Used to embed CSS within an HTML document.	<style>h1{color:red;}p{color:blue;}</style>
style	Defines the inline style of an element. It is written inside the tag, requires quotation marks for distinction when used, and separates styles with semicolon(😉. For example, style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'.	<h1 style='color:blue;text-align:center'>This is a heading</h1><p style='color:green'>This is a paragraph</p>
<script></script>	Embeds or references a client-side script, such as JavaScript.	<script>document.write("Hello World!")</script>

Example

You can preview how this component looks on a real device, but not in DevEco Studio Previewer.

// xxx.ets
@Entry
@Component
struct RichTextExample {
  @State data: string = '<h1 style="text-align: center">h1 heading</h1>' +
  '<h1 style="text-align: center"><i>h1 italic</i></h1>' +
  '<h1 style="text-align: center"><u>h1 underlined</u></h1>' +
  '<h2 style="text-align: center">h2 heading</h2>' +
  '<h3 style="text-align: center">h3 heading</h3>' +
  '<p style="text-align: center">Regular paragraph</p><hr/>' +
  '<div style="width: 500px; height: 500px; border: 1px solid; margin: 0 auto">' +
  '<p style="font-size: 35px; text-align: center; font-weight: bold; color: rgb(24,78,228)">Font size: 35px; line height: 45px</p>' +
  '<p style="background-color: #e5e5e5; line-height: 45px; font-size: 35px; text-indent: 2em">' +
  '<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>';

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      RichText(this.data)
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .width(500)
        .height(500)
        .backgroundColor(0XBDDB69)
      RichText('layoutWeight(1)')
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92D6CC)
        .layoutWeight(1)
      RichText('layoutWeight(2)')
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92C48D)
        .layoutWeight(2)
    }
  }
}

richText

Loads local resource files.

Loads local resource files through $rawfile.

// xxx.ets
@Entry
@Component
struct RichTextComponent {

  build() {
    Column() {
      // Load a local resource file through $rawfile.
      RichText($rawfile("index.html"))
    }
  }
}

The following is an example of loading a link with the hash (#) route through the resources protocol in Webview.

When $rawfile is used to load a URL contains a number sign (#), the content following the number sign is treated as a fragment. To avoid this issue, you can use the resource://rawfile/ protocol prefix instead. If the URL contains a number sign (#), the content following the number sign is treated as an anchor (fragment).

// xxx.ets
@Entry
@Component
struct RichTextComponent {

  build() {
    Column() {
      // Load local resource files through the resource protocol.
      RichText("resource://rawfile/index.html#home")
    }
  }
}

Create an index.html file in src/main/resources/rawfile.

HTML file to be loaded:

<!-- index.html -->
<!DOCTYPE html>
<html>
    <body>
        <p>Hello World</p>
    </body>
</html>