<!--
{
  "documentType" : "article",
  "framework" : "TVML",
  "identifier" : "/documentation/TVML/layout-direction",
  "metadataVersion" : "0.1.0",
  "role" : "article",
  "title" : "layout-direction"
}
-->

# layout-direction

Sets the text direction based on the user’s language preference.

## Overview

All base style sheets now use `text-align:natural`. You must use the `layout-direction`
query to change the language layout. Here’s an example for specifying styles for
right-to-left languages.

```xml
<style>
    .socialBadgeInLockup {
        tv-position: bottom-trailing;
        tv-align: trailing;
        margin: 0 8 -8 0;
    }
    .socialBadgeInMonogramLockup {
        tv-position: bottom-trailing;
        tv-align: trailing;
        margin: 0 18 10 0;
    }

    @media (layout-direction: rtl) {
        .socialBadgeInLockup {
            margin: 0 0 -8 8;
        }
        .socialBadgeInMonogramLockup {
            margin: 0 0 10 18;
        }
    }
</style>
```

### Values for layout-direction

- `ltr`: Test for left-to-right language layout.
- `rtl`: Test for right-to-left language layout.

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)