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 2 months ago. Updated 8 days ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
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 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
Related to Redmine - Defect #43664: Project menu tab left/right buttons are broken in RTL layoutClosedGo MAEDA

Actions
Related to Redmine - Defect #43672: Indent icons for subtasks and subprojects in list tables are misplaced in RTL layoutClosedGo MAEDA

Actions
Related to Redmine - Defect #43675: "Add filter" dropdown in query form appears on the wrong side in RTL layoutClosedGo MAEDA

Actions
Related to Redmine - Defect #43514: Legacy icons still displayed alongside new SVG icons on some RTL pagesClosedGo MAEDA

Actions
Related to Redmine - Feature #43700: Improve RTL layout support by replacing physical CSS properties with logical ones in core CSS filesClosedGo MAEDA

Actions
Actions #1

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?

Actions #2

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
Actions #3

Updated by Go MAEDA 26 days ago

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.

Actions #4

Updated by Go MAEDA 25 days ago

  • Related to deleted (Defect #43591: Context menu is hidden behind sidebar in RTL layout)
Actions #5

Updated by Go MAEDA 17 days ago

  • Target version changed from Candidate for next major release to 7.0.0
Actions #6

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.

Actions #7

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
Actions #8

Updated by Go MAEDA 10 days ago

  • Related to Defect #43514: Legacy icons still displayed alongside new SVG icons on some RTL pages added
Actions #9

Updated by Marius BĂLTEANU 8 days ago

Beautiful work!

Actions #10

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
Actions

Also available in: Atom PDF