We’ve implemented right-to-left language support to OpenLMIS, making it more accessible and inclusive. With that improvement, the system can be comfortably displayed in the languages using RTL scripts, such as Arabic.
The Client
PATH is a global non-profit organization dedicated to advancing health equity through innovation. It works in partnership with public institutions, businesses, and communities to develop and scale up health solutions. Digital Square is a global initiative led by PATH. It aims to strengthen digital health systems in low- and middle-income countries by coordinating investments, fostering collaboration, and scaling digital health innovations for sustainable impact.
Digital Square launched a project aimed at enhancing the internationalization and security of existing digital goods. The goal was to improve inclusiveness and accessibility by introducing multilingual support and strengthening the security of these digital solutions.
As part of this initiative, SolDevelo contributed to the OpenLMIS platform by adding RTL language support, further expanding its reach to diverse linguistic communities. We have also conducted an OpenLMIS security audit, and implemented a number of fixes to improve the platform’s protection.
OpenLMIS
OpenLMIS is an open-source logistics management information system designed to improve the efficiency and transparency of health supply chains in low-resource settings. It helps organizations manage essential health commodities like vaccines, medications, and medical supplies by providing tools for inventory management, ordering, and reporting. With its modular architecture and adaptable design, OpenLMIS is widely used by health ministries and NGOs in several countries, supporting national health programs and contributing to improved healthcare delivery.
OpenLMIS RTL languages support
To further expand its potential audience and ensure inclusivity, OpenLMIS needs to accommodate regions where right-to-left (RTL) languages, such as Arabic, are predominantly spoken. By integrating RTL support, OpenLMIS can better serve Arabic-speaking users and improve accessibility for a wider range of communities.
However, implementing RTL support is not straightforward. Traditional left-to-right (LTR) layouts cannot simply be reversed – text alignment, component positioning, and the overall layout must be carefully restructured to provide a smooth and intuitive experience.
Recognizing this need, our team embarked on a project to implement comprehensive RTL support in OpenLMIS, ensuring that the application is accessible and intuitive for all users, regardless of language direction.
The Challenge
Adapting the existing LTR structure
OpenLMIS was originally designed with a focus on left-to-right (LTR) languages, meaning that many of its core UI components, navigation patterns, and visual elements were inherently structured for LTR orientation. This made implementing RTL support a complex task, as it required more than simply mirroring the layout. Every part of the interface had to be carefully evaluated and reconfigured to ensure that switching to an RTL language would provide a smooth and intuitive experience.
One of the primary challenges was establishing bidirectional layout management. We needed to implement a mechanism that dynamically switched between LTR and RTL orientations based on the user’s selected language. This required ensuring that the layout would flip correctly, while text alignment, padding, and positioning of components were all adjusted to create a natural and cohesive RTL experience.
Ensuring component-level RTL compatibility
Many UI elements – such as navigation menus, tables, buttons, and form inputs – needed targeted modifications to support RTL. This involved reviewing and restructuring each component individually. Components like tables required reordering of columns, navigation bars needed reversing, and dropdown menus had to open in the opposite direction. Ensuring that all these elements worked together seamlessly in RTL mode was critical to maintaining usability.
Additionally, seamless language switching presented its own set of challenges. Since some users might switch between LTR and RTL languages, the application had to handle dynamic re-rendering without causing disruptions. This required optimizing performance and preserving the state and functionality of ongoing user interactions as the language and layout direction changed.
The Solution
App configuration: Enabling RTL language support
To lay the groundwork for RTL support, we started by modifying the core configuration of OpenLMIS to dynamically handle language direction changes. A key part of this setup was making it easy for developers to specify which languages should be treated as RTL, using a centralized config.json file. This file includes a supportedRTLLanguages array where ISO-639-1 language codes can be defined.
By integrating this configuration, we ensured that whenever a user selects a language from this list, the application would automatically adjust the layout orientation to RTL. This setup allows for easy expansion as new RTL languages or dialects are introduced in the future, making OpenLMIS highly adaptable to diverse language requirements.
Adding Arabic language
Our first step in practical implementation was adding Arabic language support. Given its prevalence and unique script requirements, Arabic served as the ideal starting point for testing the robustness of the RTL adjustments. However, this integration posed its own set of challenges: ensuring that all components and interactions were mirrored correctly, and adapting text fields and input elements to handle Arabic script gracefully.
The majority of translations have been incorporated, and the app has been structured to fully support Arabic text rendering across the interface. These adjustments ensure that the user experience is seamless and intuitive, meeting the expectations of Arabic-speaking users.
Real-world examples: RTL vs. LTR comparison
Implementing RTL support required more than just reversing the layout; it involved a meticulous review of how each component would behave and appear in an RTL context.
To demonstrate the impact of these changes, we conducted a series of comparisons using real-world examples from the OpenLMIS application. By comparing the English (LTR) and Arabic (RTL) versions side-by-side, we gained insights into the nuances of adapting different UI elements for a seamless user experience.
Below, we highlight several key components that were adjusted, along with visual examples to illustrate the changes.
Login page
The login page in OpenLMIS is split into two main sections. The left side displays an OpenLMIS image, while the right side in the LTR version contains the username and password input fields, as well as the “Sign In” button.
When switching to RTL mode (Arabic), the entire structure is mirrored – placing the input fields and buttons on the left side while the OpenLMIS image shifts to the right. Text alignment in input fields changes to match the right-to-left reading order, ensuring that users can enter information comfortably. This reversal not only preserves visual consistency but also aligns with the natural flow of RTL languages.
Navigation bar
In the LTR version, the navigation bar routes are aligned to the left, followed by two action buttons: language switch and logout. There is also an additional header section where the OpenLMIS logo is positioned on the left, while user information such as the logged-in username is displayed on the right.
English (LTR) navigation bar
In RTL mode, the entire layout is mirrored. The navigation routes are moved to the right, and the action buttons shift to the left side. Similarly, in the header, the OpenLMIS logo is now placed on the right, while the user info is shifted to the left, preserving a logical and intuitive structure for RTL users.
Arabic (RTL) navigation bar
Tables
The table component required significant modifications to accommodate RTL support.
Columns that appear left-to-right in English are mirrored in Arabic, making the rightmost column the starting point. Text within each cell is aligned to the right, and header labels are reversed to reflect the RTL orientation. These adjustments ensure that users can read and interact with tabular data naturally, without confusion or misalignment. This example showcases how essential it is to not only reverse the structure but also maintain logical readability for users familiar with RTL languages.
Additional UI Elements
Additional UI elements, such as modals, tooltips, and notifications, have been modified to ensure a smooth RTL experience. Text alignment, padding, and spacing have been adjusted to eliminate visual inconsistencies and maintain balance. Below, there is a table that showcases the majority of the UI elements used in OpenLMIS, highlighting a direct comparison between the RTL and LTR modes. This visual reference helps illustrate the impact of RTL adjustments and the level of detail involved in achieving UI compatibility.
| UI element | English (LTR) version | Arabic (RTL) version |
| Button |  |  |
| Breadcrumbs |  |  |
| Dropdown input |  |  |
| Alert popup |  |  |
| Calendar input |  |  |
| Context menu |  |  |
| Pagination controls |  |  |
| Notification banner |  |  |
| Toast |   |   |
| Checkbox |  |  |
| Tabs |  |  |
The Results
The implementation of RTL support in OpenLMIS marks a significant milestone in expanding the platform’s accessibility and usability for a broader global audience. By introducing this feature, we have laid the groundwork for supporting languages like Arabic, which require a right-to-left orientation. The project involved meticulous planning and adjustments, from developing a flexible configuration system for defining RTL languages to modifying the UI components and ensuring seamless transitions between LTR and RTL modes.
Throughout this process, we prioritized maintaining the integrity and usability of the interface, regardless of language direction. The integration of Arabic language support demonstrates our commitment to delivering a cohesive experience for users worldwide. We focused on reversing the layout of critical UI components such as login pages, navigation bars, data grids, and more to ensure that every part of the application feels intuitive and responsive.
Going forward, our efforts will be dedicated to refining the existing RTL features, addressing any remaining issues, and incorporating additional languages based on community needs. With this solid foundation, OpenLMIS is now better equipped to serve diverse linguistic communities and ensure that every user can navigate and utilize the platform efficiently, whether they are working in an LTR or RTL language.
