RTL/LTR languages customizations

You might want to adjust positions based on language text alignment. For this, you can use 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.

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