RTL support by mxmou · Pull Request #2263 · ScratchAddons/ScratchAddons

mxmou · 2021-04-22T19:54:38Z

Resolves

Resolves #1844
Resolves #1877

Changes

Adds support for right-to-left scripts to the settings page, popup and editor addons. Website addons don't need it because the website itself doesn't have proper RTL support. Notes:

Untranslated strings sometimes display weirdly. Untranslated descriptions on the settings page are truncated incorrectly: the end of the description is visible instead of the beginning.
Comments in the messaging popup are always left-to-right to make sure that they're displayed the same way as on Scratch.
Quite a few changes to the hide-flyout addon were necessary, so I also fixed a few bugs.

Reason for changes

#1844

Tests

Tested by changing the browser and Scratch language.

WorldLanguages · 2021-04-22T20:03:58Z

@mxmou King 👑
Was thinking on the bus about this, I arrive home and 2 hours later this PR appears out of nowhere 😂

apple502j · 2021-04-24T06:35:38Z

What happens when someone enables editor-stage-left?

mxmou · 2021-04-24T06:43:47Z

@apple502j It moves the stage to the right.

WorldLanguages · 2021-04-24T14:19:47Z

Website addons don't need it because the website itself doesn't have proper RTL support.

Oh wow.

Untranslated strings sometimes display weirdly. Untranslated descriptions on the settings page are truncated incorrectly: the end of the description is visible instead of the beginning.

We probably don't want to merge this before those are solved - for RTL users, our settings page probably got worse, not better, at the current state of this PR. We don't have complete translations for Arabic or Hebrew yet anyway (this is a bit of a mouse and cat game anyway, I know). So I guess that for the settings page, we'll not only have to support LTR and RTL, but RTL with LTR translation fallbacks as well, which kinda hurts, but is strictly needed, at least for now.

Quite a few changes to the hide-flyout addon were necessary, so I also fixed a few bugs.

Your changes add new calls to addon.tab.waitForElement, so we'll need to coordinate efforts with #2268

WorldLanguages · 2021-04-24T14:21:45Z

What happens when someone enables editor-stage-left?

@apple502j If you want, this would be a good moment to add support for translator notes inside addons-l10n. editor-stage-left doesn't have a file on there (all of its strings are in addon.json), but we could create one that stores the notes reminding Arabic/Hebrew translators that they need to use "right" instead of "left" in both the addon name and description.

mxmou · 2021-04-28T10:24:16Z

Is displaying punctuation like this wrong?

WorldLanguages · 2021-04-28T14:24:56Z

Is displaying punctuation like this wrong?

If it's easy to fix, do it. If not, create an issue and we'll throw it at the backlog :P

mxmou · 2021-04-28T14:29:56Z

@WorldLanguages It could be fixed by adding dir="auto" to all elements with this issue, but I'm not sure if that's a very good idea.

WorldLanguages · 2021-04-28T14:30:40Z

@mxmou Why is it a bad idea?

mxmou · 2021-04-28T14:34:55Z

@WorldLanguages When a new element with punctuation is added, it would also need the attribute.

WorldLanguages · 2021-04-28T14:55:00Z

Well, that's not ideal, but what are the alternatives?

mxmou · 2021-04-28T14:57:22Z

Well, that's not ideal, but what are the alternatives?

I don't know any.

WorldLanguages · 2021-04-28T22:50:53Z

@mxmou

If you're ok with this, I'd prefer merging this but with RTL off for our own webpages. Arabic and Hebrew are 10% and 0% translated respectively, and it doesn't make sense to ship RTL webpages yet. Of course we can keep the HTML/JS/CSS changes, but the <body> element should have dir="ltr" for all languages for now (you can hardcore this on vue.direction method). Apple and I will try to make a few changes on how translation works soon (stuff has changed since v1.4.0) and specially try to get consistent Arabic/Hebrew translators to make this worth it
About dir="auto", we should use that in the editor to make sure punctuation isn't messed up. We don't need to care that much about using it in our own webpages for now, because of point above
Weird scrollbars:

mxmou · 2021-05-07T16:38:48Z

Could we split hide-flyout changes into another PR?

Maybe I could move all changes to hide-flyout, including the ones that add RTL support? They're bigger than changes to other addons.

WorldLanguages · 2021-05-07T17:24:39Z

Yeah you can move all changes from hide-flyout or just some, you decide

WorldLanguages · 2021-05-10T22:54:41Z

@mxmou ?

