Hi folks,
I am currently creating an app using the advanced template. The application will be using both ltr and rtl languages.
Aside from the obvious…
<html lang="ar-sa" dir="rtl">
… there are other aspects to this I need to look at.
I am developing my frontend using a Bootstrap/SASS/Gulp toolchain. Not entirely sure where this will lead me, but a few hours ago I started adding conditional overrides to my navbar.scss file to flip things over…
html[dir='rtl'] {
.navbar-header {@media (min-width: $grid-float-breakpoint) {float: right;}}
.navbar-brand {float: right;}
.navbar-toggle {float: left; margin-right: 0; margin-left: 15px;}
.navbar-nav {
@media (max-width: $grid-float-breakpoint-max) {.open .dropdown-menu {float: none;}}
@media (min-width: $grid-float-breakpoint) {
> li {float: right;}
float: left !important;
}
}
.dropdown-menu {
right: auto;
left: 0;
}
}
To my surprise, this was actually quick and painless and with just the code above I seem to have been able to "correct" the navbar. BTW please note that this code was done to a version of the navbar.scss file that had already been stripped out so only the very minimum I needed for a .navbar-right element remained.
So my intention is simply to continue doing this - add the CSS required to the end of each individual .scss file to make the elements styled by that file rtl compatible.
If anyone has any criticism of that way of doing it, please let me know.
My final issue is with modifying the HTML dir selector shown above. To the best of my knowledge, yii\web\Application contains no property for text orientation. What would be the best way to approach this? Extend yii\web\Application and add Yii::$app->language-orientation as a property? Store it as a parameter?
BTW I should mention I already have a table in the database that stores both the languages and their text orientations and I will eventually add cookie functionality to handle the orientation settings once I complete a widget for language selection.