/postcss-bidirection

PostCSS plugin that polyfill Bi-directional CSS properties and values to suppot rtl and ltr rules in all browsers

Primary LanguageJavaScriptMIT LicenseMIT

PostCSS Bidirection Build Status Npm version

PostCSS plugin that polyfill Bi-directional CSS proposal from W3C to suppot direction-sensitive rules, a.k.a Left-To-Right (LTR) and Right-To-Left (RTL) in all browsers.

Install

npm install --save-dev postcss-bidirection

Usage

Install postcss-bidirection via npm:

postcss([ require('postcss-bidirection') ])

See PostCSS docs for examples for your environment.

To check the layout change, in your HTML file, add attribute in your html tags

<html dir="rtl">

Or, in your js file, set document.dir = 'rtl' or document.dir = 'ltr'.

Examples

PostCSS Bidirection support syntax based on https://wiki.mozilla.org/Gaia/CSS_Guidelines

Text alignment example

Input

.foo {
  text-align: start;
}

Output

.foo {
  text-align: left;
}

html[dir="rtl"] .foo {
  text-align: right;
}

Padding Example

Input

.foo {
  padding-inline-start: 1px;
}

Output

.foo {
  padding-left: 1px;
}

html[dir="rtl"] .foo {
  padding-right: 1px;
}

Absolute Positioning Example

Input

.foo {
  offset-inline-start: 1px;
}

Output

.foo {
  left: 1px;
}

html[dir="rtl"] .foo {
  right: 1px;
}

All supported syntax are listed below

left/right begin/end
text alignment
text-align: left text-align: start
text-align: right text-align: end
float: left float: start
float: right float: end
clear: left clear: start
clear: right clear: end
padding, margin, border
padding-left padding-inli ne-start
padding-right padding-inline-end
border-left border-inline-start
border-right border-inline-end
margin-left margin-inline-start
margin-right margin-inline-end
absolute positioning
left offset-inline-start
right offset-inline-end

Debugging

Install postcss-debug

npm install -g postcss-debug

Then run postcss-debug with command

postcss-debug sample.css

References

Firefox OS / B2G OS

These CSS syntax are already in production in Mozilla's Firefox OS, which could be installed as an Android launcher. Once its started, open Settings > Language and choose an sample RTL Language to check the result.