--- url: /foundations/layout/bidirectionality-rtl.md description: Design products that adapt to languages that read right-to-left (RTL) --- # Bidirectionality & RTL Design products that adapt to languages that read right-to-left (RTL) ![Bidirectionality & RTL](/assets/acd43809-mrodw83s-understanding-layout.Fo-wBEgJ.webp) [Over 2 billion people](https://www.w3.org/International/questions/qa-scripts.en.html) read and write in right-to-left (RTL) languages like Arabic, Hebrew, Farsi, and Urdu. Layouts should support both left-to-right (LTR) and RTL languages through mirroring and other best practices to ensure content is easy for global audiences to understand and navigate. Consider the holistic experience including [global writing](../content-design/global-writing/overview.md), localizing voice and [design principles for culturally appropriate icons](../../styles/icons/designing-icons.md#5f0e344b-17f8-4b91-b0e4-45671b9900f4). Material's components are built to support RTL, such as naming elements and tokens as "leading" and "trailing." However, extra configuration may be needed to achieve specific RTL situations. ## Mirroring When a layout is changed from LTR to RTL (or vice-versa), or flipped horizontally, it’s often called mirroring. UI elements and text that typically appear on the left in LTR aligns to the right. Reading flow starts from the top right corner, instead of the top left. Not all elements mirror with RTL languages. For example, graphs and charts maintain a LTR directionality for Persian and Urdu. ![Layout in LTR and mirrored for RTL language.](/assets/15868a58-msftouf7-01.Bie_ZBBV.webp) A mirrored layout in an RTL language reverses the alignment and ordering of elements ## Text rendering Correct text rendering is foundational for a great user experience, and it’s critical for readability and usability. Text rendering has two parts: 1. Alignment: How the edges of the text box are placed alongside other elements 2. Directionality: How text and other elements flow within a text box, like left-to-right or right-to-left In RTL languages, text is usually right-aligned, and elements flow from right-to-left. Common issues with RTL language rendering are text entry, cursor position, punctuation, phone numbers, and URLs. Improperly rendering text in RTL languages can create cognitive overload and negatively impact user sentiment and trust. ::: danger Don't ![Text field incorrectly displaying the word order of an email address and cursor placement.](/assets/0d61f20d-msftq4kx-02-dont.D3OCUYYN.webp) Don't reverse the order of the email username and domain (@google.com). The domain should always be to the right of the username. Usernames can still be written RTL, with the cursor moving to the left. Note: This example isn’t translated to illustrate a common issue with text rendering. ::: ::: danger Don't ![Dialog window incorrectly displaying word order decreasing readability.](/assets/96aa6058-msftrw89-03-dont.C-bTQtcd.webp) Don’t apply LTR directionality to RTL content, because it may scramble word order. To ensure readability across all languages, the content should have both RTL alignment and directionality. Note: This example isn’t translated to illustrate a common issue with text rendering. ::: ## Icons & symbols In RTL languages, directional UI icons, like back and forward, should be mirrored. However, in Hebrew, timelines and media controls on a page should retain left-to-right directionality. The meaning of icons and symbols can vary significantly across cultures. For additional guidance, refer to [design principles for icons](../../styles/icons/designing-icons.md#5f0e344b-17f8-4b91-b0e4-45671b9900f4). ![Back and forward icons in LTR and RTL.](/assets/633f7cf9-msftt2b2-04.CIbzuqGk.webp) Back and foward icons are mirrored in RTL ![Send and question mark icons in LTR and RTL.](/assets/4e310741-msftts4z-05.ohRi3-5t.webp) Send buttons are mirrored in RTL. Help icons are mirrored in some RTL languages, like Urdu and Persian. ## Time Linear representations of time are often mirrored in RTL language experiences. Linear progress indicators should move from right to left for most RTL languages, except Hebrew where it should remain LTR. Circular representations of time remain the same. ![RTL linear progress indicator filling from right to left and circular progress indicator filling clockwise.](/assets/dff3830c-msftutz2-06.rdIkjLb1.webp) 1. RTL linear progress indicator starts to fill progress from the right  2. Circular progress indicators move clockwise ### Media players Media controls for video or audio players are always LTR. ![Media player with control and progress in LTR and all other content is RTL.](/assets/dd642a50-msfu1nlp-07.Dg0-KbbI.webp) In Urdu, controls and progress for media and a podcast title are shown in LTR, while all other content is RTL ### Clocks For RTL languages, the directionality of time remains LTR, and clocks still turn clockwise. However, the AM/PM symbols for 12h clocks should be placed to the left. The 24-hour clock is often used in countries where the primary language isn’t English. Clock icons, circular refresh icons, and progress indicators with arrows pointing clockwise shouldn’t be mirrored. ![24-hour clock in RTL.](/assets/38975f87-msfu311j-08.H69LhAql.webp) 24-hour clocks in RTL move clockwise, but mirror elements such as buttons ![12-hour clock in RTL.](/assets/1ab9a581-msfu4524-09.lHzcCxzz.webp) 12-hour clocks in RTL move clockwise, but mirror UI elements such as AM/PM and buttons ## Canonical layout examples ### List-detail The [list-detail layout](canonical-examples/list-detail.md): * Is a single-pane at compact [breakpoints](breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes)."), switching between list and detail views * Divides the window into two side-by-side panes on large screens * Is mirrored in RTL ![RTL list layout on mobile.](/assets/d31b5fcb-msfu5hg5-10.Ccl2BrkZ.webp) List-detail mirrored for RTL, where text and other elements are aligned to the right and flow from right to left ### Feed Use a [feed layout](canonical-examples/feed.md) to arrange content elements like cards in a configurable grid for quick, convenient viewing of a large amount of content. The feed layout is mirrored in RTL. ![RTL feed layout.](/assets/e19b94e4-msfu84eb-11.Bwryno9_.webp) Feed layout mirrored for RTL, where the order of text, grid, and other elements align to the right and flow from right to left ### Supporting pane Use the [supporting pane layout](canonical-examples/supporting-pane.md) to organize content into primary and secondary display areas. The supporting pane layout is mirrored in RTL. ![RTL supporting pane in an RTL language.](/assets/ce4890d8-msfu93jo-12.BTiLtBEg.webp) Supporting pane to the left of the primary content. Text and other elements within the pane are aligned to the right and flow from right to left. ## Component examples ### Badges Change the position and alignment of [badges](../../components/badges/overview.md) for RTL languages. ![Small badge on the top left of a folder icon.](/assets/f14739fb-msfuadi8-13.BuKaoFir.webp) Small badge appears on the top left of the icon ![Large badge on the top left of an image icon.](/assets/ba39b418-msfub9sg-14.AKSXfyqP.webp) Large badge appears on the top left of the icon ### Toolbars [Toolbars](../../components/toolbars/overview.md) provide actions related to the current page. For RTL languages, mirror the order of the tools. ![RTL floating toolbar.](/assets/06606f7e-msfucmb1-15.DHDp0_uz.webp) Mirrored floating toolbar, where the FAB appears on the left ### App bars [App bars](../../components/app-bars/overview.md) are placed at the top of the screen to help people navigate through a product: * Mirror an app bar’s layout in RTL * Flip appropriate icons, such as arrows ![4 app bars in RTL.](/assets/c7fad5dd-msfue0zv-16.BoUvC9rp.webp) 1. RTL center-aligned, small app bars  2. RTL medium, flexible app bar  3. RTL large, flexible app bar ### Navigation rail The [navigation rail](../../components/navigation-rail/overview.md) is placed on the leading edge of the screen, on the left side for LTR, and on the right for RTL. ![Nav rail on the right side for an RTL language, and left side for LTR.](/assets/4ce3bc89-msfufptj-18._1iOcyd9.webp) Based on the language, a navigation rail is set on a screen’s leading edge: * Right side for RTL languages * Left side for LTR languages ### Expanded navigation rail Expanded navigation rails that open from the side are always placed on the leading edge of the screen, on the left for LTR languages, and on the right for RTL. ![RTL expanded navigation rail, including mirrored icons.](/assets/ba8378b3-msfugr2m-17.iRPqvS5H.webp) RTL expanded navigation rails open from the leading edge and should include mirrored icons ### Text fields Icons in [text fields](../../components/text-fields/guidelines.md#5c8a5f07-b1a5-455f-bf76-7ff0d724f6b0) are optional. Leading and trailing icons change their position based on LTR or RTL contexts. ![Text fields in RTL with leading and trailing icons.](/assets/4af1b3c1-msfuhyps-19.--DScQNM.webp) Icons, symbols, and label text for RTL:  1. Icon signifier  2. Valid or error icon  3. Clear icon  4. Voice input icon  5. Dropdown icon  6. Image ### Chips The leading icon of input chips can be an icon, logo, or circular image. The trailing icon is always aligned to the end side of the container. It’s placed on the right for LTR and on the left for RTL. ![Filter chips with checkmark icons in RTL layout.](/assets/41fcf101-msfuiwrg-20.BnJryTSH.webp) Filter chips shown in an RTL layout. Note: This example is not translated to help illustrate mirroring. ## Swipe gestures Gestures are the ways people interact with UI elements using touch or body motion. People can navigate horizontally between peer views like tabs and to complete actions. RTL swiping and gestures should mirror their counterparts in LTR. If a product includes a delete icon revealed when swiped from the right for LTR languages, the same should be possible on the left for RTL languages. ![RTL list layout with swipe gesture revealing additional actions.](/assets/d15c7bc4-msfumeds-21.DNEV25ny.webp) Swiping reveals additional action in RTL list layout On Android, [predictive back](https://github.com/material-components/material-components-android/blob/master/docs/foundations/PredictiveBack.md) allows people to swipe left or right on the screen to go back or dismiss modal components. RTL predictive back features should mirror those found in a LTR context. The predictive back gesture should adjust for RTL languages