kentcdodds/rtl-css-js — explained in plain English
Analysis updated 2026-08-08 · repo last pushed 2023-04-26
Add Arabic or Hebrew language support to a web app that styles with JavaScript objects.
Automatically flip padding, margin, border, and positioning values for right-to-left layouts.
Prevent specific style rules from flipping using a noflip comment when a value should stay unchanged.
Integrate RTL conversion into JSS, Fela, or Aphrodite styling workflows without maintaining duplicate styles.
| kentcdodds/rtl-css-js | frankchiu-dev/claude-codex-usage-dashboard | tasihi89/canvas-hand | |
|---|---|---|---|
| Stars | 166 | 166 | 165 |
| Language | JavaScript | JavaScript | JavaScript |
| Last pushed | 2023-04-26 | — | — |
| Maintenance | Dormant | — | — |
| Setup difficulty | easy | moderate | easy |
| Complexity | 2/5 | 2/5 | 2/5 |
| Audience | developer | developer | vibe coder |
Figures from each repo's GitHub metadata at analysis time.
Install via npm or yarn and call the conversion function on a JavaScript style object, no external infrastructure required.
If you're building a web app that needs to support languages written right-to-left, like Arabic or Hebrew, you have to flip the entire layout. Padding that goes on the left in English needs to move to the right, background gradients need to reverse direction, and so on. Doing this manually for every style rule is tedious and error-prone. This tool, rtl-css-js, automates that conversion for projects that write their styling rules as JavaScript objects rather than traditional CSS files. You pass it a JavaScript object representing your styles, and it returns a new object with all the direction-specific properties flipped. So paddingLeft: 23 becomes paddingRight: 23, and the same logic applies to margins, borders, positioning, and similar properties. You can also add a special / @noflip / comment to any value if you want a particular rule to stay as-is and not be converted. It handles both camelCase and kebab-case property names. This is aimed at developers using "CSS in JS" libraries, tools that let you write styles as JavaScript objects instead of separate .css files. For example, if you're using a styling library like JSS, Fela, or Aphrodite and you need your app to work for right-to-left locales, this handles the conversion so you don't have to maintain two separate sets of styles. Several plugins in that ecosystem already build on top of it. There are a couple of limitations worth knowing about. For background images and gradients, it does a simple text replacement to swap directional keywords, which works but requires some care with how you name image files or write gradient syntax. And for CSS variables (the var() syntax), it can't convert the contents because those values aren't known until the browser actually renders the page. The README also notes the project is still a work in progress.
A JavaScript utility that automatically flips CSS-in-JS style objects for right-to-left languages like Arabic and Hebrew, converting properties like paddingLeft to paddingRight so developers don't have to maintain separate style sets.
Mainly JavaScript. The stack also includes JavaScript, CSS-in-JS.
Dormant — no commits in 2+ years (last push 2023-04-26).
The license is not specified in the repository explanation.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Don't trust strangers blindly. Verify against the repo.