Skip to content

fix: mirror toggle switches in RTL layouts#5214

Open
iDavi wants to merge 2 commits into
ankitects:mainfrom
iDavi:fix/rtl-switch
Open

fix: mirror toggle switches in RTL layouts#5214
iDavi wants to merge 2 commits into
ankitects:mainfrom
iDavi:fix/rtl-switch

Conversation

@iDavi

@iDavi iDavi commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

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.rtl so the track sits on the correct side of the row. However, the knob itself is drawn via the checkbox's background, which Bootstrap positions with background-position: left center (unchecked) transitioning to right 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-input override so the knob starts at right center and moves to left center when checked, matching the mirrored track.

Steps to reproduce

  1. Set the interface language to any RTL language.
  2. Open a screen with toggle switches, e.g. Deck Options (any tab with switches, such as Timer or Audio).
  3. Toggle a switch and observe the knob position/direction doesn't match the mirrored track.

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

  • I ran ./ninja check or an equivalent relevant check locally.
  • I added or updated tests when the change is non-trivial or behavior changed.

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.
image

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

no regressions in ltr:
image

Scope

  • This PR is focused on one change (no unrelated edits).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant