Adding Right-to-Left support to your web application with CSS logical properties 使 CSS Logical Properties 讓你的 Web App 援 RTL 版 — Lessons from Redmine 2026-08-09 面 支 用 MAEDA Go (前田剛) 

About me MAEDA Go (前 剛) ■ 29 years of IT industry experience (1997-) ■ CEO of Far End Technologies Corporation in Japan A project management SaaS provider (2008-) ■ Founder of “Redmine.JP”, the largest website about Redmine in Japan (2007) x.com/g_maeda fb.me/MAEDA.Go 田 ■ Redmine development team member（2014-） 

What This Talk Is About This presentation explains how to support right-to-left (RTL) scripts in a web application using CSS logical properties. It also covers some points to keep in mind, based on lessons learned from adding RTL support to Redmine. 

What Is Redmine? Redmine is an open-source web application for project management. It was rst released in 2006 and has been actively developed for 20 years. It is also used for the development of the Ruby programming language. fi https://bugs.ruby-lang.org/ 

Redmine Is Highly Customizable fi fi fl fl fl fi Redmine is highly exible and can be used for many types of work beyond project management. This exibility comes from features such as custom elds for de ning your own data elds, trackers for applying different work ows, and role-based access control. 

Redmine Supports More Than 50 Languages Redmine supports more than 50 languages. These include right-to-left (RTL) languages, such as Arabic, Persian, and Hebrew, which are written from right to left. English (LTR) Hebrew (RTL) 

Users can choose the language used for the user interface in their account settings. 

What Is RTL (Right-to-Left) ? RTL (Right-to-Left) is a writing direction in which text is written from right to left. Arabic, Persian, and Hebrew use RTL. In contrast, Chinese and English use LTR (Left-to-Right). RTL and LTR are called writing directions. 

RTL Flips More Than Just Text In RTL layouts, not only text but also UI elements such as progress bars are ipped horizontally. Roughly speaking, the whole screen looks like a mirror image. Hebrew (RTL) fl English (LTR) 

RTL Support Is Important for Multilingual Applications Around 500 million people use languages written in RTL scripts. For web applications used globally, RTL support is an important requirement. Language Number of rst language speakers (millions) Urdu 78 Egyptian Arabic 83 Iranian Persian 65 Levantine Arabic 55 Sudanese Arabic 43 fi From: “List of languages by total number of speakers” (Wikipedia) 

RTL Support in Redmine Redmine has supported RTL layouts since 2010. However, it used separate RTL CSS to override the standard CSS, which was designed for LTR layouts. This approach caused several problems. 

Redmine's Approach to RTL Support in 2010 Redmine used separate RTL CSS to override positions and margins de ned for left and right in the standard CSS. This approach worked well at rst and was a fi fi reasonable choice at the time. 

Problems with the Override Approach With this approach, the RTL CSS had to be updated to keep it in sync with the standard CSS whenever the UI changed. However, the RTL CSS was often not updated, so the RTL layout gradually broke over time and eventually became dif cult to use. D E T A D T OU fi ⚠ L N E K O R 💥B T U O Y A 

Solving the Problem I started working on this problem in late 2025. In Redmine 7.0, released in June 2026, the RTL layout problems were xed. The approach I will explain from here can also be applied to adding RTL support to fi your own web applications. 

CSS Logical Properties The solution I chose was CSS logical properties. Instead of using physical directions such as left and right, CSS logical properties use directions such as the start and end of the writing direction. 

Why CSS Logical Properties Solve the Problem Logical properties automatically switch left and right based on the writing direction, so the same CSS works for both LTR and RTL. This allowed Redmine to remove the separate RTL CSS. 

Changes Made in Redmine To improve RTL support in Redmine 7.0, I mainly made the following four changes. ■ Set / to tell the browser writing direction ■ Replaced physical CSS properties with logical properties ■ Replaced directional characters, such as arrows in buttons, with images fl ■ Prevented elements that should not be mirrored from being ipped in RTL 

Changes Made in Redmine (1): First, I added the dir attribute to the tag. It tells the browser whether the writing direction is LTR or RTL. The browser uses this setting when rendering text. 

When dir="rtl" is speci ed, the web browser sets the writing direction to RTL fi and renders the content accordingly. 

Changes Made in Redmine (2): Replacing Physical Properties with Logical Properties I replaced physical properties such as margin-left and margin-right with logical properties such as margin-inline-start and margin-inline-end. Instead of replacing them all at once, I worked selector by selector and checked how the UI looked after each change. This took a lot of time. 

After the change, one stylesheet (application.css) works for both LTR and RTL, reducing complexity and maintenance. 

Changes Made in Redmine (3): Replacing “←” and “→” with Images Most directional characters, such as arrows, do not change direction even when is set. When used in UI elements such as buttons, they often need to be ipped in RTL. fl fl In Redmine, I replaced these characters with images and ipped them using CSS. 

The screenshots below shows a case where an arrow needs to be ipped in an RTL UI. The button that moves a column from “Available Columns” to “Selected Columns” points right in LTR, but it should point left in RTL. However, if the “→” fl character is used as the button label, it still points right in RTL. 

Changes Made in Redmine (4): Not Everything Should Be Flipped Not everything should be ipped in RTL. For example, numbers should still be fl right-aligned even in RTL. 

How to Add RTL Support to Your Application So far, I have covered the four main changes we made to improve RTL support in Redmine. There are other things to consider for full RTL support, but you can implement basic RTL support for your web application with these changes. ■ Set the writing direction based on the language: dir="rtl"> /

Thank you for listening to my talk. MAEDA Go (前 剛) ■ 29 years of IT industry experience (1997-) ■ CEO of Far End Technologies Corporation in Japan a project management SaaS provider (2008-) ■ Founder of “Redmine.JP”, the largest website about Redmine in Japan (2007) x.com/g_maeda fb.me/MAEDA.Go 田 ■ Redmine development team member（2014-）