1# Using the Mirroring Capability 2 3## Overview 4 5To accommodate diverse user reading habits, ArkUI provides a mirroring capability that can reverse the display content along the x-axis, switching the layout from left-to-right to right-to-left. 6 7| Before Mirroring | After Mirroring | 8| ----------- | ----------------------------------- | 9||| 10 11The mirroring capability is activated on a component under either of these conditions: 12 131. The component's **direction** attribute is set to **Direction.Rtl**. 14 152. The component's **direction** attribute is set to **Direction.Auto**, and the system language in use (such as Uyghur) is read from right to left. 16 17## Basic Concepts 18 19- LTR: left-to-right reading direction 20- RTL: right-to-Left reading direction 21 22## Constraints 23 24ArkUI has default mirroring support for the following capabilities: 25 26| Category | Name | 27| -------- | ------------------------------------------------------------ | 28| Basic components| [Swiper](../reference/apis-arkui/arkui-ts/ts-container-swiper.md), [Tab](../reference/apis-arkui/arkui-ts/ts-container-tabs.md), [TabContent](../reference/apis-arkui/arkui-ts/ts-container-tabcontent.md), [List](../reference/apis-arkui/arkui-ts/ts-container-list.md), [Progress](../reference/apis-arkui/arkui-ts/ts-basic-components-progress.md), [CalendarPicker](../reference/apis-arkui/arkui-ts/ts-basic-components-calendarpicker.md), [CalendarPickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-calendarpicker-dialog.md), [TextPicker](../reference/apis-arkui/arkui-ts/ts-basic-components-textpicker.md), [TextPickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-textpicker-dialog.md), [DatePicker](../reference/apis-arkui/arkui-ts/ts-basic-components-datepicker.md), [DatePickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-datepicker-dialog.md), [Grid](../reference/apis-arkui/arkui-ts/ts-container-grid.md), [WaterFlow](../reference/apis-arkui/arkui-ts/ts-container-waterflow.md), [Scroll](../reference/apis-arkui/arkui-ts/ts-container-scroll.md), [ScrollBar](../reference/apis-arkui/arkui-ts/ts-basic-components-scrollbar.md), [AlphabetIndexer](../reference/apis-arkui/arkui-ts/ts-container-alphabet-indexer.md), [Stepper](../reference/apis-arkui/arkui-ts/ts-basic-components-stepper.md), [SideBarContainer](../reference/apis-arkui/arkui-ts/ts-container-sidebarcontainer.md), [Navigation](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md), [NavDestination](../reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md), [Rating](../reference/apis-arkui/arkui-ts/ts-basic-components-rating.md), [Slider](../reference/apis-arkui/arkui-ts/ts-basic-components-slider.md), [Toggle](../reference/apis-arkui/arkui-ts/ts-basic-components-toggle.md), [Badge](../reference/apis-arkui/arkui-ts/ts-container-badge.md), [Counter](../reference/apis-arkui/arkui-ts/ts-container-counter.md), [Chip](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Chip.md), [SegmentButton](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SegmentButton.md), [bindMenu](../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindmenu), [bindContextMenu](../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindcontextmenu8), [TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md), [TextArea](../reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md), [Search](../reference/apis-arkui/arkui-ts/ts-basic-components-search.md), [Stack](../reference/apis-arkui/arkui-ts/ts-container-stack.md), [GridRow](../reference/apis-arkui/arkui-ts/ts-container-gridrow.md), [Text](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md), [Select](../reference/apis-arkui/arkui-ts/ts-basic-components-select.md), [Marquee](../reference/apis-arkui/arkui-ts/ts-basic-components-marquee.md), [Row](../reference/apis-arkui/arkui-ts/ts-container-row.md), [Column](../reference/apis-arkui/arkui-ts/ts-container-column.md), [Flex](../reference/apis-arkui/arkui-ts/ts-container-flex.md), [RelativeContainer](../reference/apis-arkui/arkui-ts/ts-container-relativecontainer.md), [ListItemGroup](../reference/apis-arkui/arkui-ts/ts-container-listitemgroup.md)| 29| Advanced components| [SelectionMenu](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SelectionMenu.md) , [TreeView](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-TreeView.md) , [Filter](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Filter.md), [SplitLayout](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SplitLayout.md), [ToolBar](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ToolBar.md), [ComposeListItem](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ComposeListItem.md), [EditableTitleBar](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [ProgressButton](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ProgressButton.md), [SubHeader](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SubHeader.md) , [Popup](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Popup.md), [Dialog](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Dialog.md), [SwipeRefresher](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SwipeRefresher.md)| 30| Universal attributes| [position](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#position), [markAnchor](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#markanchor), [offset](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#offset), [alignRules](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#alignrules9), [borderWidth](../reference/apis-arkui/arkui-ts/ts-universal-attributes-border.md#borderwidth), [borderColor](../reference/apis-arkui/arkui-ts/ts-universal-attributes-border.md#bordercolor), [borderRadius](../reference/apis-arkui/arkui-ts/ts-universal-attributes-border.md#borderradius), [padding](../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md#padding), [margin](../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md#margin)| 31| APIs | [AlertDialog](../reference/apis-arkui/arkui-ts/ts-methods-alert-dialog-box.md), [ActionSheet](../reference/apis-arkui/arkui-ts/ts-methods-action-sheet.md), [promptAction.showDialog](../reference/apis-arkui/js-apis-promptAction.md#promptactionshowdialog), [promptAction.showToast](../reference/apis-arkui/js-apis-promptAction.md#promptactionshowtoast)| 32 33However, adaptation is still required in the following three scenarios: 34 351. For layout and border settings, use the generalized direction terms **start** and **end** as parameter types instead of absolute terms such as **left**, **right**, **x**, and **y**, to accommodate mirroring. 36 372. The **Canvas** component offers limited support for mirroring in text drawing only. 38 393. The **XComponent** component does not support mirroring capabilities. 40 41## Layout and Border Settings 42 43To adapt to mirroring capabilities, update the following universal attributes with new parameter types: 44 45Position settings: [position](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#position), [markAnchor](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#markanchor), [offset](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#offset), [alignRules](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#alignrules12) 46 47Border settings: [borderWidth](../reference/apis-arkui/arkui-ts/ts-universal-attributes-border.md#borderwidth), [borderColor](../reference/apis-arkui/arkui-ts/ts-universal-attributes-border.md#bordercolor), [borderRadius](../reference/apis-arkui/arkui-ts/ts-universal-attributes-border.md#borderradius) 48 49Size settings: [padding](../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md#padding), [margin](../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md#margin) 50 51For example, with **position**, change the absolute directional descriptions of **x** and **y** to the new parameter types of **start** and **end**. 52 53```typeScript 54import { LengthMetrics } from '@kit.ArkUI'; 55 56@Entry 57@Component 58struct Index1 { 59 build() { 60 Stack({ alignContent: Alignment.TopStart }) { 61 Stack({ alignContent: Alignment.TopStart }) { 62 Column() 63 .width(100) 64 .height(100) 65 .backgroundColor(Color.Red) 66 .position({ start: LengthMetrics.px(200), top: LengthMetrics.px(200) }) // Use the new LocalizedEdges parameter type added since API version 12 for supporting both LTR and RTL. 67 // It is equivalent to .position({ x: '200px', y: '200px' }) when only LTR is supported. 68 69 }.backgroundColor(Color.Blue) 70 }.width("100%").height("100%").border({ color: '#880606' }) 71 } 72} 73``` 74 75## Custom Drawing with the Canvas Component 76 77The drawings and coordinates of the **Canvas** component do not support mirroring. Content drawn on it does not automatically mirror when the system language changes. 78 79[CanvasRenderingContext2D](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md) supports mirroring for text rendering, which should be used with the **Canvas** component's **direction** attribute and the **direction** attribute of **CanvasRenderingContext2D**. The specific specifications are as follows: 80 811. Priority: The **direction** attribute of **CanvasRenderingContext2D** takes precedence over the **Canvas** component's **direction** attribute, which in turn follows the system language's horizontal display direction. 822. The **Canvas** component does not automatically mirror with system language changes; applications must listen for system language changes and redraw the content on their own. 833. Only symbols follow the direction setting during text drawing with **CanvasRenderingContext2D**; Latin characters and numbers do not. 84 85```typeScript 86import { BusinessError, commonEventManager } from '@kit.BasicServicesKit'; 87 88@Entry 89@Component 90struct Index { 91 @State message: string = 'Hello world'; 92 private settings: RenderingContextSettings = new RenderingContextSettings(true) 93 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 94 95 aboutToAppear(): void { 96 // Listen for the system language changes. 97 let subscriber: commonEventManager.CommonEventSubscriber | null = null; 98 let subscribeInfo2: commonEventManager.CommonEventSubscribeInfo = { 99 events: ["usual.event.LOCALE_CHANGED"], 100 } 101 commonEventManager.createSubscriber(subscribeInfo2, (err: BusinessError, data: commonEventManager.CommonEventSubscriber) => { 102 if (err) { 103 console.error(`Failed to create subscriber. Code is ${err.code}, message is ${err.message}`); 104 return; 105 } 106 107 subscriber = data; 108 if (subscriber !== null) { 109 commonEventManager.subscribe(subscriber, (err: BusinessError, data: commonEventManager.CommonEventData) => { 110 if (err) { 111 console.error(`Failed to subscribe to the language and region status change event. Code: ${err.code}; message: ${err.message}`); 112 return; 113 } 114 console.info('Successfully subscribed to the language and region status change event: data: ' + JSON.stringify(data)) 115 // After detecting the language switch, redraw the content on the Canvas component. 116 this.drawText(); 117 }) 118 } else { 119 console.error(`MayTest Need create subscriber`); 120 } 121 }) 122 } 123 124 drawText(): void { 125 console.error("MayTest drawText") 126 this.context.reset() 127 this.context.direction = "inherit" 128 this.context.font = '30px sans-serif' 129 this.context.fillText("ab%123&*@", 50, 50) 130 } 131 132 build() { 133 Row() { 134 Canvas(this.context) 135 .direction(Direction.Auto) 136 .width("100%") 137 .height("100%") 138 .onReady(() =>{ 139 this.drawText() 140 }) 141 .backgroundColor(Color.Pink) 142 } 143 .height('100%') 144 } 145 146} 147``` 148 149| Before Mirroring | After Mirroring | 150| ----------- | ----------------------------------- | 151||| 152
