Feature #43515
closed
Improve RTL layouts by removing rtl.css and integrating its overrides into application.css using CSS logical properties
Added by Go MAEDA 4 months ago.
Updated about 2 months ago.
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.css into application.css using 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 within application.css (examples: r24158, r24159, r24160, and r24161).
- Remove obsolete or redundant rules.
- Delete
rtl.css once its content has been merged into application.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.
Sounds good, 7.0.0 is a good candidate. Do you have in plan to work on this?
- 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
Marius BĂLTEANU wrote in #note-1:
Sounds good, 7.0.0 is a good candidate. Do you have in plan to work on this?
Yes, I have already started working on this.
- Related to deleted (Defect #43591: Context menu is hidden behind sidebar in RTL layout)
- Target version changed from Candidate for next major release to 7.0.0
- 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.
- 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
- Related to Defect #43514: Legacy icons still displayed alongside new SVG icons on some RTL pages added
- Related to Feature #43700: Improve RTL layout support by replacing physical CSS properties with logical ones in core CSS files added
Also available in: Atom
PDF