RTL conversion for CSS in JS objects
[All Contributors][all-contributors-badge]
For some locales, it’s necessary to change padding-left
to padding-right
when your text direction is right to left.
There are tools like this for CSS (cssjanus
for example) which manipulate strings of CSS to do this, but none for
CSS in JS where your CSS is represented by an object.
This is a function which accepts a CSS in JS object and can convert
padding-left
to padding-right
as well as all
other properties where it makes sense to do that (at least, that’s what
it’s going to be when it’s done… This is a work in progress).
This module is distributed via npm which is bundled with node and should be installed as one of
your project’s dependencies
:
npm install --save rtl-css-js
This module is exposed via CommonJS as well as UMD with the global as
rtlCSSJS
CommonJS:
const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({paddingLeft: 23})
console.log(styles) // logs {paddingRight: 23}
You can also just include a script tag in your browser and use the
rtlCSSJS
variable:
<script src="https://unpkg.com/rtl-css-js"></script>
<script>
const styles = rtlCSSJS({paddingRight: 23})
console.log(styles) // logs {paddingLeft: 23}
</script>
You can also control which rules you don’t want to flip by adding a
/* @noflip */
CSS comment to your rule
const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({paddingLeft: '20px /* @noflip */'})
console.log(styles) // logs {paddingLeft: '20px /* @noflip */' }
This library support kebab-case properties too.
const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({'padding-right': 23})
console.log(styles) // logs {'padding-left': 23}
rtl-css-js
also exposes its internal helpers and
utilities so you can deal with certain
scenarios yourself. To use these you can use the
rtlCSSJSCore
global with the UMD build,
require('rtl-css-js/core')
, or use
import {propertyValueConverters, arrayToObject} from 'rtl-css-js/core'
.
You can import anything that’s exported from src/core
.
Please see the code comments for documentation on how to use these.
background
Right now background
and backgroundImage
just replace all instances of ltr
with rtl
and
right
with left
. This is so you can have a
different image for your LTR and RTL, and in order to flip linear
gradients. Note that this is case sensitive! Must be lower case. Note
also that it will not change bright
to
bleft
. It’s a little smarter than that. But this
is definitely something to consider with your URLs.
var()
Since it’s impossible to know what the contents of a css variable are
until the styles are actually calculated by the browser, any property
value that includes css variables with var()
will not be
converted.
CSSJanus was a major inspiration.
react-with-styles
with Aphroditertl-css-js
’s core.jss
to support flipping styles dynamically.I’m not aware of any, if you are please make a pull request and add it here!
Thanks goes to these people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT