HTML supports the dir tag to allow one to easily change from left-oriented design to right-oriented one. In CSS, however, it seems the matter has not been taken into serious consideration. When you have a CSS float, for example, you can choose if it floats left or right but there's no way for you to say something simple like left and left-fixed. IMHO, left should have changed to right on RTL languages while left-fixed would have always kept left. The same goes to specifying the 4 dimensions like in 'padding: 1px 2px 3px 4px;'. They should be switched unless the directive fixed is added.
But since CSS doesn't do that well, a developer from Google has created a python script called CSSJanus which tries to address many issues relevant for converting a CSS from a left-oriented one to a right-oriented one. It's code is available here.
Since Colnect is built using PHP, I've decided to only use a few ideas from the CSSJanus code and integrate them into the JS/CSS combinator already in use. The idea is quite simple, the application asks for a different CSS file when it's right-to-left (RTL) oriented by prefixing some directive to the CSS requested which lets the combinator understand it should add the conversion.
You can start with the combinator script code here.
These two lines at the top of the script will add RTL directive:
$bRTL = (substr($_GET['files'], 0, 4) == 'rtl_');
if ($bRTL) $_GET['files'] = substr($_GET['files'], 4);
Now the cache hash should be different so there's a slight modification here:
$hash = $lastmodified . '-' . md5($_GET['files'].($bRTL ? 'RTL' : ''));
And the last thing to do is to create the left-to-right conversion function and place it just after stripping the CSS comments. Add this:
if ($bRTL) $contents = CssSwitchLeftToRight($contents);
And here's my simple conversion function (that does NOT cover many cases covered by CSSJanus):
/**
* Switch left to right and vice versa for a few of the cases relevant for css
*
* @param string $str
* return string
*/
function CssSwitchLeftToRight($str) {
$arConversionSeq = array(
'/-left/' => 'TOK1',
'/-right/' => '-left',
'/TOK1/' => '-right',
'/float\s*:\s*left/i' => 'TOK2',
'/float\s*:\s*right/i' => 'float:left',
'/TOK2/' => 'float:right',
);
foreach ($arConversionSeq as $pattern => $replacement) {
$str = /*"doing{} $pattern => $replacement ".*/preg_replace($pattern, $replacement, $str);
}
return $str;
}
I have not posted the entire script here since it has site-specific modifications on my site. You're welcomed to comment here if further clarifications are needed.
