CSSJanus

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

Based on the original Google project.

See Interactive demo.

Install

npm install cssjanus

Usage

var cssjanus = require( 'cssjanus' );

// Example: convert LTR CSS to RTL
var ltrCss = 'body { margin-left: 10px; }';
var rtlCss = cssjanus.transform( ltrCss );

console.log( rtlCss );
// → body { margin-right: 10px; }

Signature:

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;
}

CSS Logical

We encourage and recommend use of CSS logical properties for the subset of CSS features where a native direction-aware version of a CSS property exists (be sure to check browser support for specific properties). You can, for example, set properties like margin-inline-start instead of margin-left, which the browser flips based on content direction, and work seamlessly alongside other CSS properties that CSSJanus flips instead.

Note that CSS logical properties flip based on nearest content direction and content language, whereas CSSJanus is generally configured to flip by user language and UI direction.

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