Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add RTL (right to left) support #6409

Closed
wants to merge 1 commit into from
Closed

Conversation

@malekpour
Copy link

malekpour commented Dec 27, 2012

I have added right to left support by adding extra CSS rules inside .rtl classes. This method does not affect original functionality at all, does not need additional CSS file and will be easy maintainable.
Changes have been made inside elements in less files like the following sample block:

.sample {
  margin-left: 2px;
  .rtl & {
    margin-left: auto;
    margin-right: 2px;
  }
}

Also will supports dynamic layout change by adding or removing '.rtl' class from any container like body.
example:

function switchLayout() {
  var $body = $(document.body);
  if ($body.hasClass('rtl')) {
    $body.removeClass('rtl');
  } else {
    $body.addClass('rtl');
  }
}
@blakeembrey

This comment has been minimized.

Copy link
Contributor

blakeembrey commented Dec 28, 2012

@malekpour Don't know anything about rtl, so ignore me if this isn't correct - but should you do the same styles based on the dir attribute instead of CSS? E.g. [dir="rtl"]

@malekpour

This comment has been minimized.

Copy link
Author

malekpour commented Dec 28, 2012

@blakeembrey You are right, [dir="rtl"] works, but usually I am using .rtl instead. It takes less space and is pure CSS way. All browsers support class selectors, but even IE8 does not fully support attribute selectors.

HTML 5 standard strongly recommends using dir attribute for right to left documents. The following code is compatible with HTML 5 standard meanwhile supported by all major browsers.

<body dir="rtl" class="rtl">
@mdo

This comment has been minimized.

Copy link
Member

mdo commented Dec 28, 2012

I'm glad folks are stepping up to handle RTL—it's definitely something folks have started asking for again, so thanks for giving it a go.

I think I'd actually like to see this as a separate file, or perhaps opt-in via a Less variable. I also think this kind of addition would be best served with 3.0 rather than 2.3 as the 3.0 release drops IE7 (so no RTL hacks), drops several components, and refactors a good deal of other tidbits.

Best course of action would be to RTL one component at a time I think, in a separate rtl.less file, and merge those into the 3.0.0-wip branch as we go. I'd also love a docs section stubbed out on how to include RTL support in any Bootsrapped project (either compiling another file, changing a variable, or customizing it via the Customizer). Links to resources and further reading would also be massively beneficial to folks.

If you're up for that approach, lets start with a super simple component like breadcrumbs or progress bars (components which will likely not change at all in 3.0).

@mdo mdo closed this Dec 28, 2012
@malekpour

This comment has been minimized.

Copy link
Author

malekpour commented Dec 28, 2012

@mdo I would like to contribute to this great project and I think RTL support is necessary for it too. Strong RTL support will open a window to millions of people to see bootstrap powered websites in their languages. Adding RTL support is not so difficult, but it is very sensitive. I was involved in many multilingual projects and I hope my expediences help.

Fortunately I have enough free time during this long weekend, so I will be able to create a skeleton for RTL support and its auxiliary documentation pages based on branch 3.0.0-wip.

@mudrekk

This comment has been minimized.

Copy link

mudrekk commented Dec 28, 2012

I convert Bootstarp 2.x to RTL in two steps:

1- I use this script cssJanus: http://cssjanus.commoner.com/

2- then add dir="rtl" to body tag.

@mhemesath

This comment has been minimized.

Copy link

mhemesath commented Dec 28, 2012

We use the same approach as @mudrekk, but use R2 by @ded. Our scenario is that we have sites that are primarily built for LTR, but need to support RTL languages. To accomplish this, we run our stylesheets through R2 to generate RTL compressed, minified versions of the LTR stylesheets.

I think this use case is slightly different for anyone that wants to build a site in RTL, which may or may not have a LTR version. Just as we prefer to work in LTR, they are going to want to work in RTL without running it through a processor such as R2 or cssJanus.

I think it makes sense to make built in RTL styles for bootstrap provided they can be optionally included. From my personal experience I think it will be a lot cleaner to keep them in a separate file, at least until you can rely on the :dir() pseudo selector.

Having said this, I will probably not use the bootstrap packaged RTL styles and will likely continue using R2 as I need all my styles to support RTL, not just bootstrap.

@malekpour

This comment has been minimized.

Copy link
Author

malekpour commented Dec 28, 2012

R2 and cssJanus are good post build solutions to add RTL support. Their results are not bug free for complicated and single page apps and sometimes you need to manually modify the generated code to get a perfect result.

@mudrekk LESS level RTL support is the best way we can contribute to the bootstrap project and as far as i know CSS level changes are not acceptable. Adding and maintaining rtl.less file will allow us to provide a tested and optional RTL support with predictable results.

@mhemesath I really like the idea of :dir() pseudo selector and hope to see CSS4 implementations soon.

@IslamAmeen

This comment has been minimized.

Copy link

IslamAmeen commented Apr 4, 2013

As a heavy less & bootstrap user, I believe using mixins with guards is the best solution
And using these mixins instead of the default styles

For example:
in mixins.less
.text-align(@text-direction) when (@dir = left) { text-align: left; }

.text-align(@text-direction) when (@dir = right) { text-align: right; }

in bootstrap less files:
use .text-align(left);
instead of text-align: left;

taking into consideration that we have 2 files, ltr.less & rtl.less
each one sets a value for @dir variable, and then imports bootstrap.less

This idea provides clean non redundant code, & gives RTL designers the ability to use the less code with no required modifications

Actually I found a guy implementing such idea http://anasnakawa.github.com/bi-app-less/

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jul 8, 2013

X-Ref: #175

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.