Project

General

Profile

Actions

Feature #43515

open

Improve RTL layouts by removing rtl.css and integrating its overrides into application.css using CSS logical properties

Added by Go MAEDA about 1 month ago. Updated 6 days ago.

Status:
New
Priority:
Normal
Assignee:
Category:
UI
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:

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 MAEDA

Actions
Related to Redmine - Defect #43592: Ajax indicator is broken in RTL layoutsClosedGo MAEDA

Actions
Related to Redmine - Defect #43513: Misaligned RTL layout on the project Overview pageClosedGo MAEDA

Actions
Related to Redmine - Defect #43509: Avatar in issue view is positioned incorrectly in RTL layoutClosedGo MAEDA

Actions
Actions

Also available in: Atom PDF