yoga/website/docs/styling/layout-direction.mdx

---
sidebar_position: 10
---

import Playground from '@site/src/components/Playground';

# Layout Direction

Layout direction specifies the direction in which children and text
in a hierarchy should be laid out. Layout direction also effects what
edge `start` and `end` refer to. By default Yoga lays out with left-to-right (LTR)
layout direction. In this mode `start` refers to `left` and `end`
refers to `right`. When localizing your apps for markets with right-to-left (RTL) languages
you should customize this by either by passing a direction
to the [CalculateLayout](/docs/getting-started/laying-out-a-tree) call or by setting the direction on the root node.

**LTR (default)**: Text and children and laid out from left to right. Styles applied
the start of an element are applied on the left side.

**RTL**: Text and children and laid out from right to left. Styles applied the
start of an element are applied on the right side.

<Playground code={`<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
      direction: 'ltr',
    }}>
    <Node style={{margin: 5, height: 50, width: 50}} />
    <Node style={{margin: 5, height: 50, width: 50}} />
  </Node>
</Layout>`} />