Skip to content
This repository

CSS should support RTL locales #1066

Open
ozten opened this Issue February 07, 2012 · 5 comments

5 participants

Austin King Crystal Beasley Shane Tomlinson jbonacci Zach Carter
Austin King
Owner

With Issue 1065, we have our first right to left (RTL) language 'he'.

Most languages are left to right (LTR) such as English. On RTL locales, we want the entire page design to be mirrored.

We put the following in the HTML to trigger the CSS:

<html lang='he' dir='rtl'>

To see how this works, compare https://addons.mozilla.org/en-US/firefox/ to https://addons.mozilla.org/h/firefox/

Notice the entire page layout is flipped. en-US has Secondary Navigation on the left, he has it on the right... etc.

We need additional CSS code to supports RTL layout.

@ozten is happy to mentor new contributors in fixing this issue.

Shane Tomlinson
Collaborator

@skinny97214 - What do you think about removing the left to right arrow slide? It really offers no benefit to the user besides a bit of eye candy.

Crystal Beasley
Collaborator

I'd like to keep it, especially if we can use it in place of a spinner to indicate progress. Can we reverse it for RTL locales?

Shane Tomlinson
Collaborator

@skinny97214 - we don't actually use it to indicate progress - it is only used to indicate "the process is done" - which delays the user signing in by a second or so. The slide effect cannot be done during key generation (which is the slow part that comes before it, for which we show a wait screen) because key generation is synchronous and does give up any processing time to do any UI updates.

jbonacci
Collaborator

Yes. Just verified this now that Hebrew is in Stage.
Text and fields align as expected (right-justified).
But, the animation runs RTL which causes a pretty ugly sign_in dialog (albeit very temporarily).

Zach Carter
Owner

This is a more general case of #873

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.