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

RTL Support #175

Closed
husainshabbir opened this issue Sep 8, 2011 · 32 comments
Closed

RTL Support #175

husainshabbir opened this issue Sep 8, 2011 · 32 comments
Labels

Comments

@husainshabbir
Copy link

Would be great to have support for right-to-left languages.

@mdo
Copy link
Member

mdo commented Sep 8, 2011

Would love to hear more about the strategy that goes into this. I'd love to have this part of the library :).

@fat
Copy link
Member

fat commented Sep 8, 2011

Actually you could probably just use @ded's awesome rtl tool. https://github.com/ded/R2

@ded
Copy link

ded commented Sep 8, 2011

and if you're not into Node, it has been ported to Ruby as a gem

@husainshabbir
Copy link
Author

And for those who are not into Ruby and Node, would it be a good idea for bootstrap to provide a rtl.less & rtl.css file that could be referenced when needed?

@ded
Copy link

ded commented Sep 9, 2011

well, technically those crazy bootstrap folk can vendor R2 and add a simple make task that builds another file. it's as easy as

$ r2 bootstrap.css -o bootstrap.rtl.css

@fat
Copy link
Member

fat commented Sep 9, 2011

Yeah, that makes sense. I'll try to get a rtl version in for 1.3

@fat
Copy link
Member

fat commented Sep 10, 2011

sadly r2 can't quite handle our css, so this definitely isn't going to be happening for 1.3.

Bootstrap is too huge for a manual solution though -- i might try to send some pull requests to r2 at some point and see if i can get it working a bit better for us.

@ded
Copy link

ded commented Sep 11, 2011

yeah, the major quirk with R2 at the moment is that it isn't handling nested [@]media queries.

@media (min-width:500px) {
  p {
    color: red
  }
}

this is a known issue and i've been toying around with a fix for it

@fat
Copy link
Member

fat commented Sep 11, 2011

Well, we don't have any media query stuff, but i only really spent like 10 minutes trying to get it working :P

i think there was some weird stuff where we had lopsided margins and they weren't getting reversed, so things stacked in odd ways and text wasn't aligned right. i dunno. No big deal

@ded
Copy link

ded commented Sep 12, 2011

you need <body dir="rtl"> in addition to R2

@fat
Copy link
Member

fat commented Sep 12, 2011

oooooooooooooo i'll try that! thanks sir

@okhayat
Copy link

okhayat commented Nov 20, 2011

My first attempt to do this failed. Mainly because of the combined declarations of padding and margin that specify three values for top, right, bottom but not left, like:
padding: 0 3px 2px;
I couldn't figure out what the new right margin/padding should be, and setting it to zero screwed up the layout.
If any one can help with this, I can get it done

@ded
Copy link

ded commented Nov 21, 2011

are you able to see what it output? padding: 0 3px 2px; is technically padding: 0 3px 2px 3px -- which when reversed is the same thing

@ded
Copy link

ded commented Nov 21, 2011

i just confirmed this and there's no bug in R2 with this.
r2 preview

padding: 0 3px 2px is no different when flipped

@okhayat
Copy link

okhayat commented Nov 21, 2011

Oh, that's a great notice :-) Never new this before!

I will redo the test again after updating the files.

Thanks,

On Monday, November 21, 2011, Dustin Diaz <
reply@reply.github.com>
wrote:

are you able to see what it output? padding: 0 3px 2px; is technically
padding: 0 3px 2px 3px -- which when reversed is the same thing


Reply to this email directly or view it on GitHub:
#175 (comment)

@okhayat
Copy link

okhayat commented Nov 21, 2011

Done. Please check it here:
https://github.com/okhayat/bootstrap/commit/86d8bae9e1ff6f38a2c2272a60e36ac1bef8b477
The example pages are now in Arabic too so you can test them out.

@ded
Copy link

ded commented Nov 23, 2011

congrats

@fat
Copy link
Member

fat commented Dec 3, 2011

We'll be having media queries in 2.0 - which this still won't work for right?

@okhayat
Copy link

okhayat commented Dec 3, 2011

Sorry, but I don't understand your question.

@ded
Copy link

ded commented Dec 8, 2011

i think that question was for me. in which case, the answer is no, and in the meantime, the only other way that i know of right now, is to use Google's CSS Janus (an even older project I worked on)
http://cssjanus.commoner.com/

@mdo
Copy link
Member

mdo commented Jan 7, 2012

Why won't this work with media queries?

Do we close this issue out without supporting it, or is there a way we can do it?

@fat
Copy link
Member

fat commented Jan 7, 2012

We have to do it manually was just my point. I think it's still worth doing, so I wouldn't close this out yet.

@gagarine
Copy link

gagarine commented Jan 9, 2012

To generate, can we remove the @media, use the r2 tools and put them back?

Or fix https://github.com/ded/R2 so it works with media query.

@fat
Copy link
Member

fat commented Jan 22, 2012

I think for now we're going to leave r2l support be the responsibility of the developer. In the future maybe we'll try to offer some build tools to make this easier - but it's not on the immediate roadmap.

@AbdullahDiaa
Copy link

here's a recently released FULL RTL copy of bootstrap including JS/glyphicons
https://github.com/AbdullahDiaa/Bootstrap-RTL

@daif
Copy link

daif commented Dec 18, 2012

Try this tool http://daif.net/script/flipcss.phps

@louy
Copy link

louy commented Jan 12, 2013

I think you should reconsider RTL support... There's no convenient RTLed version of bootstrap out there!

@BenjaminRH
Copy link

Second this -- it's very important for several projects I'll be working on.

@mhf-ir
Copy link

mhf-ir commented Feb 26, 2013

@BenjaminRH We still waiting for that. ty

@marlenesco
Copy link

R2 win, simply great: https://github.com/ded/R2

@BYK
Copy link

BYK commented Jan 19, 2014

Hey there, R2 has become quite a lot powerful including support for skipping certain rules and @media rules support. Still a no go?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

14 participants