Implement right-to-left interface #3970

kommunarr · 2023-08-29T07:42:32Z

Implement right-to-left interface

Pull Request Type

Feature Implementation

Related issue

Description

At a high level, this PR updates the interface of FreeTube to accommodate the proper patterns for right-to-left languages throughout the entire app. This PR looks quite large, and it is, but >80-85% of the changes are migrating CSS properties to their 1:1 directionality-agnostic equivalents.

Implementation-wise:

Doesn't touch VideoJS.css
Replaces margin-left / -right with margin-inline-start / -end & margin-top / -bottom with margin-block-start / -end
Replaces padding-left / -right with padding-inline-start / end & padding-top / -bottom with padding-block-start / -end
Replaces left/right with inset-inline-start/-end & top/bottom with inset-block-start/-end
Replaces border-left*/border-right* with border-inset-start/-end & border-top*/border-bottom* with border-block-start/-end
Replaces text-align: left/right with text-align: start/end
Custom: replaces float: left/right with two CSS variables (because float: inline-start/-end is still experimental in Chrome)
Custom: modifies transform() x values to conditionally be inverted by multiplying them with a CSS variable of 1 or -1 based on language directionality (090f392)
Custom styling was needed/added in one place (ft-input.css to fix an emergent issue with the search bar magnifying-glass icon positioning on languages with right-to-left directionality
Fixes settings switches not being aligned when the locale has right-to-left directionality
Horizontally flips icon direction when directionality is RTL with two exceptions (the magnifying-glass on search bars and circle-question on the About route)
Updates arrow keys when the current locale has right-to-left directionality such that left arrow is the "history forward" arrow, and right arrow is the "history backward" arrow (as is standard in RTL browsers)
Refactors the arrow key logic to use class binding (to resolve emergent bug with history arrows showing as disabled when changing the locale to one with different directionality). It's also better practice than whatever the original implementer was doing (me, in 2021, to be clear)

Screenshots

Testing

Test Plan

Under General Settings, set locale to one with right-to-left directionality (e.g., Arabic / العربية )
- Check that sliders in, e.g., Player Settings, are right-to-left
- Check that switches/toggles in, e.g., Player Settings, are right-to-left and are aligned right
- Check that tooltips in, e.g., Player Settings, open correctly
- Check that arrow navigation works correctly by going forward one route, then going back (left = forward, right = back)
- Check that all icons are horizontally flipped with the exception of the magnifying-glass on search bars and circle-question on the About route
- Check that labels left-aligned in ltr languages are right-aligned (e.g., side-nav labels, video titles, search results, ft-input placeholders, comments sections, the video count container inside each playlist thumbnail in the Channel Playlists tab, the labels in the profile sections, polls in the Channel Community tab)
- Check that rtl directionality and styling is maintained after Ctrl+R
- (Optional) Prepend true || to v-if statements on lines 17 and 21 of App.vue to show & validate updates banner is rtl

Desktop

OS: OpenSUSE Tumbleweed
OS Version: 2023xxxx
FreeTube version: 0.19.0

Future Action Items

Add linter requiring use of directionality-neutral CSS properties

To maintain a usable right-to-left interface, we must ensure that the directionality-agnostic property names listed above are used in all cases going forward (with maybe the sole exception of videoJS.css).

Ongoing Localization Problem

We currently use string concatenation of data and an i18n label in many places in the code (e.g., "v0.19.0 Beta" on the About page, "5,000 views" on video lists. This is not the way to do this, because many languages order those values differently. This will need to be addressed in a separate PR given that this is more of a localization problem, but I thought it would mention it specifically because languages with right-to-left directionality are most notably affected.

Enhancement: Switch left-to-right direction in `ft-input`s and their search results based on whether the text typed is in an `ltr` or `rtl` language.

Support for vertical writing modes

This PR actually does much of the heavy lifting for accommodating vertical writing modes. The side nav bar, top nav bar, and many controls' styling will have to be reworked for this to be a reality, but these directionality-agnostic properties aren't just useful for rtl support.

To RTL language users

let us know if you are having any issues with directionality in the video player or any other part of FreeTube!

…lacing padding-left and padding-right with padding-inline-start and padding-inline-end

…ing margin-left and margin-right with margin-inline-start and margin-inline-end

This commit also changes border-left to border-inline-start, and border-right to border-inline-end.

…lock-start, and inset-block-end This commit also replaces border-top and border-bottom with border-block-start and border-block-end.

To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation.

…ing in wrong x-direction for rtl languages

…rectly aligned

…oper rtl text orientation

…ctly on page reload

…ems: start I have validated this for all settings tabs; the justify-content: start did nothing in any language, left-to-right or right-to-left. Replacing it with align-items: start aligned all menu switch items by their switches, not by their labels. This makes for a much more uniform settings section for trl languages.

…hanging language to one with different directionality Given that which icon is displayed for which history arrow is now dynamic based on the user's directionality, changing of the icon resets the font-awesome-icon state and thus re-adds the base disabled class to both arrows. This means that changing your language to one that has a different directionality was falsely setting the arrows to their disabled state (until the route is changed, after which the history icons will be fully back to normal). This commmit refactors the history icon setting logic to use class binding to two booleans in the top-nav component's data rather than adding and removing the disabled classes directly to the arrow elements' classLists, thus cleaning up the implementation and fixing the bug.

…on rtl languages

…exclusion list

…f locale value from store Kudos to absidue for pointing out this existing function for representing this, and that it grabs directly from the i18n object. This means that FreeTube will display the proper rtl interface if one is the user's system language, where it did not before.

Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL.

src/renderer/components/ft-card/ft-card.css

src/renderer/components/top-nav/top-nav.js

absidue · 2023-09-04T17:27:47Z

Added the problem with using concatenation instead of placeholders to the Development Chores board: https://github.com/FreeTubeApp/FreeTube/projects/10. We already use placeholders in some places (search for { in the en-US.yaml file), but not in some notable places, so we should change to placeholders everywhere.

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

src/renderer/components/ft-slider/ft-slider.css

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

absidue

Messes up any LTR text e.g. the video description where link rendering breaks, but I don't think that's solvable unless we embed translation tool level language detection, to pick the direction based on the content.

kommunarr · 2023-09-10T23:09:56Z

@atpersian @yarons @rex07 These changes are now present in the latest nightly build. Here is more information on how to use nightly builds. Please feel welcome to update here with any comments or concerns! You are also welcome to compare & contrast with YouTube's current RTL support.

atpersian · 2023-09-11T01:17:06Z

Dear Dude
how can i use nightly build?? is there any guide?

kommunarr · 2023-09-11T02:21:34Z

Dear Dude how can i use nightly build?? is there any guide?

Here you go: https://docs.freetubeapp.io/development/nightly-builds

* development: (46 commits) Translated using Weblate (Hebrew) Translated using Weblate (Hebrew) Translated using Weblate (Chinese (Simplified)) Add subscribed icon to comments (FreeTubeApp#4007) Translated using Weblate (Icelandic) Translated using Weblate (Czech) Translated using Weblate (Bulgarian) Translated using Weblate (Polish) Translated using Weblate (Arabic) Translated using Weblate (Greek) Translated using Weblate (Italian) Translated using Weblate (Chinese (Simplified)) Translated using Weblate (Hungarian) Translated using Weblate (Portuguese (Brazil)) Translated using Weblate (Ukrainian) Translated using Weblate (Spanish) Translated using Weblate (Hebrew) Translated using Weblate (Turkish) Search: Add hashtags to results (FreeTubeApp#3780) Implement right-to-left interface (FreeTubeApp#3970) ... # Conflicts: # src/renderer/components/ft-element-list/ft-element-list.vue # src/renderer/components/ft-prompt/ft-prompt.css # src/renderer/components/ft-toast/ft-toast.css # src/renderer/scss-partials/_ft-list-item.scss # src/renderer/views/Playlist/Playlist.scss

atpersian · 2023-09-11T09:28:31Z

i check Artifacts file , change some translate for better understanding contents. (language name and ..etc) . thanks for your response .
B R

yarons · 2023-09-11T13:21:05Z

No glitches yet, looking pretty good.
I fixed some translations.

kommunarr added 24 commits August 28, 2023 18:58

Replace margin-left with margin-inline-start

538884b

Replace margin-right with margin-inline-end

ed1836a

Replace padding-left with padding-inline-start

5dc8303

Replace padding-right with padding-inline-end

215ae66

Replace padding-top & padding-bottom with padding-block; continue rep…

1bee690

…lacing padding-left and padding-right with padding-inline-start and padding-inline-end

Add updated rtl-compatible margins to ft-slider and fix indentation

0fa5a5f

Replace margin-top & margin-bottom with margin-block; continue replac…

c88f916

…ing margin-left and margin-right with margin-inline-start and margin-inline-end

Continue replacing with margin-block and margin-inline

7509ef1

Replace left and right with inset-inline-start and inset-inline-end

0b06cb1

This commit also changes border-left to border-inline-start, and border-right to border-inline-end.

Replace margin-bottom, top, and bottom with margin-block-end, inset-b…

d73c9ee

…lock-start, and inset-block-end This commit also replaces border-top and border-bottom with border-block-start and border-block-end.

Replace text-align left and right with text-align start and end

127ee1a

Fix syntax error with inset-block-end

3fe7977

Implement dynamic float: left/right based on direction ltr/rtl

6de06bb

Implement dynamic navigation arrow placement based on direction ltr/rtl

a95d32c

To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation.

Add direction to body based on preferred language

3f5539a

Implement horizontal directionality coefficient to fix translate work…

5f29208

…ing in wrong x-direction for rtl languages

Add explicit text-align: start in places to ensure rtl version is cor…

eb6169c

…rectly aligned

Add text-align: start to places where it is not inferred to enable pr…

e2e7bfb

…oper rtl text orientation

Fix search bar magnifying glass being too far right issue

245c811

Move body.dir-setting logic to setLocale to fix dir not setting corre…

32b3473

…ctly on page reload

Add Kurdish to rtl languages list & add li items to be right-aligned …

251cde5

…on rtl languages

Force FreeTube logo to be ordered left-to-right for 'brand consistency'

b38c586

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Aug 29, 2023

FreeTubeBot enabled auto-merge (squash) August 29, 2023 07:42

kommunarr added 4 commits August 29, 2023 04:01

Add styling flipping font-awesome icons for rtl languages except for …

d221f43

…exclusion list

Update isRightAligned property name to more clearly reflect rtl purpose

03648af

Simplify left/right arrow display logic

a16c7f7

Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL.

ChunkyProgrammer requested a review from PikachuEXE September 1, 2023 21:15

kommunarr force-pushed the add-rtl-support branch from 8acd703 to 3886a56 Compare September 1, 2023 23:56

Fix question mark reversing logic for Arabic, Hebrew, Persian, and Urdu

3149c3e

kommunarr force-pushed the add-rtl-support branch from 3886a56 to 3149c3e Compare September 1, 2023 23:56

absidue reviewed Sep 4, 2023

View reviewed changes

src/renderer/components/ft-card/ft-card.css Outdated Show resolved Hide resolved

src/renderer/components/top-nav/top-nav.js Outdated Show resolved Hide resolved

kommunarr and others added 2 commits September 5, 2023 01:24

Fix minor indentation issue

7ed599d

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

Remove unused function

a97b3fe

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

kommunarr requested a review from absidue September 6, 2023 02:06

ChunkyProgrammer previously approved these changes Sep 6, 2023

View reviewed changes

PikachuEXE requested changes Sep 7, 2023

View reviewed changes

src/renderer/components/ft-slider/ft-slider.css Outdated Show resolved Hide resolved

kommunarr dismissed ChunkyProgrammer’s stale review via 3cee5da September 7, 2023 11:02

Update src/renderer/components/ft-slider/ft-slider.css

3cee5da

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

efb4f5ff-1298-471a-8973-3d47447115dc requested review from PikachuEXE and ChunkyProgrammer September 7, 2023 11:04

ChunkyProgrammer approved these changes Sep 7, 2023

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc removed their request for review September 7, 2023 11:31

PikachuEXE approved these changes Sep 7, 2023

View reviewed changes

This was referenced Sep 8, 2023

Enable Persian language (Farsi) #4010

Merged

Fix localization of counts #4011

Merged

absidue approved these changes Sep 9, 2023

View reviewed changes

FreeTubeBot merged commit 6f2a535 into FreeTubeApp:development Sep 9, 2023

github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Sep 9, 2023

kommunarr mentioned this pull request Sep 10, 2023

Implement Stylelint linting of CSS logical properties #4023

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement right-to-left interface #3970

Implement right-to-left interface #3970

kommunarr commented Aug 29, 2023 •

edited

Loading

absidue commented Sep 4, 2023 •

edited

Loading

absidue left a comment

kommunarr commented Sep 10, 2023 •

edited

Loading

atpersian commented Sep 11, 2023

kommunarr commented Sep 11, 2023

atpersian commented Sep 11, 2023

yarons commented Sep 11, 2023

Implement right-to-left interface #3970

Implement right-to-left interface #3970

Conversation

kommunarr commented Aug 29, 2023 • edited Loading

Implement right-to-left interface

Pull Request Type

Related issue

Description

Screenshots

Testing

Test Plan

Desktop

Future Action Items

Add linter requiring use of directionality-neutral CSS properties

Ongoing Localization Problem

Enhancement: Switch left-to-right direction in ft-inputs and their search results based on whether the text typed is in an ltr or rtl language.

Support for vertical writing modes

To RTL language users

absidue commented Sep 4, 2023 • edited Loading

absidue left a comment

Choose a reason for hiding this comment

kommunarr commented Sep 10, 2023 • edited Loading

atpersian commented Sep 11, 2023

kommunarr commented Sep 11, 2023

atpersian commented Sep 11, 2023

yarons commented Sep 11, 2023

kommunarr commented Aug 29, 2023 •

edited

Loading

Enhancement: Switch left-to-right direction in `ft-input`s and their search results based on whether the text typed is in an `ltr` or `rtl` language.

absidue commented Sep 4, 2023 •

edited

Loading

kommunarr commented Sep 10, 2023 •

edited

Loading