rtl-css-js

What is rtl-css-js?

The rtl-css-js npm package is designed to convert CSS styles written for left-to-right (LTR) layouts into right-to-left (RTL) layouts. This is particularly useful for developers creating or maintaining websites and applications that need to support multiple languages, including those read from right to left, such as Arabic and Hebrew. The package provides a straightforward API to transform CSS objects, making it easier to manage styles in multilingual projects.

What are rtl-css-js's main functionalities?

Convert LTR CSS to RTL

Converts a CSS object with left-based properties to right-based ones for RTL support. For example, 'paddingLeft: 10px' becomes 'paddingRight: 10px'.

{"paddingLeft": "10px"}

Handle Flipping Values

Automatically flips certain CSS values to their opposite direction. For instance, 'textAlign: left' is converted to 'textAlign: right' for RTL layouts.

{"textAlign": "left"}

Ignore Specific Properties

Allows specific CSS properties to be ignored during the conversion process by using a special comment directive. This is useful for properties that should not change direction.

{"/* rtl:ignore */ paddingLeft": "10px"}

Other packages similar to rtl-css-js

postcss-rtl

Similar to rtl-css-js, postcss-rtl is a PostCSS plugin that generates RTL stylesheets. The main difference is that postcss-rtl works at the CSS file level and is part of the PostCSS ecosystem, making it more suitable for projects already using PostCSS.

rtlcss

rtlcss is another npm package that focuses on converting LTR CSS to RTL. It provides more granular control over the conversion process compared to rtl-css-js, including the ability to define custom rules and directives within CSS files. rtlcss is often used directly in build processes or as part of a larger CSS processing pipeline.

README

rtl-css-js

RTL conversion for CSS in JS objects

WIP: This is a work in progress! Want to help out? Start here and checkout this

The problem

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 solution

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

Installation

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

Usage

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@1.0.0-beta.1"></script>
<script>
const styles = rtlCSSJS({paddingRight: 23})
console.log(styles) // logs {paddingLeft: 23}
</script>

Inspiration

CSSJanus was a major inspiration.

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here!

Contributors

Thanks goes to these people (emoji key):

Kent C. Dodds 💻 ⚠️ 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT