# Styling based on language

## Style for one language

Sometimes, we need to make design changes specific to only one language.

```markup
<html dir="ltr" lang="fr" data-template="group-offer-detail">
```

The `html` tag has the attribute `lang`, that you can use to make some style specific for one language.

```css
/* Example 1 */
html[lang="fr"] .btn {
     padding-left: 1em;
}

/* Example 2 (SCSS syntax) */
.btn {
     padding-left: 2.5em;
     html[lang="fr"] & {
         padding-left: 1em;
     }
}
```

## RTL languages

```markup
<html dir="rtl" lang="ar" data-template="group-offer-detail">
```

The `html` tag has the attribute `dir`, that can be `dir="ltr"` or `dir="rtl"` .\
Based on this, you can adapt the style.

For example, you may want to change the position of the padding based on LTR or RTL

![Example of the same button, styled differently if left-to-right language or right-to-left language](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-Lzs7AFd0FwghfFB6ndk%2F-LzsAE3AwxOCr-ARjLam%2Frtl-example-buttons.png?alt=media\&token=551ca1e0-d1f8-4c27-b784-9c76aee21aeb)

```css
/* Example to change the position of the padding (SCSS syntax) */
.btn {
     padding-left: 2.5em;
     html[dir="rtl"] & {
         padding-right: 2.5em;
         padding-left: 0;
     }
}
```

To make SASS more maintainable, to may want to use this sass mixin

{% code title="\_rtl-helpers.scss" %}

```css
/* original one with stylus https://davidwalsh.name/stylus-parent-selectors */
/* mixin definition ; sets LTR and RTL within the same style call */
/* example: bidi-style(margin-left, 20px, margin-right, 0);*/
@mixin bidi-style($prop, $value, $inverse-prop, $default-value) {
    #{$prop}: $value;

    html[dir=rtl] & {
        #{$inverse-prop}: $value;
        #{$prop}: $default-value;
    }
}

```

{% endcode %}

{% hint style="warning" %}
On RTL languages, numbers are wrong displayed. For example, +974 44563333 will be rendering like 44563333 974+. To avoid this issue, you can use unicode-bidi: bidi-override\`  property to numbers containers.
{% endhint %}

```css
.bidi-number {
    unicode-bidi: bidi-override;
}

<span class="bidi-numbers">+974 44563333</span>
```
