RTL Support

yheuhtozr commented

2022-12-17 11:04:47 +00:00

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.

Screenshot 2022-12-17 at 19-35-01 Pleroma_Soykaf.png

103 KiB

Screenshot 2022-12-17 at 19-33-42 Pleroma_Soykaf.png

102 KiB

Screenshot 2022-12-17 at 19-35-01 Pleroma_Soykaf.png

Screenshot 2022-12-17 at 19-33-42 Pleroma_Soykaf.png

yheuhtozr added 3 commits 2022-12-17 11:04:47 +00:00

writing mode: easy CSS search and replace 5e00780e29

writing mode: unintended class replace hotfix 5d168fe689

writing mode: RTL functionality w/ CSS values debug

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

f3b1b4de7b

yheuhtozr added 1 commit 2022-12-17 15:30:00 +00:00

writing mode: unintended class replace fix 2

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

d3652a649b

Ghost commented

2022-12-17 16:36:06 +00:00

First-time 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

Ghost added the

Feature

Translation/Locale

labels 2022-12-17 16:39:37 +00:00

yheuhtozr commented

2022-12-18 07:34:18 +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

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

5ab3b678da

yheuhtozr commented

2022-12-18 09:29:53 +00:00

Author

Contributor

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

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)

image.png

114 KiB

Ghost commented

2022-12-29 23:10:01 +00:00

First-time 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!

Oneric referenced this pull request

2024-06-17 22:02:02 +00:00

(arguably) improved layouting of user profile page #403

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

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

RTL Support #258

Checkout