diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image1.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image1.png
new file mode 100644
index 0000000000000000000000000000000000000000..971b33355ee838054f24e2a7005c3ef3906a24d1
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image1.png differ
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
index 986ffbdd8aa4c79c45c7d0303d4e53b7237ceff8..6ac384c0e59e3c4a3340f7fb6137be138cb87f95 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
@@ -35,6 +35,8 @@
 
 ## 示例
 
+### 示例1
+
 ```html
 <!-- xxx.hml -->
 <div id="container">
@@ -75,7 +77,7 @@
 ```
 
 ```js
-/* xxx.js */
+// xxx.js
 export default {
 	data: {
         visible: true,
@@ -99,4 +101,42 @@ export default {
 }
 ```
 
-![zh-cn-attributes](figures/zh-cn-attributes.gif)
\ No newline at end of file
+![zh-cn-attributes](figures/zh-cn-attributes.gif)
+
+### 示例2
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+    <div>
+        <text class="text1" dir='rtl' >hello world</text>
+    </div>
+    <div>
+        <text class="text2" dir='ltr' >hello world</text>
+    </div>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+.text1{
+    width: 90%;
+    height: 100px;
+    background-color: aqua;
+}
+.text2{
+    width: 90%;
+    height: 100px;
+    background-color: blue;
+}
+```
+
+![zh-cn_image1](figures/zh-cn_image1.PNG)
\ No newline at end of file