---
title: "RTL/LTR languages customizations"
url: "https://help.productfruits.com/en/article/rtl-ltr-languages-customizations"
language: "en"
last_updated: "2025-02-04T08:41:45.021Z"
---

# RTL/LTR languages customizations

If you want to adjust styling or positioning based on RTL/LTR languages, this article is for you.

You might want to adjust positions based on language text alignment. For this, you can use [Custom CSS](https://my.productfruits.com/portal/workspace/default/themes-and-appearance/custom-css) and the LTR/RTL data attribute.

We add the `data-pf-dir` attribute on the Product Fruits root HTML element (`.``productfruits--container-root`) when Product Fruits is loaded. It can have two values: `ltr` and `rtl`. This attribute is rendered based on the current environment language code which *you* provide through our JavaScript snippet. You can use the attribute in the Custom CSS section to target LTR/RTL users and change styles for them.

## Example: Changing the position of checklists

If you want to show the checklist in a different place for LTR and RTL languages, you can use this custom CSS snippet. *Please note that when using this, you shouldn't use the 'Bottom left X/Y offset' inputs in the Look & Feel section in the Checklists section.*

```css
[data-pf-dir="ltr"] .productfruits--container-pf-checklists-stacker {
    left: 125px;
    right: unset;
}
[data-pf-dir="rtl"] .productfruits--container-pf-checklists-stacker {
    left: unset;
    right: 125px;
}
```

The snippet will display the checklist launcher buttons 125px from the left side for LTR and 125px from the right side for RTL languages.