{
  "id": 17889064,
  "title": "Part 5: Mirror With Intent: Building Right-to-Left Ready Screens in Jetpack Compose",
  "url": "https://urgent.news/2026/11/03/part-5-mirror-with-intent-building-right-to-left-ready-screens-in",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-03T01:46:21.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/sivavishnu_r_1ee8971ed42d/part-5-mirror-with-intent-building-right-to-left-ready-screens-in-jetpack-compose-4j3k"
  },
  "original_language": "en",
  "account": "Part 5: Mirror With Intent: Building Right-to-Left Ready Screens in Jetpack Compose\n\nCompose mirrors most layouts for free when you indicate the start and end of a layout, rather than hardcoding left and right. This includes most directional icons, play buttons, checkmarks, and clocks, but not phone numbers or English product names inside Arabic sentences. Gesture math, slide animations, and custom Canvas drawing don't mirror automatically and need additional attention.\n\nWhen building for RTL layouts, it's crucial to test them thoroughly. You can use a forced-RTL preview and the ar-XB pseudolocale for quick testing. After testing, lock the result using layout assertions and reviewed LTR/RTL screenshot baselines.\n\nA common issue with RTL layouts is the back arrow icon. By default, it points left, which can be confusing for RTL users as it suggests moving forward within the screen. The solution is to use the AutoMirrored icon set, which automatically flips the icon in RTL layouts. The deprecated Filled.ArrowBack icon should be avoided, as it has been deprecated in favor of the AutoMirrored set.\n\nCompose handles layout direction through the LocalLayoutDirection, which is derived from the device configuration. When the locale is Arabic or Hebrew, the layout direction is set to LayoutDirection.Rtl. All direction-aware APIs in Compose respect this direction, so you don't need to write additional code for RTL layouts.\n\nTo build RTL-ready screens in Compose, start by using the start/end API for layout direction. Avoid using hard-coded left/right APIs, as they may not work as expected in RTL layouts. Modifier.offset(x = …) mirrors content, moving it right in LTR and left in RTL, which is usually desirable for certain cases like nudging a badge toward the edge of an icon. However, use absoluteOffset and add comments when the offset is genuinely physical, such as aligning with a fixed piece of artwork.\n\nReading order also follows the layout direction. TalkBack, the screen reader, automatically orders siblings top to bottom and then start to end in RTL layouts. Hard-coding absolute positions can break both visual and reading order, so it's best to stick to start/end APIs and let TalkBack handle the rest. When working with icons, flip those that show direction through the reading flow (e.g., back, forward, next, previous, send, list indentation, or chevrons for navigation). Don't flip icons whose direction comes from physical world conventions or universal conventions like media playback controls (play, fast-forward, rewind) or check symbols.",
  "summary": "Build for Everyone · Part 5 of 5 Previously: Parts 1 to 4 made screens readable, operable, testable, and alive for assistive technology. This final part is about a different kind of inclusion: the hundreds of millions of people who read Arabic, Hebrew, Persian, or Urdu, right to left. TL;DR Compose mirrors most layouts for free, as long as you say start and end*, never* left and right*. * The…",
  "key_points": [
    "Compose mirrors most layouts automatically for RTL, including icons and clocks.",
    "Use AutoMirrored icon set for back arrow to avoid confusion for RTL users.",
    "Ensure layout direction through LocalLayoutDirection, respecting device configuration."
  ],
  "editors_take": "Prioritizing start and end APIs over hardcoded directional values shifts the burden of layout mirroring from manual developer adjustments to an automated system that preserves accessibility and visual flow.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}