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.
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.
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>
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.
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?
Changing status to get the attention of the author. Please reply former comment.
(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.
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.
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>
Nice work everyone! Pushed to main for 25.11
Nice work everyone! Pushed to 25.05.x
I prefer not backport to 24.11.x LTS for UI stability