ded / r2

a CSS LTR ∞ RTL converter for i18 friendly layouts

R2

R2 helps you achieve cross-language layout-friendly websites (including bi-directional text). It looks like this:

/* before */
#content {
  float: left;
  margin-right: 2px;
  padding: 1px 2px 3px 4px;
  left: 5px;
}
.info {
  text-align: right;
}

/* after */
#content {
  float: right;
  margin-left: 2px;
  padding: 1px 4px 3px 2px;
  right: 5px;
}
.info {
  text-align: left;
}

Install it

$ [sudo] npm install R2 -g

Use it as a CLI

Print to stdout

$ r2 input.css

Print to output file

$ r2 input.css output.css

Print to output file without compression

$ r2 input.css output.css  --no-compress

Read from output of another command

$ lessc input.less | r2 > output.css

Require it as a Node module

var output = require('R2').swap(css)

Test It

$ npm test

Caution

R2 will only work as good as what you give it, therefore inline-styles embedded in your HTML will not converted, and therefore may cause unexpected results. However inline-styles apart from R2 is still a bad idea, and you should avoid it anyway in favor of separating content from presentation.

Happy layout Swapping!

r2's Issues

please help me to run r2

hi;
this error:

var output=require('r2').swap('node_modules/r2/bootstrap.css');
TypeError: Cannot call method 'map' of null
at r2 (C:\Program Files (x86)\nodejs\node_modules\r2\r2.js:75:49)
at Object.swap (C:\Program Files (x86)\nodejs\node_modules\r2\r2.js:111:10)
at repl: 1:26
at REPLServer.eval (repl.js:80:21)
at repl.js:190:20
at REPLServer.eval (repl.js:87:5)
at Interface. (repl.js:182:12)
at Interface.emit (events.js:67:17)
at Interface._onLine (readline.js:162:10)
at Interface._line (readline.js:426:8)

please describe install r2 in nodejs from first step by step.
very thanx.

Semicolons in content block can break parsing

Our css had a semicolon inside a content block and it appears to break the parsing. Assuming we would have to do some checking before the declarations.split call to catch it. I removed the semi-colon for now and it goes on.

b.broke:before {
  content:"↓";
}

gets parsed like so:

b.broke:before{content:"↓}

Try using CSSOM as the backend

CSSOM seems to be twice as fast and a closer match to the official CSS parsing specs so give it a shot when possible.

problem with CSS3 Property?

I thing it doesn't support CSS3 Property, like: border-radius,...

I try with twitter bootstrap, I found it not completely converted I think for above reason.
thank you

background-position property not handled

The horizontal value of the background-position property is not handled. The following two examples demonstrate this issue:

background: url('../img/image.png') no-repeat left center;    

background-position: left center;

What I would expect:

background: url('../img/image.png') no-repeat right center;    

background-position: right center;

Instead, the 'left' horizontal value is not converted.

The following types of horizontal values need to be supported:

Percentage
30% ---> 70% (100 - x)

Pixel
A pixel value without a side is assumed to be anchored on the left, so:
20px ---> right 20px

Pixel and side:
right 20px --> left 20px

The ability to specify a side and offset is only supported in newer browsers (see "Four values syntax" under https://developer.mozilla.org/en/CSS/background-position#Browser_compatibility), so it may be desirable to simply not convert pixel values if a side is not specified.

Side
left ---> right (and vice versa)

Enable TravisCI for the repo

TravisCI for the repo is still not enable. Either the hook is missing or it's not enabled in https://travis-ci.org/profile

Support Gradients

I haven't ran into this yet, but I think we may need to consider adding support to gradients. Given:

<linear-gradient> = linear-gradient(
[ 
        [ [top | bottom] || [left | right] ] 
    | 
    <angle>
,]? 
<color-stop>[, <color-stop>]+
);

I think we'll either have to flip left to right and transform the angle along the x-axis or invert the ordering of the colors. Before this makes it in, I think I'd like to get a comprehensive test suite in making sure all cases are getting converted correctly.

Support for 'clear'?

Very interesting initiative. As far as I can see, nothing is done to values of the 'clear' property, right?

Can't install it on ubuntu

Hello,

I tried to install your code like this:

sudo npm install R2 -g

But, I've got this error:

sudo: npm: command not found

Can you please tell me how to install npm command ?
Thanks

!important declaration not handled

For at least three properties that I've tried (padding, margin, float), the presence of the !important declaration results in the property not being converted.

Example:

padding: 0 25px 0 0 !important;

Support 'border-left-color'

Currently "border-left-color" and "border-right-color" are not managed.

Sample :
.sidebar-tree-nav .collapsed>.caret {border-left-color: grey;}

Media queries and asterisks

It appears that the following rules are not swapped properly:

1. Rules preceded by an asterisk (*)
2. The FIRST rule of the FIRST selector inside a media query (@media)

Please check the (not swapped) lines below

.style1 {
    margin-left: 20px;
    *margin-left: 20px; /* not swapped */
}
@media ... {
    .style1 {
        margin-left: 20px; /* not swapped */
        margin-left: 20px;
    }
    .style2 {
        margin-left: 20px;
    }
}

R2 produces extra curly brackets in a certain situation

The following code:

.flex-caption { zoom: 1;}
.flex-caption {}
.flex-direction-nav li a {
color: black;
}

Produces the following result via R2 (notice the double curly brackets in the beginning):

.flex-caption{zoom:1;}}.flex-direction-nav li a{color:black;}

How can I make R2 to skip a section in the css file?

Some context in the CSS file should be the same across all languages, is there a way to tell R2 to not convert this section from LTR to RTL?

R2 fails if the CSS rule is empty

id1 {width:40px;}

someid {}

someid2 {width:30px;}

will result in

id1{width:40px;}}#someid2{width:30px;}

