RTL i18n/l10n support #176

aaronjudd · 2014-10-02T05:56:31Z

RTL (right to left) support in internationalization / localizations.

Original discussion/proposal from @danielgindi

Now I want to start working on RTL support...
Which means basically two things:
1. Adding an "rtl" value in the localizations
2. CSS adjustments, base on that rtl attribute

Now Reaction has themes, but I'm guessing a theme is generic and not language-specific, and so a theme must contain the support for rtl languages,

I can think of two ways to do this:
1. Additional CSS files that will load when there's an rtl language loaded
2. Conditionally adding an "rtl" class on the body or html tag, and then having CSS adjustments based on that class

What do you think?
Any other idea?

The text was updated successfully, but these errors were encountered:

aldeed · 2014-10-02T15:25:10Z

I have no experience with RTL on web, but I know that tricky situations can arise with formatting. One simple thing we can do is add/remove rtl class from body element, allowing themes to provide overrides like this:

.rtl button {}

But it's likely there will also be cases where actual HTML elements will need to be reconfigured, which means template overrides. So a theme would also have to have the option to define some override templates that render different markup depending on rtl boolean from currently selected language.

Implementation ideas:

Add rtl boolean in localization files.
Define reactive method, ReactionCore.isRTL(), which reacts whenever locale changes.
Use method to add/remove body class: class="{{#if ReactionCore.isRTL}}rtl{{/if}}"
Theme packages can define CSS and override templates to handle the rest.

danielgindi · 2014-10-02T16:03:25Z

So you theoretically support option #2...
Another thing is that when we use 3rd party UI libraries, or write UI code in JS, we need to make sure to have it support RTL. Many times it involves detecting "float:right" or "direction:rtl" on a parent element to determine flow direction.
I have experience with RTL-enabled UI so I can step in on that

aaronjudd · 2014-11-07T16:20:33Z

@danielgindi @aldeed now that we have the pricing localization in as well, what do you think remains here? Do either of you want to take a whack at this?

danielgindi · 2015-01-08T17:33:09Z

Hey guys!
The load on me is balanced soon, so I'm stepping in to take care of this.
I'll be making sure that there's support for RTL from thr infrastructure, and that UI is fully RTLed too.
I'll keep you posted :)

aaronjudd · 2015-01-08T18:06:36Z

@danielgindi sounds great. I think we've got most of the i18n and currency issues working fairly well. Looking forward to seeing what you come up with.

danielgindi · 2015-01-19T17:35:46Z

Yay! It will be ready in a few days :)

danielgindi · 2015-02-12T17:55:38Z

Well it takes a little more time than I thought, as there is a big theme to adjust, and as I got engaged in the past month so I have my hands full.
We'll see Reaction in rtl soon!

aaronjudd · 2015-02-13T17:29:31Z

👍 Looking forward to it. (and doesn't it always take more time than originally thought?)

danielgindi · 2015-02-19T13:45:52Z

https://github.com/reactioncommerce/reaction-core-theme/pull/10
https://github.com/reactioncommerce/reaction-core/pull/97

We're ready.

:-)

aaronjudd · 2015-02-19T18:25:04Z

Looking pretty darn good. However, I'm noticing one glitch. When changing from RTL to LTR not everything is updating for me (it does on refresh though).

Here's what it looks like after it switching back to LTR

I'm merging this into reactioncommerce/reaction-core#96. I'll take a look and see what's going on there.

danielgindi · 2015-02-19T22:58:38Z

Man that's weird!
But after playing with it a little bit - it seems like a WebKit bug with the special columns css. It does not re-layout internally.
We can use the standard hacks to trigger a WebKit relayout, file a bugreport, or do both :-)

aaronjudd · 2015-02-19T23:50:30Z

re: the pr comments, I can update the docs after everything look solid.

Was there a particular reason you used rtl.less as a separate import routine in the build configuration?

In any case, I've updated to use server/buildtools/module-definitions.js and added to the mixins.

