使用 CSS Logical Properties 讓你的 Web App 支援 RTL 版面 / Adding Right-to-Left support to your web application with CSS logical properties — Lessons from Redmine

Supporting right-to-left (RTL) languages such as Arabic and Hebrew remains an often overlooked challenge in web application internationalization. Unlike English and Chinese, which are written left to right (LTR), RTL languages require layouts and visual alignment throughout the user interface to be mirrored.

Redmine, a 20-year-old open source project management application, has supported RTL languages since 2010. Its RTL support was originally implemented using a separate RTL-specific stylesheet that overrode the main LTR styles, which was a common approach at the time. As the user interface evolved, maintaining two parallel stylesheets became increasingly difficult, and the RTL layout gradually became broken in many places.

In this talk, I will explain how I rebuilt Redmine's RTL support using CSS logical properties. By replacing physical properties such as margin-left and padding-right with logical properties, a single stylesheet can automatically adapt to both LTR and RTL layouts. I will discuss the migration process, practical implementation techniques, and lessons learned while modernizing an existing codebase.

Attendees will learn how existing LTR-only web applications can gain RTL support with a relatively small set of CSS changes. Through practical examples from Redmine, they will learn concrete techniques for implementing maintainable RTL support using CSS logical properties. Although the examples come from Redmine, the approach is applicable to many web applications looking to add maintainable RTL support.