How to mirror style in RTL language?

[behnammodi]

Hi there, i want to mirror style in RTL langugage for example:

padding-left: 5px change to padding-right:5px in RTL

How can I do?

[behnammodi]

If it's not possible now I can work on it

[tajo]

Instead of padding-left you should use padding-inline-start. That's imo better approach than trying to programmatically switch styles. More info:

https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/RTL_Guidelines

[behnammodi]

@tajo Thank you man, but padding-inline-start is not good support by browsers and it does not work on IE and old browser

Please see this link: https://caniuse.com/mdn-css_properties_padding-inline-start

And also you can't use some attribute ex: inset-inline-start instead of left because it's very new:

but you need it:

.badge {
  position: absolute;
  left: 5px;
  ...
}

in RTL

.badge {
  position: absolute;
  right: 5px;
  ...
}

And also sometimes we need to mirror value instead of attribute ex:

transform: translateX(100%) so we need to convert to transform: translateX(-100%) in RTL

[behnammodi]

@tajo This is my purpose:

We can create a package called for example styletron-cylinder that included LTR and RTL handler

import { Provider as StyletronProvider } from "styletron-react";
import { Client as Styletron } from "styletron-engine-atomic";
import { LTRCylinder, RTLCylinder } from "styletron-cylinder";

const isRTL = true; // ex: hardcoded

const engine = new Styletron(isRTL ? RTLCylinder : LTRCylinder);

React.render(
  <StyletronProvider value={engine}>
    <App />
  </StyletronProvider>
);

[tajo]

You can always create some transformation function and use it in re-exports of styled or useStyletron APIs. I'm not sure if we want to add it into Styletron itself. In BaseWeb, we pass rtl: true as a theme value (through React context) and use that to adjust some rules. But going forward, it seems better to just use new CSS props that respect the dir settings.