---
title: layout-direction
framework: TVML
role: article
role_heading: Article
path: tvml/layout-direction
---

# layout-direction

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

## Overview

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. <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

## See Also

### Media Queries

- [tv-theme](tvml/tv-theme.md)