does semantic ui framework support rtl languages?

Question

how to make semantic ui framework "right-to-left" supported ? is there anyway to make it rtl support in installing steps or not ?

Answer 1

first: navigate to your project root and then fire: npm install semantic-ui --save and wait for all done.

second: edit semantic.json file (located in project root) and change "rtl": false to "rtl": true

third: navigate to semantic dir(cd semantic) and fire: gulp build and then gulp watch.

Answer 2

Or if you where not installing it by npm and gulp, you may get the rtl versions from RTLCSS website. They also provide a cdn, or you can download the css and js file and use them in your sources.

Answer 3

You can enable RTL support under the following scenarios:

1. Fresh Installation

go to the document root of your project and install semantic-ui through npm

npm install semantic-ui --save

modify semantic.json file in document root to enable right to left support as following:

"rtl": true

in your terminal change directory to semantic directory

cd semantic/

run the following gulp task to build all files and save it to destination folder

gulp build

gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder, now a very important final step is to reference the RTL version of semantic-ui css file in your index.html or web page as following:

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">

---

2. Existing Installation

in your terminal change directory to semantic directory

cd semantic/

Clean the destination folder using the gulp task provided by semantic-ui framework

gulp clean

modify semantic.json file in document root to enable right to left support as following:

"rtl": true

run the following gulp task to build all files and save it to destination folder

gulp build

gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder.

Now you need to replace the reference in your html page from

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.css">

to

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">