bidirect CSS, RTL/LTR CSS code

Make CSS Bidirectional Online

Copy or write your CSS code in the input CSS and press convert to get bidirectoional CSS code.
Example: padding-left: 1rem; padding-inline-start: 1rem; or padding-inline-end: 1rem;

Using BiCSS tool, your right-to-left (RTL), or left-to-right (LTR) CSS code will be able to handle both directions using our transformer method. In fact, BiCSS converter tool, transforms CSS rules with left or right properies/values to appropriate CSS rules relating start and end, such as padding-inline or margin-block.

BiCSS CSS tool converts the following CSS rules: magin (ex., -left or with four values), padding (ex., -right or with four values), outline, border (ex., -left or with four values), text-algin (ex., :right). As a result, such following rules will be generated: margin-inline-start: 2rem;, padding-inline: 2rem; padding-block: 10px;, or text-align: start;.

Input CSS

Convert Options:

Result
Cautions

Please note before using your bidirection CSS code:

Please note that this tool assumes writing-mode has its default value, like horizontal-tb. The comments of your code will be eliminated. The converted code is not guaranteed to work 100% correctly. Also, be careful about especial characters entering as input.