Feature #43515
closedImprove RTL layouts by removing rtl.css and integrating its overrides into application.css using CSS logical properties
0%
Description
Redmine currently uses an additional rtl.css file to override some LTR-oriented styles for RTL languages. However, this file only covers part of the UI, is not fully in sync with the current core stylesheets, and leads to layout issues in RTL.
As an intermediate step to improve RTL support, I would like to:
- Integrate the necessary overrides in
rtl.cssintoapplication.cssusing logical properties (e.g.margin-inline,padding-inline,text-align: start/end), which automatically map to the appropriate left or right side depending on whether the layout is LTR or RTL. Logical properties are already used partially withinapplication.css(examples: r24158, r24159, r24160, and r24161). - Remove obsolete or redundant rules.
- Delete
rtl.cssonce its content has been merged intoapplication.css.
This change will not fix all RTL layout problems. However, by resolving the inconsistencies that have accumulated between rtl.css and application.css, it should noticeably improve RTL layouts. It will also remove the fragile separate RTL stylesheet and provide a cleaner base for further RTL improvements.
Related issues
Updated by Marius BĂLTEANU 26 days ago
Sounds good, 7.0.0 is a good candidate. Do you have in plan to work on this?
Updated by Go MAEDA 26 days ago
- Related to Feature #43506: Declare text direction on HTML element for better RTL/LTR styling support added
- Related to Defect #43592: Ajax indicator is broken in RTL layouts added
- Related to Defect #43513: Misaligned RTL layout on the project Overview page added
- Related to Defect #43509: Avatar in issue view is positioned incorrectly in RTL layout added
- Related to Defect #43591: Context menu is hidden behind sidebar in RTL layout added
Updated by Go MAEDA 25 days ago
- Related to deleted (Defect #43591: Context menu is hidden behind sidebar in RTL layout)
Updated by Go MAEDA 10 days ago
- Status changed from New to Closed
- Resolution set to Fixed
All RTL-specific styles previously defined in rtl.css have been integrated into application.css.
This resolves the layout issues that were caused by rtl.css being out of sync with application.css. As a result, RTL support has been improved overall, not just consolidated.
Some code in core CSS files is still not fully RTL-aware and should be updated. However, the goal of this issue was to integrate rtl.css into application.css, so the remaining work will be handled in a separate issue.
Updated by Go MAEDA 10 days ago
- Related to Defect #43664: Project menu tab left/right buttons are broken in RTL layout added
- Related to Defect #43672: Indent icons for subtasks and subprojects in list tables are misplaced in RTL layout added
- Related to Defect #43675: "Add filter" dropdown in query form appears on the wrong side in RTL layout added
Updated by Go MAEDA 10 days ago
- Related to Defect #43514: Legacy icons still displayed alongside new SVG icons on some RTL pages added
Updated by Go MAEDA 6 days ago
- Related to Feature #43700: Improve RTL layout support by replacing physical CSS properties with logical ones in core CSS files added