1# RichText
2
3The **RichText** component parses and displays HTML text.
4
5- Applicable scenarios:
6
7  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](#attributes) and [Events](#events).
8
9  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:
10
11  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**:
12
13  ```html
14  <meta name="viewport" content="width=device-width">
15  ```
16
17- Inapplicable scenarios:
18
19  The **RichText** component is not suitable for scenarios where there is a need for extensive customization of the display effect of the HTML string. For example, the **RichText** component does not allow for changing the background color, font color, font size, or content by setting attributes and events. Under such scenarios, the [Web](../../apis-arkweb/ts-basic-components-web.md) component is recommended.
20
21  The **RichText** component can be memory-intensive. If it is reused in scenarios such as lists where multiple instances are created, slow scrolling or rendering may result. Under such scenarios, you may want to use the [RichEditor](../arkui-ts/ts-basic-components-richeditor.md#richeditor) component.
22
23>  **NOTE**
24>
25> - This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
26> - 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.
27
28
29## Child Components
30
31Not supported
32
33## APIs
34
35RichText(content:string)
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39**Parameters**
40
41| Name| Type| Mandatory | Description|
42| ------- | -------- | ------------- | -------- |
43| content | string | Yes  | String in HTML format.|
44
45
46## Events
47
48### onStart
49
50onStart(callback: () => void)
51
52Triggered when web page loading starts.
53
54**System capability**: SystemCapability.ArkUI.ArkUI.Full
55
56### onComplete
57
58onComplete(callback: () => void)
59
60Triggered when web page loading is completed.
61
62**System capability**: SystemCapability.ArkUI.ArkUI.Full
63
64## Attributes
65
66Among the [universal attributes](ts-universal-attributes-size.md), only the **width**, **height**, **size**, and **layoutWeight** attributes are supported.
67
68## Supported Tags
69
70| Name| Description| Example|
71| -------- | -------- | -------- |
72| \<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>|
73| \<p>\</p> | Defines a paragraph.| \<p>This is a paragraph\</p>|
74| \<br/> | Inserts a newline character.| \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
75| \<font/> | Defines the font style for the text contained within it, including the font face, size, and color. In the <font/> 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> |
76| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \<p>This is text\</p>\<hr/>\<p>This is text\</p> |
77| \<image>\</image> | Defines an image.| \<image src="resource://rawfile/icon.png">\</image> |
78| \<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> |
79| \<i>\</i> | Displays text in italic style.| \<i>This is in italic style\</i>|
80| \<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> |
81| \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
82| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, 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 text\</p> |
83| \<script>\</script> | Embeds or references a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
84
85## Example
86
87You can preview how this component looks on a real device, but not in DevEco Studio Previewer.
88
89```ts
90// xxx.ets
91@Entry
92@Component
93struct RichTextExample {
94  @State data: string = '<h1 style="text-align: center;">h1 heading</h1>' +
95  '<h1 style="text-align: center;"><i>h1 italic</i></h1>' +
96  '<h1 style="text-align: center;"><u>h1 underlined</u></h1>' +
97  '<h2 style="text-align: center;">h2 heading</h2>' +
98  '<h3 style="text-align: center;">h3 heading</h3>' +
99  '<p style="text-align: center;">Regular paragraph</p><hr/>' +
100  '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;">' +
101  '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">Font size: 35px; line height: 45px</p>' +
102  '<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' +
103  '<p>This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.</p>';
104
105  build() {
106    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
107      justifyContent: FlexAlign.Center }) {
108      RichText(this.data)
109        .onStart(() => {
110          console.info('RichText onStart');
111        })
112        .onComplete(() => {
113          console.info('RichText onComplete');
114        })
115        .width(500)
116        .height(500)
117        .backgroundColor(0XBDDB69)
118      RichText('layoutWeight(1)')
119        .onStart(() => {
120          console.info('RichText onStart');
121        })
122        .onComplete(() => {
123          console.info('RichText onComplete');
124        })
125        .size({ width: '100%', height: 110 })
126        .backgroundColor(0X92D6CC)
127        .layoutWeight(1)
128      RichText('layoutWeight(2)')
129        .onStart(() => {
130          console.info('RichText onStart');
131        })
132        .onComplete(() => {
133          console.info('RichText onComplete');
134        })
135        .size({ width: '100%', height: 110 })
136        .backgroundColor(0X92C48D)
137        .layoutWeight(2)
138    }
139  }
140}
141```
142
143 ![richText](figures/richText.png)
144