Didn't see any difference in behavior (and I think that's how it should be)... but was wondering if you'd encountered some issue I'm not seeing. Still - it looks like it's the same functionally as before ( I just merged my changes into development, if you want to take a look.

aaronjudd · 2015-02-19T23:54:18Z

Out of curiosity, does the site load in Hebrew by default for you (like it probably should) or English? I am thinking I had tested that locale detection, but at the moment mine keeps defaulting to en-us so I'm not sure how I tested it before. I had some chrome extension I used, but deleted it and now can't find it..

danielgindi · 2015-02-20T05:23:17Z

Well I just thought it's natural to put it where the original bootstrap is,
but the end result is the same!

danielgindi · 2015-02-20T05:23:44Z

I did have to specify Hebrew, but my Chrome is in English, and Chrome does not take the system locale for that...

danielgindi · 2015-02-20T05:24:15Z

Something you did in that last PR broke the language menu - it does not load for me

aaronjudd · 2015-02-20T15:51:36Z

did you do meteor reset? There's new data in the Shops.json that needs to load

danielgindi · 2015-02-21T18:00:16Z

Yes!

aaronjudd · 2015-02-22T15:29:47Z

@danielgindi does that mean it worked, or yes, like "duh, I did that" (and it still doesn't work)

danielgindi · 2015-02-22T16:11:45Z

Oh yes!!! ;-)

danielgindi · 2015-02-22T16:11:58Z

(Is that clearer?)

aaronjudd · 2015-02-22T16:25:24Z

Awesome.

aaronjudd · 2015-02-26T19:38:33Z

re: the refresh issue -> just occurred to me we probably need a Tracker.flush()

danielgindi · 2015-02-26T19:54:57Z

From my tests it looks like a bug in refreshing CSS, I need to look into it more to say with certainty

danielgindi · 2015-02-26T20:00:02Z

Yes it is a WebKit bug. Trying to add the class "rtl" to the document live in Chrome, then Ctrl+Z - keeps the bootstrap floats to the right.

These are actually not floats, but "-webkit-column", which I guess is still "-webkit" because it's not complete yet.

Trying to find a webkit-fix

danielgindi · 2015-02-26T20:03:51Z

OK it seems like Bootstrap is using a very un-finished CSS3 feature there. I wonder why. There are dozens of articles out there blaming the browsers for being buggy and inconsistent about that feature...

danielgindi · 2015-02-26T20:13:29Z

Update: Found the bug.
Nothing to have with the columns - but these are the main ones affected.
Chrome does not update "direction" after removing the "rtl" class. It still thinks that the HTML element has the direction: "rtl" when it actually supposed to take the default "ltr".
We can fix that by explicitly specifying "ltr" as the default

danielgindi · 2015-02-26T20:22:39Z

https://github.com/reactioncommerce/reaction-core-theme/pull/11

aaronjudd · 2015-02-26T20:43:09Z

well that works perfectly! love it when 15 characters of code answers one of life's big mysteries.

I'll update docs and close this issue when it's ready for the next release.

danielgindi · 2015-02-26T20:45:28Z

Yeah it works great! I'm very satisfied with the result- where everything comes out real clean, and themes can be RTLed with almost zero effort.

Looking forward for the next release :-)

@danielgindi

