Does semantic ui support rtl languages?
You can enable RTL support in the following scenarios:
1. Fresh installation
go to document root of your project and install semantics-ui via npm
npm install semantic-ui --save
modify the semantic.json file in the document root to include right-to-left support as shown below:
"rtl": true
in the terminal changes directory to the semantic directory
cd semantic /
run the following gulp task to collect all files and save them in destination folder
gulp build
gulp will automatically detect RTL support and build RTL version of css files and save them in dist folder, now a very important last step is to link to RTL version of semantic-ui css file in your index.html or web page like this:
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
2. Existing installation
in the terminal changes directory to the semantic directory
cd semantic /
Clean up destination folder with gulp task provided with semantic ui framework
gulp clean
modify the semantic.json file in the document root to include right-to-left support as shown below:
"rtl": true
run the following gulp task to collect all files and save them in destination folder
gulp build
gulp will automatically detect RTL support and build the RTL version of the css files and save them in the dist folder.
Now you need to replace the link in the html page with
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.css">
to
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
source to share
first: go to your project root and then fire: npm install semantic-ui --save and wait for everything to finish.
second: edit the semantic.json file (located in the project root) and change "rtl": false to "rtl": true
third: go to semantic dir (cd semantic) and fire: gulp build and then gulp watch .
Best wishes Shahab Rabiya
source to share