RTL Support #258

Open
yheuhtozr wants to merge 5 commits from yheuhtozr/pleroma-fe:rtl-enabled into develop
Contributor

Modified interface to support RTL languages such as Arabic or Hebrew.

This PR may seem intimidating, but the first (and the second) commit only contains mindless bulk conversion to logical CSS properties and values as the groundwork (that wouldn't introduce any visual change). Only the third one contains "creative" contents including necessary JS rewiring to enable RTL features.

The RTL switch is incorporated into each i18n json in this PR. When you select any language where the key _locale.dir = rtl, the whole layout will be automatically flipped.

Modified interface to support RTL languages such as Arabic or Hebrew. This PR may seem intimidating, but the first (and the second) commit only contains mindless bulk conversion to [logical CSS properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) as the groundwork (that wouldn't introduce any visual change). Only the third one contains "creative" contents including necessary JS rewiring to enable RTL features. The RTL switch is incorporated into each i18n json in this PR. When you select any language where the key `_locale.dir` = `rtl`, the whole layout will be automatically flipped.
yheuhtozr added 3 commits 2022-12-17 11:04:47 +00:00
yheuhtozr added 1 commit 2022-12-17 15:30:00 +00:00
writing mode: unintended class replace fix 2
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful
d3652a649b
Contributor

hi! native hebrew speaker here. few nitpicks regarding UX (not even looking at the code) -- in short, not Everything should be rtl.

first of all, mentions (exclusively in latin) and hashtags (predominantly in ltr languages) all render like user@instance@, because of RTL handling. probably shouldn't be like that.

same goes for display names with custom emoji, which get completely messed up by the directionality and become practically unreadable

more generally (and more problematically), i think every field that's user-generated as opposed to part of the UI should default to LTR, so that the content is displayed faithfully. this includes posts and bios

i think this PR should wait until akkoma implements support for post locales, which would solve that problem -- post contents get rendered as rtl/ltr depending on the language they're composed in.

thanks for the work though! i'll gladly approve the groundwork without the actual RTL toggle for now

hi! native hebrew speaker here. few nitpicks regarding UX (not even looking at the code) -- in short, not Everything should be rtl. first of all, mentions (exclusively in latin) and hashtags (predominantly in ltr languages) all render like `user@instance@`, because of RTL handling. probably shouldn't be like that. same goes for display names with custom emoji, which get *completely* messed up by the directionality and become practically unreadable more generally (and more problematically), i think every field that's user-generated as opposed to part of the UI should default to LTR, so that the content is displayed faithfully. this includes posts and bios i think this PR should wait until akkoma implements support for post locales, which would solve that problem -- post contents get rendered as rtl/ltr depending on the language they're composed in. thanks for the work though! i'll gladly approve the groundwork without the actual RTL toggle for now
nbsp added the
Feature
Translation/Locale
labels 2022-12-17 16:39:37 +00:00
nbsp self-assigned this 2022-12-17 16:39:43 +00:00
Author
Contributor

Hi, thank you for reviewing. Apparently as you say as native speaker, an RTL language is not everything goes RTL, but needs more intricate control over which part should be flipped or not, and those things can be—and only can be—done on a case by case basis.

Fortunately, styling individual elements for correct directionality is as easy as dropping a couple of CSS lines per each, so if you are fine, I think that the better course is you (or other people) tell me which part should be corrected, rather than reverting the global directionality function altogether. Actually, I believe this problem can technically only go back here whatever solution path you take, so disabling it is only postponing...

Additionally, some icons should be flipped as well, but I don't have any native insight, so your help would be much appreciated.

Hi, thank you for reviewing. Apparently as you say as native speaker, an RTL language is not everything goes RTL, but needs more intricate control over which part should be flipped or not, and those things can be—and only can be—done on a case by case basis. Fortunately, styling individual elements for correct directionality is as easy as dropping a couple of CSS lines per each, so if you are fine, I think that the better course is you (or other people) tell me which part should be corrected, rather than reverting the global directionality function altogether. Actually, I believe this problem can technically only go back here whatever solution path you take, so disabling it is only postponing... Additionally, some icons should be flipped as well, but I don't have any native insight, so your help would be much appreciated.
yheuhtozr added 1 commit 2022-12-18 09:25:18 +00:00
writing mode: bidi exceptions
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful
5ab3b678da
Author
Contributor

With your comment and some changes I saw fit, it roughly looks like this. Any suggestions are welcome.

image

With your comment and some changes I saw fit, it roughly looks like this. Any suggestions are welcome. ![image](/attachments/bd5169a1-6f6b-4d56-92ed-7eaf44e81f94)
114 KiB
Contributor

yeah that looks good
ignoring the stuff that the hebrew locale just doesn't have 🥴

i'll take a look at the code itself soon, sorry i couldn't get around to it sooner!

yeah that looks good ignoring the stuff that the hebrew locale just doesn't have 🥴 i'll take a look at the code itself soon, sorry i couldn't get around to it sooner!
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful
This pull request has changes conflicting with the target branch.
  • src/components/emoji_picker/emoji_picker.scss
  • src/components/emoji_reactions/emoji_reactions.vue
  • src/components/notifications/notifications.scss
  • src/components/popover/popover.vue
  • src/components/post_status_form/post_status_form.vue
  • src/components/rich_content/rich_content.scss
  • src/components/status_body/status_body.scss
  • src/components/status_content/status_content.vue
  • src/components/still-image/still-image.vue
  • src/components/timeline_menu/timeline_menu.vue
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u rtl-enabled:yheuhtozr-rtl-enabled
git checkout yheuhtozr-rtl-enabled
Sign in to join this conversation.
No description provided.