Thanks to contributions from @danielgindi `right to left internationalization` is now supported. Take a look at the Russian or Hebrew languages to see RTL in action. - Resolves #176 Also contributions from @firstred and @epson121 added Dutch and Croatian translations. Thanks to contributions from @lovetostrike, the initial `reactioncommerce:reaction-social` package has been published, which gives basic social sharing functionality. - Resolves #61 - Resolves #281 - if there is neither a sessionCart nor a userCart, create a sessionCart * add sessionId to cart.sessions * auto insert/update userId if authenticated * observers to ensure cart always exists (ie after deletion) - if sessionCart is a not a userCart return sessionCart - if sessionCart just authenticated, add userId - only return a user cart when authenticated * copy existing userCart(s) into sessionCart and remove userCart(s) - if userCart just logged out, remove sessionId from userCart and create new sessionCart - allow multiple sessionId per cart when userCart TODO: - realistically this may not be very solid way to handle sessions. - Session handling will need a **close review in the future**. - potential edge cases where multiple session/auth/merge actions to a cart may destroy the cart - cart really should have mirrored client and server methods and be tested offline Issue updates: - Remove packages introduced in reactioncommerce/reaction-core#76 - Resolves #271 - Resolves #339 - Resolves #326 - Resolves #183 - Strategic updates for issue #16 - Strategic updates for issue #318 - Strategic updates for issue #76 * dashboard enable/disable **guest checkout** * change default step to **guest checkout** or create/sign-in * store email for order - **after order completion if guest** * not visible after destroyed session (ie: refresh) * updated checkout and progress bar to use cart value instead of session TODO: - validation on email guest entry - add account creation instructions to an order completion email - potentially add third prompt for account creation after email (or promos,etc) - order emails! - use workflow states to control checkout ui flow. Thanks to initial contributions from @prinzdezibel! - use new Accounts collection (previously referred to as customers) - create account on user create, or use a session specific account - implement Template.dynamic handling of AddressBook edit/add/grid - changes to checkout address handling, fix accounts context - update addressBook forms to autoform-v0.5.0 compatible (autoform not upgraded) - change accounts/shop `email` from string to `emails` array - `emails: {'address': options.email, 'verified': true}` - changed Shops, Accounts email to an array `emails` - userAccountsDropdown icon for orders, profile - user view of order history TODO: - merge session accounts to user account upon email confirmation (and email saved on cart) - reduce / cleanup garbage sessions (merge will help) - session / accounts/ cart garbage collector - account profile / settings - on account creation / login with password - if confirmed account creation email - create a account collection record with this userId - update all orders with matching email to match this userId - copy all order addresses into Accounts.profile.addressBook - copy all social / email info to Accounts. - users collection locked down, nothing exposed to client, used for authentication only - else - if there are more orders with this email - display on order view "Add order" * moves user orders from cart/checkout folder to dashboard/orders * add message for confirmation of email * authenticated user can see all orders where userId in list view * admin can see all in list view * userAccountsDropdown icon for orders * add cartId to Orders (instead of using cartId as orderId) TODO: - integrate the admin view of list into dashboard admin flow - this is possibly a breaking change to the orders dashboard. - remove sessionId from orders on logout * updates to handling settings from registry (public, private) * rename and move settingGeneral to shop/settings * rename and move settingsAccounts to shop/accounts **Multi-shop/vendor** * shop account updates to prep multi-shop dashboard * shopId added to cart.items (variants) Issue updates: - Strategic updates for issue #236 - Strategic updates for issue #327 * added settings.public to publish public settings to ReactionCore.xxx Thanks to contributions and docs from @spencern - Test coverage for product methods - Fix, add coverage for core methods * Upgrade to Meteor 1.0.4.2 * Implements `check` and `audit-argument-checks` * Implements `browser-policy` * Fixed footer layout pages loading. * Updates CFS, removes FileStorage collection. * **Contributions from @aldeed @prinzdezibel @spencern @boboci9 @evliu @ceh @gouthamve @KEFIRCHIK @epson21 @firstred **

Resolves #176

@danielgindi

