1# Styled String (System API)
2
3Styled strings are string objects that facilitate the flexible use of text styles. They can be bound to the **Text** component using the [setStyledString](./ts-basic-components-text.md#setstyledstring12) API in **TextController**, and to the **RichEditor** component using the [setStyledString](ts-basic-components-richeditor.md#setstyledstring12) API in **RichEditorStyledStringController**.
4
5>  **NOTE**
6>
7>  This component is supported since API version 13. Updates will be marked with a superscript to indicate their earliest API version.
8>
9>  This topic describes only system APIs provided by the module. For details about its public APIs, see [Styled String](ts-universal-styled-string.md).
10
11## StyledString
12
13### marshalling
14
15marshalling(styledString: StyledString): ArrayBuffer
16
17Serializes a styled string.
18
19**Atomic service API**: This API can be used in atomic services since API version 13.
20
21**System capability**: SystemCapability.ArkUI.ArkUI.Full
22
23**Parameters**
24
25| Name| Type| Mandatory| Description|
26| ----- | ----- | ---- | ---- |
27| styledString | [StyledString](ts-universal-styled-string.md) | Yes | Styled string to serialize.|
28
29**Return value**
30
31| Type             |Description      |
32| ------- | --------------------------------- |
33| ArrayBuffer | Buffer information after serialization.<br>**NOTE**<br>Currently, text and images are supported.|
34
35
36### unmarshalling
37
38unmarshalling(buffer: ArrayBuffer): Promise\<StyledString>
39
40Deserializes a buffer to obtain a styled string.
41
42**Atomic service API**: This API can be used in atomic services since API version 13.
43
44**System capability**: SystemCapability.ArkUI.ArkUI.Full
45
46**Parameters**
47
48| Name| Type| Mandatory| Description|
49| ----- | ----- | ---- | ---- |
50| buffer | ArrayBuffer | Yes | Data serialized from a styled string.|
51
52**Return value**
53
54| Type                            | Description                 |
55| -------------------------------- | --------------------- |
56| Promise\<[StyledString](ts-universal-styled-string.md)> |Promise used to return the result.|
57
58## Example
59
60This example demonstrates the serialization and deserialization of styled strings using the **marshalling** and **unmarshalling** properties.
61
62```ts
63// xxx.ets
64import { LengthMetrics } from '@kit.ArkUI'
65
66@Entry
67@Component
68struct Index {
69  @State textTitle: string = "Serialization and deserialization APIs"
70  @State textResult: string = "Hello world"
71  @State serializeStr: string = "Serialization"
72  @State flag: boolean = false
73  private textAreaController: TextAreaController = new TextAreaController()
74  private buff: Uint8Array = new Uint8Array()
75
76  fontStyle: TextStyle = new TextStyle({
77    fontWeight: FontWeight.Lighter,
78    fontFamily: 'HarmonyOS Sans',
79    fontColor: Color.Green,
80    fontSize: LengthMetrics.vp(30),
81    fontStyle: FontStyle.Normal
82  })
83  // Create a styled string object.
84  styledString: StyledString = new StyledString("Hello world",
85    [{ start: 0, length: 11, styledKey: StyledStringKey.FONT, styledValue: this.fontStyle }]);
86
87  @Builder
88  controllableBuild() {
89    Column(){
90      TextArea({
91        text: this.textResult,
92        controller: this.textAreaController
93      }).width('95%').height('40%').enableKeyboardOnFocus(false)
94
95      Button(this.serializeStr)
96        .margin(5)
97        .onClick(async ()=>{
98          this.flag = !this.flag
99          if (!this.flag) {
100            console.info("Debug: Deserialization")
101            let styles: StyledString = await StyledString.unmarshalling(this.buff.buffer)
102            this.textTitle = "After calling decodeTlv, the result of deserialization is:"
103            if (styles == undefined) {
104              console.error("Debug: Failed to obtain the styled string.")
105              return
106            }
107            this.textResult =  styles.getString()
108            console.info("Debug: this.textResult = " + this.textResult)
109            let stylesArr = styles.getStyles(0, this.textResult.length, StyledStringKey.FONT)
110            console.info("Debug: stylesArr.length = " + stylesArr.length)
111            for (let i = 0; i < stylesArr.length; ++i) {
112              console.info("Debug: style.start = " + stylesArr[i].start)
113              console.info("Debug: style.length = " + stylesArr[i].length)
114              console.info("Debug: style.styledKey = " + stylesArr[i].styledKey)
115              let font = stylesArr[i].styledValue as TextStyle
116              console.info("Debug: style.fontColor = " + font.fontColor)
117              console.info("Debug: style.fontSize = " + font.fontSize)
118              console.info("Debug: style.fontFamily = " + font.fontFamily)
119              console.info("Debug: style.fontStyle = " + font.fontStyle)
120            }
121            let subStr = styles.subStyledString(0, 2)
122            console.info("Debug: subStr = " + subStr.getString())
123            this.serializeStr = "Marshalling"
124          } else {
125            console.info("Debug: Serialization")
126            let resultBuffer = StyledString.marshalling(this.styledString)
127            this.buff = new Uint8Array(resultBuffer)
128            this.textTitle = "After calling encodeTlv, the result of serialization is:"
129            this.textResult = this.buff.toString()
130            console.info("Debug: buff = " + this.buff.toString())
131            this.serializeStr = "Deserialization"
132          }
133        })
134    }.margin(10)
135  }
136
137  build() {
138    Column() {
139      Blank().margin(30)
140      Text(this.textTitle)
141      this.controllableBuild()
142    }
143  }
144}
145```
146