Bug 40040 - RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues
Summary: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI is...
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal
Assignee: Karam Qubsi
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2025-05-31 16:14 UTC by Karam Qubsi
Modified: 2025-06-03 11:59 UTC (History)
3 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
RTL: Dropdown menus to have background colors that make text unreadable (227.25 KB, image/png)
2025-05-31 16:14 UTC, Karam Qubsi
Details
Bug 40040: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues (15.47 KB, patch)
2025-05-31 17:55 UTC, Karam Qubsi
Details | Diff | Splinter Review
Bug 40040: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues (15.52 KB, patch)
2025-06-03 11:31 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Karam Qubsi 2025-05-31 16:14:25 UTC
Created attachment 182880 [details]
RTL: Dropdown menus to have background colors that make text unreadable

Hello everyone,

Currently, the staff interface loads both regular CSS files for LTR and then adds `right-to-left.css` on top when in RTL (bidi) mode. This approach is inefficient and can lead to styling conflicts. The OPAC interface already correctly loads RTL-specific CSS files directly when in RTL mode.

The right-to-left.css file is manually maintained and not generated by Gulp, unlike other RTL files that are automatically generated from their LTR counterparts. This results in inconsistent RTL styling.

Currently, right-to-left.css is causing dropdown menus to have background colors that make text unreadable (see attachment).

I preparing a patch to fix that.
Comment 1 Karam Qubsi 2025-05-31 17:55:38 UTC
Created attachment 182881 [details] [review]
Bug 40040: RTL CSS files not loaded in templates; legacy  right-to-left.css causing UI issues

This patch removes the legacy right-to-left.css file, which is no longer maintained and has started causing issues in the RTL (Right-to-Left) UI.

We now use Gulp-generated RTL CSS files for better maintainability.

In limited cases, we use /*rtl:raw: to target RTL-specific styles. This does not affect the default LTR (Left-to-Right) UI, as rtl:raw is handled by the gulp-rtlcss plugin during the build phase.

To test:
	1.	Install the Arabic translation:
koha-translate -i ar-Arab
	2.	Open the staff interface (with the broken CSS) and confirm the issue by browsing several pages.
	3.	Apply this patch.
	4.	Run: yarn css:build
	5.	Browse several pages in Arabic and confirm the issue is resolved.
	6.	Browse several pages in English and confirm not affected.
Comment 2 Owen Leonard 2025-06-03 11:31:02 UTC
Created attachment 182920 [details] [review]
Bug 40040: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues

This patch removes the legacy right-to-left.css file, which is no
longer maintained and has started causing issues in the RTL
(Right-to-Left) UI.

We now use Gulp-generated RTL CSS files for better maintainability.

In limited cases, we use /*rtl:raw: to target RTL-specific styles. This
does not affect the default LTR (Left-to-Right) UI, as rtl:raw is
handled by the gulp-rtlcss plugin during the build phase.

To test:
1. Install the Arabic translation:
   koha-translate -i ar-Arab
2. Open the staff interface (with the broken CSS) and confirm the issue
   by browsing several pages.
3. Apply this patch.
4. Run: yarn css:build
5. Browse several pages in Arabic and confirm the issue is resolved.
6. Browse several pages in English and confirm not affected.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 3 Karam Qubsi 2025-06-03 11:59:18 UTC
Thanks, Owen — appreciate your sign-off.

By the way, it’s not clear to me whether any additional steps are needed to include the RTL files in the final Debian package. I checked version 25.05.1, and it doesn’t contain the RTL files for the staff interface — even though they were part of the Gulp build before this change.

Missing files in the Debian package:
	•	calendar-rtl.css
	•	holds-rtl.css
	•	ill-requests-rtl.css
	•	installer-rtl.css
	•	mainpage-rtl.css
	•	staff-global-rtl.css

I checked in /usr/share/koha/intranet/htdocs/intranet-tmpl/prog/css.

let me know if I need to work on this in some other parts / scripts.