Nonchalant Programming Master

    postcss-bidirection

    2.7.2 • Public • Published

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

    Border Width Example

    Input

    .foo {
      border-inline-start-width: 1px;
    }

    Output

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

    Absolute Positioning Example

    Input

    .foo {
      inset-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-inline-start
    padding-right padding-inline-end
    border-left border-inline-start
    border-right border-inline-end
    border-left-color border-inline-end-color
    border-right-color border-inline-start-color
    border-left-style border-inline-start-style
    border-right-style border-inline-end-style
    border-left-width border-inline-start-width
    border-right-width border-inline-end-width
    border-top-left-radius border-top-inline-start-radius
    border-top-right-radius border-top-inline-end-radius
    border-bottom-left-radius border-bottom-inline-start-radius
    border-bottom-right-radius border-bottom-inline-end-radius
    margin-left margin-inline-start
    margin-right margin-inline-end
    absolute positioning
    left inset-inline-start
    right inset-inline-end
    left offset-inline-start (obsolete)
    right offset-inline-end (obsolete)

    Options

    postcss-bidirection accepts an options object.

    const plugin = require('postcss-bidirection');
    const opts = {
        ...
    };
    postcss([ plugin(opts) ]).process(input) ...
    

    Custom Selectors

    By default, postcss-bidirection prefixes generated CSS selectors with html[dir="rtl"] or html[dir="ltr"]. The buildSelector option allows you to override this behavior.

    This callback gets called once for every selector of every rule that contains translated properties. If the rule has multiple selectors separated by commas, then it will be called multiple times for that rule.

    It takes two arguments:

    • the original CSS selector of the rule that we are translating
    • The direction to which it is being translated. Can be rtl or ltr.

    It should return a CSS selector string, which will be attached to the translated CSS rule.

    For example, to drop html from generated selectors, pass a custom buildSelector function to the plugin.

    const opts = {
      buildSelector = function(selector, direction) {
        return '[dir=" + direction + '"] ' + selector;
      }
    };
    
    let bidirection = require('postcss-bidirection');
    postcss([ bidirection(opts) ]);
    

    Input

    .foo {
      text-align: start;
    }

    Now we have [dir="rtl"] instead of html[dir="rtl"] in the output:

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

    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.

    Install

    npm i postcss-bidirection

    DownloadsWeekly Downloads

    996

    Version

    2.7.2

    License

    MIT

    Unpacked Size

    27.7 kB

    Total Files

    48

    Last publish

    Collaborators

    • gasolin