mxmou · 2021-05-11T04:15:13Z

@WorldLanguages I think I'll work on this later today.

They will be included in a separate PR.

mxmou · 2021-05-12T09:05:54Z

Why did Prettier make changes to unrelated files?

WorldLanguages · 2021-05-12T20:55:03Z

Why did Prettier make changes to unrelated files?

It does that sometimes lol ¯\(ツ)/¯

mxmou · 2021-05-14T08:51:51Z

I think this PR is now finished. Note that it adds some uses of inset-inline, which is only supported in Chrome 87+.

WorldLanguages · 2021-05-14T14:01:05Z

Do not merge yet

WorldLanguages · 2021-05-14T14:02:33Z

I think this PR is now finished. Note that it adds some uses of inset-inline, which is only supported in Chrome 87+.

TODO: is this ok, alternatives? 🤔

mxmou · 2021-05-14T14:43:24Z

I think this PR is now finished. Note that it adds some uses of inset-inline, which is only supported in Chrome 87+.

TODO: is this ok, alternatives? 🤔

If it isn't, the best alternative is

.something {
  left: 10px;
}
[dir="rtl"] .something {
  left: 0;
  right: 10px;
}

WorldLanguages · 2021-05-15T20:28:18Z

We currently want core to be functional in Chrome 80+ and Firefox 74+ (both released ~1 year from now)

The CSS properties I found used here that are not supported in those browsers are:

inset-inline-*: Chrome 87+, Firefox OK
border-[start/end]-[start/end]-radius: Chrome 89+, Firefox OK

I guess a good compromise we could do is officially support RTL only for Chrome 89+
And in order to support Chrome 80+, we could continue to set mapped physical properties (example: border-top-left-radius) but above the new better properties (example: border-start-start-radius), so that everything looks the same in Chrome < 88 for LTR users.

For example:

el {
  inset-inline-end: 25px;
}

would become:

el {
  right: 25px;
  inset-inline-end: 25px;
}

Which would now support LTR for Chrome 80+ and all Firefox versions, as well as RTL in Chrome 89+ and all Firefox versions.

@mxmou What do you think? It will be easy to migrate when our minimum browser version requirements change (all we need to do is remove properties) and there's no need to do [dir="rtl"] selectors

Note that I'm talking exclusively about extension core CSS. Not addon CSS (which uses [dir="rtl"] selectors to be consistent with Scratch itself anyway)

mxmou · 2021-05-16T06:05:37Z

@WorldLanguages This would work, but I'm not sure if having different version requirements for LTR and RTL layouts makes sense. If we want core to work in a certain browser version, it should probably work with that version regardless of the language.

WorldLanguages · 2021-05-16T19:47:38Z

@mxmou What do you suggest then? 🤔 We haven't supported RTL until now, so it feels like a good compromise to avoid separate [dir="rtl"] selectors (which will be able to be removed in a few months anyway) by only making RTL available in newer Chrome versions, which most of our users have anyway
I considered using __MSG_@@bidi_start_edge__ and __MSG_@@bidi_end_edge__ in the middle of the name of CSS properties, which would probably work, but it would use the browser configuration, not the dir attribute of the root element we can determine on runtime.

mxmou · 2021-05-17T09:52:09Z

@WorldLanguages I guess it would work, I just don't think there's anything wrong with adding [dir="rtl"] selectors and removing them later.

WorldLanguages · 2021-05-17T15:32:57Z

Then do that I guess :P

…r="rtl"]

WorldLanguages · 2021-05-22T20:02:27Z

Solve conflicts and merge?

… into pr/2263

cobaltt7 · 2022-10-19T03:03:06Z

If you're ok with this, I'd prefer merging this but with RTL off for our own webpages. Arabic and Hebrew are 10% and 0% translated respectively, and it doesn't make sense to ship RTL webpages yet. Of course we can keep the HTML/JS/CSS changes, but the element should have dir="ltr" for all languages for now (you can hardcore this on vue.direction method). Apple and I will try to make a few changes on how translation works soon (stuff has changed since v1.4.0) and specially try to get consistent Arabic/Hebrew translators to make this worth it

@WorldLanguages 17 months later, Arabic and Hebrew are 54% and 46% translated respectively. I think we forgot to enable this :P

WorldLanguages · 2022-10-19T20:26:03Z

@RedGuy12 Those languages didn't hit the necessary threshold for them to be included. See https://github.com/ScratchAddons/ScratchAddons/tree/master/_locales