Thanks to contributions from @danielgindi `right to left internationalization` is now supported. Take a look at the Russian or Hebrew languages to see RTL in action. - Resolves #176 Also contributions from @firstred and @epson121 added Dutch and Croatian translations. Thanks to contributions from @lovetostrike, the initial `reactioncommerce:reaction-social` package has been published, which gives basic social sharing functionality. - Resolves #61 - Resolves #281 - if there is neither a sessionCart nor a userCart, create a sessionCart * add sessionId to cart.sessions * auto insert/update userId if authenticated * observers to ensure cart always exists (ie after deletion) - if sessionCart is a not a userCart return sessionCart - if sessionCart just authenticated, add userId - only return a user cart when authenticated * copy existing userCart(s) into sessionCart and remove userCart(s) - if userCart just logged out, remove sessionId from userCart and create new sessionCart - allow multiple sessionId per cart when userCart TODO: - realistically this may not be very solid way to handle sessions. - Session handling will need a **close review in the future**. - potential edge cases where multiple session/auth/merge actions to a cart may destroy the cart - cart really should have mirrored client and server methods and be tested offline Issue updates: - Remove packages introduced in reactioncommerce/reaction-core#76 - Resolves #271 - Resolves #339 - Resolves #326 - Resolves #183 - Strategic updates for issue #16 - Strategic updates for issue #318 - Strategic updates for issue #76 * dashboard enable/disable **guest checkout** * change default step to **guest checkout** or create/sign-in * store email for order - **after order completion if guest** * not visible after destroyed session (ie: refresh) * updated checkout and progress bar to use cart value instead of session TODO: - validation on email guest entry - add account creation instructions to an order completion email - potentially add third prompt for account creation after email (or promos,etc) - order emails! - use workflow states to control checkout ui flow. Thanks to initial contributions from @prinzdezibel! - use new Accounts collection (previously referred to as customers) - create account on user create, or use a session specific account - implement Template.dynamic handling of AddressBook edit/add/grid - changes to checkout address handling, fix accounts context - update addressBook forms to autoform-v0.5.0 compatible (autoform not upgraded) - change accounts/shop `email` from string to `emails` array - `emails: {'address': options.email, 'verified': true}` - changed Shops, Accounts email to an array `emails` - userAccountsDropdown icon for orders, profile - user view of order history TODO: - merge session accounts to user account upon email confirmation (and email saved on cart) - reduce / cleanup garbage sessions (merge will help) - session / accounts/ cart garbage collector - account profile / settings - on account creation / login with password - if confirmed account creation email - create a account collection record with this userId - update all orders with matching email to match this userId - copy all order addresses into Accounts.profile.addressBook - copy all social / email info to Accounts. - users collection locked down, nothing exposed to client, used for authentication only - else - if there are more orders with this email - display on order view "Add order" * moves user orders from cart/checkout folder to dashboard/orders * add message for confirmation of email * authenticated user can see all orders where userId in list view * admin can see all in list view * userAccountsDropdown icon for orders * add cartId to Orders (instead of using cartId as orderId) TODO: - integrate the admin view of list into dashboard admin flow - this is possibly a breaking change to the orders dashboard. - remove sessionId from orders on logout * updates to handling settings from registry (public, private) * rename and move settingGeneral to shop/settings * rename and move settingsAccounts to shop/accounts **Multi-shop/vendor** * shop account updates to prep multi-shop dashboard * shopId added to cart.items (variants) Issue updates: - Strategic updates for issue #236 - Strategic updates for issue #327 * added settings.public to publish public settings to ReactionCore.xxx Thanks to contributions and docs from @spencern - Test coverage for product methods - Fix, add coverage for core methods * Upgrade to Meteor 1.0.4.2 * Implements `check` and `audit-argument-checks` * Implements `browser-policy` * Fixed footer layout pages loading. * Updates CFS, removes FileStorage collection. * **Contributions from @aldeed @prinzdezibel @spencern @boboci9 @evliu @ceh @gouthamve @KEFIRCHIK @epson21 @firstred **

v0.7.0 - JS Conversion, layout.workflows, reaction-accounts, UIX

…e-cloudinary chore: latest cloudinary plugin (operator UI update)

aaronjudd added the i18n / translations label Oct 2, 2014

aaronjudd mentioned this issue Oct 2, 2014

Price Delimiter #113

Closed

aaronjudd mentioned this issue Oct 17, 2014

Global currency formatting for localization #186

Closed

aaronjudd added this to the v0.2.3 milestone Nov 7, 2014

