Project

General

Profile

Actions

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.

Status:
Closed
Priority:
Normal
Assignee:
Category:
UI
Target version:
Resolution:
Fixed

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.


Related issues

Related to Redmine - Feature #43506: Declare text direction on HTML element for better RTL/LTR styling supportClosedGo MAEDAActions
Related to Redmine - Defect #43592: Ajax indicator is broken in RTL layoutsClosedGo MAEDAActions
Related to Redmine - Defect #43513: Misaligned RTL layout on the project Overview pageClosedGo MAEDAActions
Related to Redmine - Defect #43509: Avatar in issue view is positioned incorrectly in RTL layoutClosedGo MAEDAActions
Related to Redmine - Defect #43664: Project menu tab left/right buttons are broken in RTL layoutClosedGo MAEDAActions
Related to Redmine - Defect #43672: Indent icons for subtasks and subprojects in list tables are misplaced in RTL layoutClosedGo MAEDAActions
Related to Redmine - Defect #43675: "Add filter" dropdown in query form appears on the wrong side in RTL layoutClosedGo MAEDAActions
Related to Redmine - Defect #43514: Legacy icons still displayed alongside new SVG icons on some RTL pagesClosedGo MAEDAActions
Related to Redmine - Feature #43700: Improve RTL layout support by replacing physical CSS properties with logical ones in core CSS filesClosedGo MAEDAActions
Actions

Also available in: Atom PDF