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: Needs documenting
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: Marcel de Rooy
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2025-05-31 16:14 UTC by Karam Qubsi
Modified: 2025-10-10 14:55 UTC (History)
5 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:
25.11.00,25.05.04
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
Bug 40040: RTL CSS files not loaded in templates; legacy right-to-left.css causing UI issues (15.61 KB, patch)
2025-09-04 09:05 UTC, Marcel de Rooy
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.
Comment 4 Marcel de Rooy 2025-08-01 09:03:53 UTC
Hi Karam,

Why do you add those:

+/*rtl:raw:
+.dropdown-menu-end[data-bs-popper] {
+  left: auto;
+  right: 0;
+}
+*/

You say: In limited cases, we use /*rtl:raw: to target RTL-specific styles.
Please explain. This is just comments, right?
Comment 5 Marcel de Rooy 2025-08-29 09:27:14 UTC
Changing status to get the attention of the author. Please reply former comment.
Comment 6 Karam Qubsi 2025-08-31 13:44:36 UTC
(In reply to Marcel de Rooy from comment #4)
> Hi Karam,
> 
> Why do you add those:
> 
> +/*rtl:raw:
> +.dropdown-menu-end[data-bs-popper] {
> +  left: auto;
> +  right: 0;
> +}
> +*/
> 
> You say: In limited cases, we use /*rtl:raw: to target RTL-specific styles.
> Please explain. This is just comments, right?


Hi Marcel, sorry for being late,

/*rtl:raw*/ looks like a normal CSS comment in LTR (default CSS),  
but when processed with gulp-rtlcss (used in gulpfile.js for Koha),  
example: https://github.com/Koha-Community/Koha/blob/main/gulpfile.js#L80

it is interpreted as an rtlcss control directive.  
That means for RTL builds it is not treated as a comment,  
but as actual CSS that should be kept as-is.  

See the documentation here:  
https://rtlcss.com/learn/usage-guide/control-directives/index.html


Let me know if you have any other questions 

Thanks, and sorry again for the delay. 

Karam.
Comment 7 Marcel de Rooy 2025-09-04 09:05:04 UTC
Thx Karam for clarification.

Seeing additional space(s) at the end sometimes:
+      /*rtl:raw:
+        &::before {
+            transform: scaleX(-1);
+        }
+        */

Not a big deal, but the space(s) before */ on the last line seems unneeded.. Here I would expect two spaces less.
Comment 8 Marcel de Rooy 2025-09-04 09:05:22 UTC
Created attachment 186123 [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>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Comment 9 Lucas Gass (lukeg) 2025-09-05 14:06:27 UTC
Nice work everyone!

Pushed to main for 25.11
Comment 10 Paul Derscheid 2025-09-20 08:58:03 UTC
Nice work everyone!

Pushed to 25.05.x
Comment 11 Fridolin Somers 2025-10-10 14:55:12 UTC
I prefer not backport to 24.11.x LTS for UI stability