bootstrap-rtl icon indicating copy to clipboard operation
bootstrap-rtl copied to clipboard

Published 20 hours ago • verified publisher icon morteza

Flipped rendering for *-right and *-left

Open morteza opened this issue 10 years ago • 11 comments

Semantics for right and left are not changed in bootstrap-rtl theme, and you need to add a custom .flip classes to a .pull-right and .pull-left entity if it needs to be rendered from right to left (instead of left to right). It would be convenient to create additional css file (e.g. bootstrap-flipped.css) so this flipping process could be automated without the .flip class.

However, due to the consistency of meanings of the words, flipping would never happen to the .pull-right and .pull-left in bootstrap-rtl.css file.

morteza avatar Jan 21 '15 17:01 morteza

good idea

LyoNick avatar Jan 21 '15 19:01 LyoNick

Hey, I have a web site that requires both support for RTL/LTR, If possible, can anyone give some guides how to flip dynamically between the two ?

Thanks.

asaf avatar May 05 '15 17:05 asaf

You can do it very easily. I do not know what is your server side language but the idea is simple. Always load bootstrap.css, if your site is in RTL mode, add bootstrap-rtl css

<link href="/styles/bootstrap.min.css" rel="stylesheet" type="text/css"  media="all" />
      <If the site is in RTL mode>
           <link href="/styles/bootstrap-rtl.min.css" rel="stylesheet"  type="text/css" media="all" />
     </endif>

afattahi54 avatar May 06 '15 08:05 afattahi54

@afattahi54 So I guess the answer is, if rtl.css is loaded, I can't switch back to LTR, right?

asaf avatar May 06 '15 09:05 asaf

Yes you can? If the page is reloaded from server you can only load bootstrap.css, if you want to switch page direction, with javascript you can remove the bootstrap-rtl.css with javascript as mentioned in http://stackoverflow.com/questions/24087152/remove-css-file-with-javascript

afattahi54 avatar May 06 '15 09:05 afattahi54

@asaf this is my way. Adding to html dir="rtl" or "ltr" and then check by js

    if(document.getElementsByTagName('html')[0].dir != "rtl"){
        document.write('<link href="bootstrap.min.css" rel="stylesheet">');
    } else {
        document.write('<link href="bootstrap-rtl.min.css" rel="stylesheet">');
    }

AlexYudaev avatar May 06 '15 09:05 AlexYudaev

@AlexYudaev I belive the bootstrap.min.css must always be loaded. OR the bootstrap-rtl should have bootstrap.css on top of it

afattahi54 avatar May 06 '15 09:05 afattahi54

@afattahi54 you right. sorry, in my projects i just include bootstrap to bootstrap-rtl.

AlexYudaev avatar May 06 '15 10:05 AlexYudaev

I use AngularJS, so use ng-if to pull in the relevant file:

<link rel="stylesheet" href="bower_components/bootstrap-rtl/dist/css/bootstrap-rtl.css" ng-if="getCurrentLanguage().rtl"/>

I also use an ng-class on the body to add an rtl class:

<body ng-class="{rtl:getCurrentLanguage().rtl}">

I then use css to set the text direction and override bootstrap classes rather than going around adding .flip mainually:

.rtl {
    direction: rtl;
}

.rtl .pull-right {
    float: left !important;
}

.rtl .pull-left {
    float: right !important;
}

.rtl .dropdown-menu-right {
    left:  0;
    right: auto;
}

.rtl .dropdown-menu-left {
    left:  auto;
    right: 0;
}

willi1s avatar May 06 '15 11:05 willi1s

Thanks guys, I just wanted to ensure that while the rtl css loaded there's no way to revert back to LTR,

@willi1s Nice trick with the ng-if, Shame on Ember.js not having anything that completes with param level directives.

Thanks!

asaf avatar May 06 '15 17:05 asaf

Though I agree this is dirty method, I am able to fix this issue with my asp.net MVC5 project with the help of Resource files. I added a resource setting with blank value inside default one and with value that is pointing to bootstrap-rtl.min.css. Then I added this into @Html.Raw which would print the css link tag either empty or tag.

Resource.resx RtlStyleSheet : ""

Resource.ar.resx RtlStyleSheet: <link rel='stylesheet' href='Content/bootstrap-rtl.min.css' />

Index.html

<head>
@Html.Raw(Resources.Resouce.RtlStyleSheet)
</head>

Hope this helps asp.net mvc guys.

kirangottumukkala avatar Nov 29 '16 13:11 kirangottumukkala