cssjanus

What is cssjanus?

The cssjanus npm package is a utility for converting CSS stylesheets between left-to-right (LTR) and right-to-left (RTL) formats. This is particularly useful for supporting languages that are read from right to left, such as Arabic and Hebrew.

What are cssjanus's main functionalities?

Convert LTR to RTL

This feature allows you to convert a left-to-right CSS stylesheet to a right-to-left format. The example code demonstrates how to transform a simple CSS rule from LTR to RTL.

const cssjanus = require('cssjanus');
const ltrCss = 'body { margin-left: 10px; }';
const rtlCss = cssjanus.transform(ltrCss);
console.log(rtlCss); // Output: 'body { margin-right: 10px; }'

Convert RTL to LTR

This feature allows you to convert a right-to-left CSS stylesheet to a left-to-right format. The example code demonstrates how to transform a simple CSS rule from RTL to LTR.

const cssjanus = require('cssjanus');
const rtlCss = 'body { margin-right: 10px; }';
const ltrCss = cssjanus.transform(rtlCss);
console.log(ltrCss); // Output: 'body { margin-left: 10px; }'

Preserve Directional Neutral Rules

This feature ensures that CSS rules that are neutral with respect to directionality (e.g., color properties) remain unchanged during the transformation. The example code shows that a color property remains the same after transformation.

const cssjanus = require('cssjanus');
const neutralCss = 'body { color: red; }';
const transformedCss = cssjanus.transform(neutralCss);
console.log(transformedCss); // Output: 'body { color: red; }'

Other packages similar to cssjanus

rtlcss

rtlcss is another tool for converting CSS from LTR to RTL. It offers more customization options and plugins for advanced transformations. Compared to cssjanus, rtlcss provides a more extensive API and greater flexibility for handling complex CSS rules.

postcss-rtl

postcss-rtl is a PostCSS plugin that adds RTL support to your CSS. It allows you to write your styles in LTR and automatically generate the RTL counterpart. This package integrates well with the PostCSS ecosystem, making it a good choice for projects already using PostCSS.

README

CSSJanus

Convert CSS stylesheets between left-to-right and right-to-left.

Based the original Google project.

See Interactive demo.

Install

npm install cssjanus

Usage

var cssjanus = require( 'cssjanus' );
var rtlCss = cssjanus.transform( ltrCss );

transform( string css [, Object options ] ) : string

Parameters:

• css Stylesheet to transform
• options: Options object (optional)
• options.transformDirInUrl (Boolean): Transform directions in URLs, such as ltr to rtl. Default: false.
• options.transformEdgeInUrl (Boolean): Transform edges in URLs, such as left to right. Default: false.

Preventing flipping

If a rule is not meant to be flipped by CSSJanus, use a /* @noflip */ comment to protect the rule.

.rule1 {
  /* Will be converted to margin-right */
  margin-left: 1em;
}
/* @noflip */
.rule2 {
  /* Will be preserved as margin-left */
  margin-left: 1em;
}

Integrations

• css parser: rtl-converter.
• Grunt: grunt-cssjanus.
• PHP port: php-cssjanus.
• Gulp: gulp-cssjanus.
• PostCSS: postcss-cssjanus.
• styled-components: styled-components-rtl.
• Stylis: stylis-plugin-rtl.
• webpack: cssjanus-webpack, webpack-arabic-css.

Who uses CSSJanus?

• Wikimedia Foundation, the non-profit behind Wikipedia and other free knowledge projects. Used as part of MediaWiki and VisualEditor on Wikipedia, and more.
• WordPress, a free and open-source content management system. Used for the interface of wp-admin and the default yearly themes.
• styled-components, an ecosystem of visual primitives. Its RTL support is powered by CSSJanus.
• AdminLTE, an open-source admin dashboard and control panel theme. See AdminLTE-RTL.

See also

• Interactive demo

Contribute

• Issue tracker: https://phabricator.wikimedia.org/tag/cssjanus/
• Source code: https://gerrit.wikimedia.org/g/mediawiki/libs/node-cssjanus
• Submit patches via Gerrit: https://www.mediawiki.org/wiki/Developer_account