library rtlcss-php {🖫 14, ⚐ 4, ★ 2}

prestashop/rtlcss-php

Converts CSS to Right-to-Left

Thursday, December 28, 2017
by ps-jarvis
Repository
4 Watchers
2 Stars
14 Installations

PHP
0 Dependents
0 Suggesters
6 Forks
0 Open issues
4 Versions
17 % Grown

The README.md

RtlCss

RtlCss is a library for converting Left-To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL)., _(*1)

Usage

Installation using composer

Add the library to your composer.json, _(*2)

{
    "require": {
        "prestashop/rtlcss-php": "*"
    }
}

Flipping

$parser = new Sabberworm\CSS\Parser($css);
$tree = $parser->parse()
$rtlcss = new PrestaShop\RtlCss\RtlCss($tree);
$rtlcss->flip();
echo $tree->render();

For parsing options and rendering, refer to PrestaShop/PHP-CSS-Parser., _(*3)

Output sample

.div {
    direction: ltr;
    left: 10px;
    border: 10px 5px 0px 2px;
    float: left;
}

Becomes:, _(*4)

.div {
    direction: rtl;
    right: 10px;
    border: 10px 2px 0px 5px;
    float: right;
}

Options

You can prefix your CSS with comments starting with /*rtl:*/ for special handling., _(*5)

Do not flip values

Prepend with /*rtl:ignore*/, or wrap within /*rtl:begin:ignore*/ and /*rtl:end:ignore*/., _(*6)

.div {
    /*rtl:ignore*/
    float: left;
    left: 10px;
}
.div {
    direction: ltr;
    /*rtl:begin:ignore*/
    float: left;
    left: 10px;
    /*rtl:end:ignore*/
}

Becomes:, _(*7)

.div {
    float: left;
    right: 10px;
}
.div {
    direction: rtl;
    float: left;
    left: 10px;
}

Remove CSS

Prepend with /*rtl:remove*/, wrap within /*rtl:begin:remove*/ and /*rtl:end:remove*/., _(*8)

.div {
    /*rtl:remove*/
    float: left;
    left: 10px;
}
.div {
    direction: ltr;
    /*rtl:begin:remove*/
    float: left;
    left: 10px;
    /*rtl:end:remove*/
}

Becomes:, _(*9)

.div {
    right: 10px;
}
.div {
    direction: rtl;
}

Additional CSS

Write the CSS in a content starting with /*rtl:raw:., _(*10)

.div {
    /*rtl:raw:
        text-align: left;
    */
    float: left;
}

Becomes:, _(*11)

.div {
    text-align: left;
    float: right;
}

Limitation

Currently the comments must always precede a statement, they will not work if they are not followed by anything., _(*12)

Valid:, _(*13)

.div {
    /*rtl:raw:
        text-align: left;
    */
    float: left;
}

Invalid:, _(*14)

.div {
    float: left;
    /*rtl:raw:
        text-align: left;
    */
}

CSS support

A lot of common CSS rules are supported, however a few complex ones are not. To get a grasp of what is supported and what isn't, please refer to the test cases. Unsupported scenarios are marked to be skipped., _(*15)

About this tool

This tool is very heavily inspired by MohammadYounes/rtlcss, even though at this stage it does not include all of its features. See this library as a partial port of the latter., _(*16)