RTLing with directive

[jawadsahil]

Sometimes we need not only to RTL the css, but to change the value as well; For example here is my source css

.somediv {
    right : 0px /*rtl:5px*/;
}

Desired Output:

.somediv {
    left:5px;
}

Actual Output (Not desired):

.somediv {
    right:5px;
}

Is there anyway I can achieve this in current version?

[MohammadYounes]

Is this a specific case or generic one ? Can you detail your use case along with an online sample ?

[jawadsahil]

I came across this scenario while working on a website, and the use case is same as mentioned above. You can try to apply RTLCSS on this block of css.

.somediv {
    right : 0px /*rtl:5px*/;
}

I was expecting that it will replace the 'right' with 'left' as it is supposed to do so, but if I add the directive, then it does not replace as such.

[MohammadYounes]

I meant a real world scenario use-case, The target is to convert LTR CSS to RTL.

Can you explain how an LTR CSS would contain:

.somediv {
  right: 0px;
}

and its RTL counterpart needs to be:

.somediv{
 right: 5px;
}

Thanks!

[jawadsahil]

I am using JQuery Chosen plugin. The chosen plugin shows as dropdown arrow image that has the following css:

.chosen-container-single .chosen-single div {
    right:0px;
}

when I apply RTLCSS to this, it produces:

.chosen-container-single .chosen-single div {
    left:0px;
}

But the arrow looks odd in that position (It is not odd in original css, because, the arrow has 5 pixels transparent area on the right)... So I want it to move 5px.

Hope this clarifies the situation. ... (I am sorry if this is beyond the scope of your plugin and if I am asking too much. I was just asking if is possible.. In other case I can look for some alternative work around. Thanks)

[MohammadYounes]

Thanks for the details, I was just trying to understand the situation in order to provide a solution. I would suggest the following:

• Customize the rule to fix the issue without affecting the LTR version:

.chosen-container-single .chosen-single div {
    padding-right: 5px;
}

Or

• Add your own decl. level directive to change the value and allow further processing:

{
  "name": "custom",
  "expr": /(?:\/\*(?:!)?rtl-custom:)([^]*?)(?:\*\/)/img,
  "action": function (decl) {
    this.expr.lastIndex = 0;
    var newValue = this.expr.exec(decl.raws.value.raw)[1];
    decl.raws.value.raw = newValue;
    return false;
  }
}

.somediv {
    left: 0 /*rtl-custom:5px*/;
}

[jawadsahil]

Thanks Younes,

I really appreciate your work.