# RTL Layout

<figure><img src="https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FasbuoKOh2hXZzzY86iOW%2Fbaz-moodle-theme-rtl-layout.png?alt=media&#x26;token=cca22afa-6aa4-4f2d-9af0-dd3c5036fc7d" alt=""><figcaption></figcaption></figure>

### Hide Element Based on Text Direction

To hide an element based on the text direction (RTL or LTR), you can use CSS or JavaScript:

#### **Using CSS:**

```css
[dir="rtl"] .element-to-hide {
    display: none;
}

[dir="ltr"] .element-to-hide {
    display: none;
}
```

#### **Hide element in content using CSS classes (HTML)**

To hide an element in your HTML content using CSS, you can apply specific CSS classes. Here’s a straightforward approach:

{% code overflow="wrap" lineNumbers="true" %}

```html
<p class="dir-ltr-hide">This paragraph is hidden on LTR, standard layout.</p>
<p class="dir-rtl-hide">This paragraph is hidden on RTL, right to left layout.</p>
```

{% endcode %}