aaronjudd modified the milestones: i18n & L10n, v0.2.4 Jan 19, 2015

aaronjudd assigned danielgindi Jan 19, 2015

aaronjudd added in progress and removed i18n / translations labels Jan 19, 2015

aaronjudd closed this as completed Mar 16, 2015

aaronjudd removed the in progress label Mar 16, 2015

aaronjudd added a commit that referenced this issue Dec 3, 2015

Add RTL to docs

13b9b5c

Resolves #176

aaronjudd pushed a commit that referenced this issue Dec 3, 2015

Merge pull request #176 from reactioncommerce/feature-accounts-348

077e743

v0.7.0 - JS Conversion, layout.workflows, reaction-accounts, UIX

cmbirk pushed a commit to cmbirk/reaction that referenced this issue Aug 18, 2019

Merge pull request reactioncommerce#176 from sportsdirect/chore-updat…

61f0468

…e-cloudinary chore: latest cloudinary plugin (operator UI update)

vannguyenn mentioned this issue Feb 9, 2023

Add additional message fields to promotion schema #6787

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RTL i18n/l10n support #176

RTL i18n/l10n support #176

aaronjudd commented Oct 2, 2014

aldeed commented Oct 2, 2014

danielgindi commented Oct 2, 2014

aaronjudd commented Nov 7, 2014

danielgindi commented Jan 8, 2015

aaronjudd commented Jan 8, 2015

danielgindi commented Jan 19, 2015

danielgindi commented Feb 12, 2015

aaronjudd commented Feb 13, 2015

danielgindi commented Feb 19, 2015

aaronjudd commented Feb 19, 2015

danielgindi commented Feb 19, 2015

aaronjudd commented Feb 19, 2015

aaronjudd commented Feb 19, 2015

danielgindi commented Feb 20, 2015

danielgindi commented Feb 20, 2015

danielgindi commented Feb 20, 2015

aaronjudd commented Feb 20, 2015

danielgindi commented Feb 21, 2015

aaronjudd commented Feb 22, 2015

danielgindi commented Feb 22, 2015

danielgindi commented Feb 22, 2015

aaronjudd commented Feb 22, 2015

aaronjudd commented Feb 26, 2015

danielgindi commented Feb 26, 2015

danielgindi commented Feb 26, 2015

danielgindi commented Feb 26, 2015

danielgindi commented Feb 26, 2015

danielgindi commented Feb 26, 2015

aaronjudd commented Feb 26, 2015

danielgindi commented Feb 26, 2015

RTL i18n/l10n support #176

RTL i18n/l10n support #176

Comments

aaronjudd commented Oct 2, 2014

aldeed commented Oct 2, 2014

danielgindi commented Oct 2, 2014

aaronjudd commented Nov 7, 2014

danielgindi commented Jan 8, 2015

aaronjudd commented Jan 8, 2015

danielgindi commented Jan 19, 2015

danielgindi commented Feb 12, 2015

aaronjudd commented Feb 13, 2015

danielgindi commented Feb 19, 2015

aaronjudd commented Feb 19, 2015

danielgindi commented Feb 19, 2015

aaronjudd commented Feb 19, 2015

aaronjudd commented Feb 19, 2015

danielgindi commented Feb 20, 2015

danielgindi commented Feb 20, 2015

danielgindi commented Feb 20, 2015

aaronjudd commented Feb 20, 2015

danielgindi commented Feb 21, 2015

aaronjudd commented Feb 22, 2015

danielgindi commented Feb 22, 2015

danielgindi commented Feb 22, 2015

aaronjudd commented Feb 22, 2015

aaronjudd commented Feb 26, 2015

danielgindi commented Feb 26, 2015

danielgindi commented Feb 26, 2015

danielgindi commented Feb 26, 2015

danielgindi commented Feb 26, 2015

danielgindi commented Feb 26, 2015

aaronjudd commented Feb 26, 2015

danielgindi commented Feb 26, 2015