Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
rtlcss - npm Package Compare versions
Comparing version 1.6.1 to 1.6.2
@@ -49,2 +49,3 @@ var fs = require('fs'), | ||
| } | ||
| return to; | ||
| } | ||
@@ -51,0 +52,0 @@ |
| { | ||
| "author": "Mohammad Younes", | ||
| "name": "rtlcss", | ||
| "version": "1.6.1", | ||
| "version": "1.6.2", | ||
| "description": "Framework for transforming cascading style sheets (CSS) from left-to-right (LTR) to right-to-left (RTL)", | ||
@@ -6,0 +6,0 @@ "bugs": "https://github.com/MohammadYounes/rtlcss/issues?state=open", |
103
README.md
@@ -1,25 +0,63 @@ | ||
| <img title="RTL CSS" src="https://cloud.githubusercontent.com/assets/4712046/5889219/190f366a-a425-11e4-8ef5-8b5f60a9e903.png" align="right"/> | ||
| [](http://badge.fury.io/gh/MohammadYounes%2Frtlcss) | ||
| [](http://badge.fury.io/js/rtlcss) | ||
| [](https://travis-ci.org/MohammadYounes/rtlcss) | ||
| [](https://david-dm.org/MohammadYounes/rtlcss) | ||
| # RTLCSS [](http://badge.fury.io/gh/MohammadYounes%2Frtlcss) [](http://badge.fury.io/js/rtlcss) [](https://travis-ci.org/MohammadYounes/rtlcss) [](https://david-dm.org/MohammadYounes/rtlcss) | ||
| <img style="margin:15px" title="RTL CSS" src="https://cloud.githubusercontent.com/assets/4712046/5889219/190f366a-a425-11e4-8ef5-8b5f60a9e903.png" align="right"/> | ||
| RTLCSS | ||
| ====== | ||
| RTLCSS is a framework for converting Left-To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL). | ||
| RTLCSS is a framework for converting LTR CSS to RTL. | ||
| --- | ||
| | [Why RTLCSS](#why-rtlcss) | [Install](#install) | [Basic Usage](#basic-usage) | [CLI](#cli) | [Advanced Usage](#advanced-usage) | [Options](#options-object) | ||
| | --- | --- | --- | --- | --- | --- | | ||
| --- | ||
| ## Introduction | ||
| > #### CSS Syntax | ||
| > A CSS rule has two main parts: a selector, and one or more declarations: | ||
| In a right-to-left, top-to-bottom script (commonly shortened to **right to left** or abbreviated **RTL**), writing starts from the right of the page and continues to the left. For example [Arabic script](http://en.wikipedia.org/wiki/Arabic_script) (the most widespread RTL writing system in modern times ). | ||
| >  | ||
| Web development depends heavily on CSS to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. CSS defines how HTML elements are to be displayed via Positioning, Box model, Typographic and Visual properties, such as `left:10px`, `padding-left:1em`, `text-align:right`, ... etc. | ||
| > The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. | ||
| Browsers will apply these properties AS IS regardless of the document language direction. This means in order for an international website to support RTL languages, it should adjust the entire CSS to render from right to left. | ||
| ### Powered by RTLCSS | ||
| For example, this is how different github would be if it was to be viewed in an RTL language: | ||
| <img width="320" src="https://cloud.githubusercontent.com/assets/4712046/7550690/463dd410-f674-11e4-8a4a-7b26025b79b5.png" align="right"/> | ||
| <img width="320" src="https://cloud.githubusercontent.com/assets/4712046/7550689/463a6550-f674-11e4-9f7b-e2d43bf72f1b.png" /> | ||
| Just like a mirror, where everything gets flipped. | ||
| ## Why RTLCSS | ||
| Instead of authoring two sets of CSS files, one for each language direction. Now you can author the LTR version and RTLCSS will automatically create the RTL counterpart for you! | ||
| ```CSS | ||
| .example { | ||
| display:inline-block; | ||
| padding:5px 10px 15px 20px; | ||
| margin:5px 10px 15px 20px; | ||
| border-style:dotted dashed double solid; | ||
| border-width:1px 2px 3px 4px; | ||
| border-color:red green blue black; | ||
| box-shadow: -1em 0 0.4em gray, 3px 3px 30px black; | ||
| } | ||
| ``` | ||
| Will be transformed into: | ||
| ```CSS | ||
| .example { | ||
| display:inline-block; | ||
| padding:5px 20px 15px 10px; | ||
| margin:5px 20px 15px 10px; | ||
| border-style:dotted solid double dashed; | ||
| border-width:1px 4px 3px 2px; | ||
| border-color:red black blue green; | ||
| box-shadow: 1em 0 0.4em gray, -3px 3px 30px black; | ||
| } | ||
| ``` | ||
| ##Who's using RTLCSS | ||
| * [AlertifyJS] a javascript framework for developing pretty browser dialogs and notifications. | ||
| * [Semantic] a UI component library implemented using a set of specifications designed around natural language. | ||
| * [AlertifyJS] a javascript framework for developing pretty browser dialogs and notifications. | ||
| * [WebEssentials2013] Web Essentials extends Visual Studio with a lot of new features that web developers have been missing for many years (now uses RTLCSS for converting LTR CSS to RTL). | ||
| * [WebEssentials2013] Web Essentials extends Visual Studio with a lot of new features that web developers have been missing for many years. | ||
| * [WordPress] WordPress is web software you can use to create a beautiful website or blog. | ||
@@ -32,3 +70,4 @@ | ||
| ## Install | ||
| # Install | ||
| npm install rtlcss | ||
@@ -44,14 +83,10 @@ | ||
| > RTLCSS preserves original input formatting and indentations. | ||
| RTLCSS preserves original input formatting and indentations. | ||
| ## CLI | ||
| > #### CSS Syntax | ||
| > A CSS rule has two main parts: a selector, and one or more declarations: | ||
| Convert LTR CSS files to RTL using the command line. | ||
| >  | ||
| ``` | ||
| $ rtlcss input.css output.rtl.css | ||
| ``` | ||
| For usage and available options see [CLI documentaion](https://github.com/MohammadYounes/rtlcss/blob/master/CLI.md). | ||
| ### Supported CSS Properties (a-z) | ||
@@ -101,3 +136,3 @@ | ||
| When RTLing a CSS document, there are cases where its impossible to know if the property value should be mirrored or not! If the rule selector need to be changed! Or a none directional property have to be updated. In such cases, RTLCSS provides processing directives in the form of CSS comments, both standard ```/*rtl:...*/``` and special/important ```/*!rtl:...*/``` notations are supported. | ||
| When RTLing a CSS document, there are cases where it's impossible to know if the property value should be mirrored or not! If the rule selector need to be changed! Or a none directional property have to be updated. In such cases, RTLCSS provides processing directives in the form of CSS comments, both standard ```/*rtl:...*/``` and special/important ```/*!rtl:...*/``` notations are supported. | ||
@@ -164,2 +199,13 @@ Two sets of processing directives are available, on Rule and Declaration level. | ||
| ## CLI | ||
| Convert LTR CSS files to RTL using the command line. | ||
| ``` | ||
| $ rtlcss input.css output.rtl.css | ||
| ``` | ||
| For usage and available options see [CLI documentaion](https://github.com/MohammadYounes/rtlcss/blob/master/CLI.md). | ||
| --- | ||
@@ -294,3 +340,3 @@ ## Advanced usage | ||
| Visit [PostCSS] to find out more about [`rule`](https://github.com/postcss/postcss/blob/master/API.md#rule-node) node. | ||
| Visit [PostCSS] to find out more about [`rule`](https://github.com/postcss/postcss/blob/master/docs/api.md#rule-node) node. | ||
@@ -322,3 +368,3 @@ ##### **Example** | ||
| Visit [PostCSS] to find out more about [`decl`](https://github.com/postcss/postcss/blob/master/API.md#declaration-node) node. | ||
| Visit [PostCSS] to find out more about [`decl`](https://github.com/postcss/postcss/blob/master/docs/api.md#declaration-node) node. | ||
@@ -372,2 +418,5 @@ ##### **Example** | ||
| ## Release Notes | ||
| * **v1.6.2** [21 Jul. 2015] | ||
| * CLI: fix loading custom configuration file manually via the --config flag. **Thanks @KeyKaKiTO** | ||
| * **v1.6.1** [17 Mar. 2015] | ||
@@ -374,0 +423,0 @@ * Fixed flipping units having more than 1 digit before the decimal point. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.11%
111799
- Lines of code
- increased by0.05%
2165
- Number of lines in readme file
- increased by10.58%
512
No dependency changes