Stack Overflow
Stack Overflow

Questions tagged [rtlcss]

RTLCSS is a framework for converting LTR CSS to RTL.

RTLCSS is a framework for converting LTR CSS to RTL. The framework supports a wide-range of CSS properties and processing directives. Its is highly extensible as you can inject your own processing directives.

  • Supported CSS Properties (a-z)

    background background-image background-position background-position-x border-bottom-left-radius border-bottom-right-radius border-color border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top-left-radius border-top-right-radius border-width box-shadow clear cursor direction float left margin margin-left margin-right padding padding-left padding-right right text-align text-shadow transform transform-origin transition transition-property

  • Supported Processing Directives

    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

    • Rule Level: ignore, rename.
    • Declaration Level: ignore, replace, append, prepend, insert.

Fore more details view the library documentation on github.

Resources:

21 questions
8
votes
3 answers

Generate RTL CSS file in create-react-app and switch between them based on change in state

I'm using create-react-app for a multi-language project. I want to use some library like "cssJanus" or "rtlcss" to convert the Sass generated CSS file into a separate file and then use that newly generated file when I switch to another…
Ruby
  • 2,207
  • 12
  • 42
  • 71
6
votes
0 answers

How to use Bootstrap 5 RTL with angular cli

Bootstrap 5 has RTL support as they said in their document they use RTLCSS for handling RTL styles. In order to integrate RTLCSS with angular, I used ngx-build-plus and custom-webpack plugin to inject RTLCSS webpack rule into angular however when I…
Daniel.V
  • 2,322
  • 7
  • 28
  • 58
5
votes
2 answers

How to enable bootstrap rtl in scss

I coded based on the documents in this link. But my code doesn't work in SCSS. this is my main.scss. @import "node_modules/bootstrap/scss/bootstrap"; body { background: red #{"/* rtl:blue */"}; } and this is my html
Morteza Negahi
  • 3,305
  • 8
  • 24
  • 42
3
votes
1 answer

Customise RTLCSS config for VS Web Essentials 2013

Visual Studio Web Essentials has the ability to auto-generate a Right-To-Left variant for CSS files. This will automatically change CSS properties such as padding-left to padding-right. However it also does other things such as changing file names…
Curtis
  • 101,612
  • 66
  • 270
  • 352
3
votes
2 answers

SASS: preserve comment position

I recently decided to use RTLCSS to make RTL versions of my stylesheetes. Now i'm trying to use Declaration-level directives to tell RTLCSS what to do, but SASS compiles my comments to next line. For example, font-size: 14px/*rtl:15px*/; Compiles…
MayThrow
  • 2,159
  • 4
  • 24
  • 38
2
votes
0 answers

How to choose between rtl css file generated by rtl css and ltr css

We're building a website for a customer and the customer demands both an english and an arabic version of the website. We're using infernojs@7 with webpack@4 and we're bundling css using webpack as well. We're applying…
niceman
  • 2,653
  • 29
  • 57
2
votes
0 answers

I am using Angular 6 and need to convert all scss files to rtl-css files

I have used angular builders and created custom webpack.config.js I am trying to use webpack-rtl-plugin. Following are my custom-webpack.config.js module.export = { entry: { app: path.join(__dirname, './src/main.ts') }, output: { …
Oliver
  • 21
  • 2
2
votes
1 answer

can't covert css to rtl using javascript library

I am beginner in JavaScript and I am trying to use rtlcss library to conver css files from ltr to rtl. I am using this code but it displays 2 errors: Uncaught SyntaxError: Illegal return statement Uncaught ReferenceError: require is not defined My…
Dot Freelancer
  • 4,083
  • 3
  • 28
  • 50
1
vote
0 answers

How to use postcss RTL in nuxt 3 except of tailwindcss

i use nuxt 3.0.0 with tailwindcss ^3.2.4 i have element-plus also, now i want use postcss-rtl just for element-plus and no for tailwindd or any other css files. help please. nuxt.config.ts: import { defineNuxtConfig } from 'nuxt/config' //…
Amir Hosein Sharaifi
  • 11
  • 1
1
vote
1 answer

Generate two different index files for RTL and LTR support using Webpack

I am trying to have two different style files in my react application to support both RTL and LTR directions. Therefore, I am using RTLCSS and its Webpack plugin to generate two different files: (myfile.chunk.css and myfile.chunk.rtl.css). However,…
Hadi Ranjbar
  • 1,692
  • 4
  • 21
  • 44
1
vote
1 answer

Converting style-encapsulated CSS to RTL in Angular

We have a rather large project, with almost all of our CSS inside components. We need to generate RTL styles for the widget, and have attempted to use postcss-rtl. When we've attempted to do so, the [dir] attribute prefix that postcss-rtl adds is…
Kwesi
  • 607
  • 1
  • 9
  • 21
1
vote
2 answers

How to use rtlcss node package with twitter-bootstrap on Laravel?

It may sound stupid but I've recently started working with laravel mix for compiling scss and js files. But I can't understand something. I want to use rtlcss npm to make the twitter-bootstrap rtl. This is the default app.scss asset of Laravel //…
Arman Momeni
  • 650
  • 1
  • 9
  • 27
0
votes
0 answers

how to integrate rtl css in angular in a way that we can load style.css and style.rtl.css alternatively as we change lang from UI

i want to generate css or scss for already existing code/project's custom css/scss as separate file and want to switch b/w normal and rtl css through UI interaction. I'm using rtlcss node package and following this gist for generating css at build…
Taimoor Qureshi
  • 620
  • 4
  • 14
0
votes
1 answer

Separate RTL css file using postcss-loader and RTLCSS in webpack

How can I create a separate RTL css file using postcss-loader and rtlcss? I added to postcss.config.js but I can't find any information about defining the output file. I would like to use {name}.rtl.{ext} format, just don't know how to define it…
levipadre
  • 569
  • 7
  • 31
0
votes
1 answer

RTL support in bootstrap

Bootstrap helps to target both rtl and ltr directions by giving classes like ms-auto, me-auto which translate to corresponding margin-left and margin-right based on the direction used. I am trying to use bootstrap for my project to support both rtl…
saivishnu tammineni
  • 1,092
  • 7
  • 14
1
2