This is results in a CSS with syntax errors (has '}' ). Either r2 needs to completely ignore the empty rules or should produce correct empty rule in the output file.

Thanks
Ashok Kumar

Support for CSS Shadows and Transitions

Hi there,
I have just used your amazing tool. It surely is a time and life saver, however it had a problem with swapping for shadows and transitions.
In my case I have a transition on the "left" property but unfortunately this was not handled by the tool. Here are the rules that were not detected

.selector {
-webkit-transition:left 0.5s;
transition:left 0.5s;
-webkit-box-shadow:inset -3px 0px 5px 0px rgba(0, 0, 0, 0.5);
box-shadow:inset -3px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

It should turn to

.selector {
-webkit-transition:right 0.5s;
transition:right 0.5s;
-webkit-box-shadow:inset 3px 0px 5px 0px rgba(0, 0, 0, 0.5);
box-shadow:inset 3px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

Keep up the great work!!!

CLI not working on ubuntu

I tried to use r2 command on the CLI on Ubuntu 12.04 but it's not working.
Checked on Windows 7 and it's working.

r2 command not working in ubuntu 13.04

i tried excuting the r2 command on ubuntu 13.04, but it did not work, but when i cheked on windows it works just fine.

$ ls -l /usr/local/bin/r2
lrwxrwxrwx 1 root root 29 Sep 19 18:54 /usr/local/bin/r2 -> ../lib/node_modules/R2/bin/r2

Create/enable plugins-like architecture

Currently r2 doesn't address icon fonts such as FontAwesome

Since this seems quite a specific, it doesn't exactly meet the requirements to land this in the core of r2. It's possible that someone doesn't use it at all, and also that someone using a different icon font could see their icons swap randomly.

We've created kind-of a prototype to swap FontAwesome 3 icons (liferay-labs@e3918ac) which we're currently using.

We'd love to be able to improve that and contribute it back.

Do you think you'd be interested in something like this?
Do you have any plans towards allowing such things?

Thanks for a great work, guys!

R2 fails on empty files

Calling r2 on an empty file causes the following error:

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
TypeError: Cannot call method 'map' of null
    at r2 (/home/ubuntu1204/code/github/R2/r2.js:101:49)
    at Object.exec (/home/ubuntu1204/code/github/R2/r2.js:134:25)
    at Object.<anonymous> (/home/ubuntu1204/code/github/R2/bin/r2:2:21)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:32)
    at Function._load (module.js:308:12)
    at Array.0 (module.js:479:10)
    at EventEmitter._tickCallback (node.js:192:41)

how can I make the output not be minified ?

License

There doesn't appear to be any License associated with R2. I was looking at using it for a project, but need to be aware of the license first. Is there any way you could add one?

Thanks!

Enable TravisCI on the repo

We need to enable the TravisCI hook for the repo. @ded, since you're the owner, you're the only one who can change repo settings, thus do this.