search

morteza / bootstrap-rtl

RTL Theme for Bootstrap v3.x
The Unlicense
955 stars 419 forks source link

Flipped rendering for *-right and *-left #57

Open morteza opened 9 years ago

morteza commented 9 years ago

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.

LyoNick commented 9 years ago

good idea

asaf commented 9 years ago

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.

afattahi54 commented 9 years ago

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>
asaf commented 9 years ago

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

afattahi54 commented 9 years ago

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

AlexYudaev commented 9 years ago

@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">');
    }
afattahi54 commented 9 years ago

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

AlexYudaev commented 9 years ago

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

willi1s commented 9 years ago

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;
}
asaf commented 9 years ago

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!

kirangottumukkala commented 7 years ago

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.