fix: mirror toggle switches in RTL layouts#5214
Open
iDavi wants to merge 2 commits into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Linked issue (required)
Refs #4749
Summary / motivation (required)
Toggle switches (
Switch.svelte) look wrong in RTL interface languages (Arabic, Hebrew, Persian): the on/off knob keeps animating in the LTR direction even though the rest of the switch is already mirrored.The component already flips its outer padding/margin under
.form-switch.rtlso the track sits on the correct side of the row. However, the knob itself is drawn via the checkbox'sbackground, which Bootstrap positions withbackground-position: left center(unchecked) transitioning toright center(checked). That rule isn't direction-aware, so under RTL the knob still starts on the left and moves right when toggled on, out of step with the now-mirrored track.This adds a
.form-switch.rtl .form-check-inputoverride so the knob starts atright centerand moves toleft centerwhen checked, matching the mirrored track.Steps to reproduce
How to test (required)
Check that the fix is working:
Run anki with a RTL language
./run -l ar. Click in setting icon of any deck and in deck options screen toggle a switch. Confirm the knob sits on the right when off and moves to the left when on, consistent with the mirrored track.Check that there were no regressions:
Change language to any LTR one
./run -l en. Open the same Deck Options screen. Confirm switches still animate left (off) to right (on) as before.Checklist
./ninja checkor an equivalent relevant check locally.I believe this is a trivial CSS-only change, and I don't think the codebase has tooling to automatically test this kind of UI fix now.
Before / after behavior
before: animates left→right regardless of interface direction, out of sync with the mirrored RTL track.

after: animates right→left in RTL, matching the mirrored track;

no regressions in ltr:

Scope