But we should pay close attention, they might appear soon automatically

mxmou and others added 2 commits April 22, 2021 20:58

RTL support

a6bff73

style: format code

51c2014

mxmou requested a review from WorldLanguages as a code owner April 22, 2021 19:54

WorldLanguages reviewed Apr 22, 2021

View reviewed changes

Comment thread popups/scratch-messaging/popup.css Outdated

mxmou and others added 6 commits April 23, 2021 09:05

Use logical properties instead of __MSG__

23f6f8f

style: format code

2f7cae2

Use logical properties in popup

38d5c59

Merge branch 'rtl1' of https://github.com/mxmou/ScratchAddons into rtl1

9264ed0

style: format code

977f331

Attempt to fix error caused by Prettier

aa1376c

mxmou changed the title ~~RTL support~~ RTL support and hide-flyout changes Apr 23, 2021

apple502j added priority: 4 Low priority. Includes minor bugs and less important features scope: addon Related to one or multiple addons scope: l10n All about localization/internationalization scope: webpages Related to the web pages (settings page, pop-up, etc) labels Apr 24, 2021

Fix incorrectly truncated addon descriptions

68b1070

Merge remote-tracking branch 'upstream/master' into rtl1

5c13372

mxmou and others added 3 commits May 12, 2021 11:01

Merge remote-tracking branch 'upstream/master' into rtl1

5c74bd0

style: format code

d4f4650

Remove hide-flyout changes for now

4cb4222

They will be included in a separate PR.

mxmou added 2 commits May 12, 2021 11:09

Merge branch 'rtl1' of https://github.com/mxmou/ScratchAddons into rtl1

db34cd6

Add RTL support to recently added CSS

7d35f88

WorldLanguages reviewed May 15, 2021

View reviewed changes

Comment thread webpages/settings/style.css Outdated

mxmou changed the title ~~RTL support and hide-flyout changes~~ RTL support May 22, 2021

Replace uses of __MSG__, inset-* and border-start/end-radius with [di…

c18987f

…r="rtl"]

Merge branch 'master' of https://github.com/ScratchAddons/ScratchAddons…

4746675

… into pr/2263

WorldLanguages merged commit 2bfd254 into ScratchAddons:master May 22, 2021

mxmou deleted the rtl1 branch June 6, 2021 14:03

mxmou mentioned this pull request Aug 17, 2021

Palette is initially visible when auto-hide block palette is enabled #1877

Closed

Uh oh!

Conversation

mxmou commented Apr 22, 2021

Uh oh!

Uh oh!

WorldLanguages commented Apr 22, 2021

Uh oh!

apple502j commented Apr 24, 2021

Uh oh!

mxmou commented Apr 24, 2021

Uh oh!

WorldLanguages commented Apr 24, 2021

Uh oh!

WorldLanguages commented Apr 24, 2021

Uh oh!

mxmou commented Apr 28, 2021

Uh oh!

WorldLanguages commented Apr 28, 2021

Uh oh!

mxmou commented Apr 28, 2021

Uh oh!

WorldLanguages commented Apr 28, 2021

Uh oh!

mxmou commented Apr 28, 2021

Uh oh!

WorldLanguages commented Apr 28, 2021

Uh oh!

mxmou commented Apr 28, 2021

Uh oh!

WorldLanguages commented Apr 28, 2021

Uh oh!

mxmou commented May 7, 2021

Uh oh!

WorldLanguages commented May 7, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

WorldLanguages commented May 10, 2021

Uh oh!

mxmou commented May 11, 2021

Uh oh!

mxmou commented May 12, 2021

Uh oh!

WorldLanguages commented May 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mxmou commented May 14, 2021

Uh oh!

WorldLanguages commented May 14, 2021

Uh oh!

WorldLanguages commented May 14, 2021

Uh oh!

mxmou commented May 14, 2021

Uh oh!

Uh oh!

WorldLanguages commented May 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mxmou commented May 16, 2021

Uh oh!

WorldLanguages commented May 16, 2021

Uh oh!

mxmou commented May 17, 2021

Uh oh!

WorldLanguages commented May 17, 2021

Uh oh!

WorldLanguages commented May 22, 2021

Uh oh!

cobaltt7 commented Oct 19, 2022

Uh oh!

WorldLanguages commented Oct 19, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

WorldLanguages commented May 7, 2021 •

edited

Loading

WorldLanguages commented May 12, 2021 •

edited

Loading

WorldLanguages commented May 15, 2021 •

edited

Loading