Switch branches/tags
react-fela@7.3.0 react-fela@7.2.0 react-fela@7.0.1 react-fela@6.2.4 react-fela@6.2.3 react-fela@6.2.2 react-fela@6.2.1 react-fela@6.2.0 react-fela@6.1.1 react-fela@6.0.2 react-fela@6.0.1 react-fela@6.0.0 react-fela@5.3.0 react-fela@5.2.1 react-fela@5.2.0 react-fela@5.0.0 preact-fela@7.3.0 preact-fela@7.2.0 preact-fela@7.0.1 preact-fela@6.2.4 preact-fela@6.2.3 preact-fela@6.2.2 preact-fela@6.2.1 preact-fela@6.2.0 preact-fela@6.1.1 preact-fela@6.0.2 preact-fela@6.0.1 preact-fela@6.0.0 preact-fela@5.3.0 preact-fela@5.2.1 preact-fela@5.2.0 preact-fela@5.0.0 performance-benchmarks@0.0.13 performance-benchmarks@0.0.12 performance-benchmarks@0.0.10 performance-benchmarks@0.0.9 performance-benchmarks@0.0.8 performance-benchmarks@0.0.7 performance-benchmarks@0.0.6 inferno-fela@8.2.0 inferno-fela@8.1.0 inferno-fela@7.0.1 inferno-fela@6.2.4 inferno-fela@6.2.3 inferno-fela@6.2.2 inferno-fela@6.2.1 inferno-fela@6.2.0 inferno-fela@6.1.1 inferno-fela@6.0.2 inferno-fela@6.0.1 inferno-fela@6.0.0 inferno-fela@5.3.0 inferno-fela@5.2.1 inferno-fela@5.2.0 inferno-fela@5.0.0 fela@6.1.8 fela@6.1.7 fela@6.1.3 fela@6.1.2 fela@6.1.1 fela@6.1.0 fela@6.0.2 fela@6.0.1 fela@6.0.0 fela@5.2.0 fela@5.1.1 fela@5.1.0 fela@5.0.0 fela-utils@8.0.7 fela-utils@8.0.6 fela-utils@8.0.3 fela-utils@8.0.2 fela-utils@8.0.1 fela-utils@8.0.0 fela-utils@7.0.2 fela-utils@7.0.1 fela-utils@7.0.0 fela-utils@6.0.1 fela-utils@6.0.0 fela-utils@5.0.5 fela-utils@5.0.0 fela-tools@5.1.6 fela-tools@5.1.5 fela-tools@5.1.2 fela-tools@5.1.1 fela-tools@5.1.0 fela-tools@5.0.14 fela-tools@5.0.10 fela-tools@5.0.9 fela-tools@5.0.8 fela-tools@5.0.7 fela-tools@5.0.6 fela-tools@5.0.5 fela-tools@5.0.0 fela-statistics@5.0.21 fela-statistics@5.0.20 fela-statistics@5.0.17 fela-statistics@5.0.16 fela-statistics@5.0.15 fela-statistics@5.0.14
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



npm version npm downloads

Uses bidi-css-js to enable direction-independent style authoring based on the CSSWG's CSS Logical Properties and Values proposal.

It is important to note that, when used as a Fela renderer plugin, this package is not a true polyfill for the proposal, as all start and end properties (and so on) are converted to left or right values (etc.), and will not automatically flip when the writing direction (dir) changes in the document.

When used in conjunction with fela-plugin-fallback-value, fela-plugin-bidi must be passed to the plugins array after fela-plugin-fallback-value, as it cannot handle the array used to pass fallbacks on its own.


yarn add fela-plugin-bidi

You may alternatively use npm i --save fela-plugin-bidi.


Make sure to read the documentation on how to use plugins.

For details on what the plugin can and cannot do, please see the documentation in the underlying library. Please make sure to look at the note about four-directional shorthand properties, as there was a breaking change in version 2.0.0.

import { createRenderer } from 'fela'
import bidi from 'fela-plugin-bidi'

const renderer = createRenderer({
  plugins: [ bidi('rtl') ]

With fela-plugin-fallback-value:

import { createRenderer } from 'fela'
import fallbackValue from 'fela-plugin-fallback-value'
import bidi from 'fela-plugin-bidi'

const renderer = createRenderer({
  plugins:[fallbackValue(), bidi('rtl')] // Order matters.



  // BackgroundImage also supports transforming linear-gradient
  backgroundImage: 'logical url(/foo/bar/ste.png)',
  cursor: 'start-resize',
  float: 'end',
  margin: 'logical 1px 2px 3px 4px',
  paddingStart: 20,


// When `flowDirection` is set to `rtl`
  backgroundImage: 'url(/foo/bar/rtl.png)',
  cursor: 'e-resize',
  float: 'left',
  margin: '1px 4px 3px 2px',
  paddingRight: 20,

// When `flowDirection` is set to `ltr`
  backgroundImage: 'url(/foo/bar/ltr.png)',
  cursor: 'w-resize',
  float: 'right',
  margin: '1px 2px 3px 4px',
  paddingLeft: 20,


Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.