Problem/Motivation

The theme builds its component CSS through postcss-rtlcss and loads a right-to-left library, so most of the layout mirrors. Checked on a right-to-left translation of The Rightup, four things still behave wrongly when dir="rtl".

  • The card slider's Next button does nothing and Previous never enables, because the script reads scrollLeft as positive.
  • The live feed ticker is empty for most of each loop: at mid-cycle both item groups sit off-screen. A time next to a headline also renders as "PM 12:00".
  • Directional icons (arrows, chevrons) keep their left-to-right direction, including the slider and pager chevrons and the View Show arrow.
  • Taxonomy labels and display headings keep their letter-spacing on right-to-left text (0.8px on taxonomy labels). Joined scripts should not be tracked; Chromium already ignores it, so the visible change there is none.

Steps to reproduce

  1. Install The Rightup and a right-to-left language with translated news, and open its home page in that language.
  2. Press Next on the card slider, watch the ticker under the header for a full loop, and look at the chevrons and arrows.

Proposed resolution

  • Card slider: handle the negative scrollLeft of right-to-left scrolling, so Next and Previous move and enable correctly.
  • Live feed: mirrored keyframes in RTL so a group always covers the strip, and let the time and the title take their direction from their own text (unicode-bidi: plaintext).
  • Mirror the directional icons in vartheme-rtl.base.
  • Reset letter-spacing to normal for the taxonomy label and the display headings in RTL.

Left alone on purpose: the audio player's play triangle is mirrored in RTL in the source, which fits a progress bar that fills from the right. Most guidelines keep media icons unmirrored, so that is a design decision for the maintainers.

Remaining tasks

  • ✅ File an issue
  • ✅ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ❌ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ➖ UX/UI designer responsibilities
  • ❌ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • None in left-to-right. In right-to-left the slider moves, the ticker stays filled, and the icons point along the reading direction.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • None in left-to-right. In right-to-left the slider moves, the ticker stays filled, and the icons point along the reading direction.

AI-Generated: Yes. Drafted and tested with Claude Code, reviewed by the contributor.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes
StatusFileSize
new665.91 KB
new12.58 KB
new19.8 KB
new9.11 KB
new19.98 KB

Before and after screenshots, 1440 wide, right-to-left unless named LTR.

  • Card slider after pressing Next once. Before, it did not move.
    Card slider in RTL before and after pressing Next
  • Ticker paused at mid-cycle. Before, it was empty.
    Live feed ticker at mid-cycle in RTL, before and after
  • "12:00 PM" in the ticker now reads in order.
    Live feed time in RTL, before and after
  • View Show arrow points along the reading direction.
    View Show arrow in RTL, before and after
  • LTR ticker unchanged (only the feed's rows differ between the two captures).
    Live feed in LTR, before and after

Correction: unicode-bidi: isolate did not fix the "PM 12:00" order. The MR now uses plaintext for the time and the title (9de1d58e). The summary is updated to match.

  • rajab natshah committed 2c5dd996 on 1.0.x
    fix: #3628117 Fix right-to-left behaviour of the card slider, live feed...
rajab natshah’s picture

Status: Needs review » Fixed
Issue tags: +vartheme_bs5_rightup-1.0.4

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.