We used the idea of overriding classes and rules on
to produce RTL folder
sass-rtl. As you will see shortly we copied sass folder
as is and provide another folder sass-rtl for overriding classes and tags
that need a directional modification to support RTL.
We used Bootstrap reverse Plugin for overriding core bootstrap classes to support Right to Left directional behavior instead of left to right.
We copied and overrode from
./web/assets/src/sass only classes that need to be
flipped to support RTL and put them in
So we should reference both of them for the same part to support RTL as we’ll see later.
./web/assets/src/sass/common/variables.scss file is still the central main variables file for LTR and RTL features.
main-rtl.scss and file is the overriding for
main.scss and should be referenced after
main.scss in your theme RTL file.
For plugins we modified and add RTL modifications to custom LTR SASS version for the plugin, because most Plugin RTL modification is a little and normally should be part of the plugin style itself. keep in mind that most plugins support RTL by default.
Custom plugin RTL style rules are separated in
but for only Datatables plugin
because Datatables plugin does not provide support for RTL pages so we overrode some of its rules and classes in these files:
The following is a high level folder structures of our
./JavaTMP/JavaTMP-App-Starter +---web (Web Application Context Root Folder) +---assets (Specific Template JS,CSS,fonts, and images folders and files) +---src (Source folder of the JS/CSS files) +---sass (Default SASS' SCSS source folders) +---sass-rtl (RTL specific classes and rules)
./web/assets/src/sass-rtl/main-rtl.scssfile to reference all overriding RTL files. Which are:
./web/assets/src/sass-rtl/themes-rtlfolder which will contain the rtl themes of
./web/assets/src/sass/themesfolder create a similar one in
./web/assets/src/sass-rtl/themes-rtlwith adding suffix
-rtlto its name
./web/assets/src/sass-rtl/themes-rtlreference the original LTR version of it in
./web/assets/src/sass/themesand the above
./web/assets/src/sass-rtl/main-rtl.scss. For example, The contents of
@import "../../sass/themes/javatmp-default.scss"; @import "../main-rtl.scss";
It is a design decision to include main-rtl.scss in each LTR theme instead of referencing it in html after the original one.
Because we can override any variables or do any thing in the future and now we can reference only one file
Update the first step in gulp’s task
generate-dist by replacing
./web/assets/src/sass-rtl/themes-rtl/javatmp-*.scss. Because RTL themes include LTR ones as described above.
We will not repeat the description of gulp task
generate-dist here again or how we manage front-end resource using node’s npm and gulp, but for more information read the following pages:
"gulp generate-dist". The main different output here are mainly the generated css files as now become
index.jspfile by using
javatmp-default.min.cssand NOT after it.
index.jspfile by setting
index.jspfile by flipping textfield’s clear button to left instead of right for sidebar search.
javatmp.initinvocation by setting
package.jsonby adding jQuery-contextmenuRTL plugin to
package.jsondependencies. Because jQuery-contextmenu is not support RTL by default and this extension will make it supported.
gulpfile.jsby adding above
jQuery-contextmenuRTLplugin reference to
srcobject to fetch it and merge it with plugins js.
isRTL: true,and might reverse some header buttons.
"opens": "right"and use custom locale object.
dir: "rtl",or globally by
rtl: true,and override position callback function. (remember that we use a special jQuery-contextMenuRtl plugin for RTL support).
The following plugins need modifications to support RTL:
it is better to check your icons for LTR/RTL direction. so you could create
a general icon and switch it in rtl version. also spinning might want to be
round to left instead of clockwise
You might want the icons to animation with respect to left instead of right in RTL version.
the cursor icons should be switch in RTL version.
should start from right and end at left in RTL version.
should apply rtl options to work properly.
should apply rtl plugin and options to work properly
should apply rtl option and make it shown on top left instead of top right in RTL version.
for each locale you should reference its specific js file or include moment all locales js file
apply rtl custom options and could override locale values.
apply rtl direction option
apply rtl option and include locale file
apply rtl option and include locale file
add custom localization file for each desire language and locale.
For more details information about custom plugins modifications and usages to support RTL and internationalization features kindly see our Front-end Plugins And Frameworks documentation page.