Open source

Right-to-left language support in PatternFly

The what, the why, and the how behind PatternFly’s recent update

Image by Nick Fewings on Unsplash

If you haven’t heard yet, our first quarterly update to PatternFly 5 went live this month. The main goal for PatternFly 5.1 was to focus development efforts on the adoption of right-to-left (RTL) language support. We’re excited to share that a quarter’s worth of work helped us get RTL out and implemented for all PatternFly components, charts, and icons.

Curious about what this means? Keep reading for the nitty gritty on what RTL entails, why we’re supporting it, and how we updated our codebase to support it.

What is RTL?

RTL is a core component of bidirectionality, which means that you support languages that are read from right to left (like Arabic and Hebrew) in addition to those read from left to right. W3C highlights all of the languages that RTL supports.

Image from the GitHub Blog.

Why support RTL?

It’s pretty simple, we wanted to support RTL to better enable product internationalization. Supporting RTL within our components means that developers have to do less work to ensure that their products will work across languages. It also means that RTL users will have a better and more consistent product experience, since true RTL support is embedded into the building blocks of a UI designed with PatternFly.

How did we add support for RTL?

To achieve this support, our components now use logical properties, like block-start, inline-end, block-end, and inline-start. This ensures that styles are laid out properly, no matter which language you’re using. To avoid a sweeping breaking change, PatternFly variable names still use “top”, “bottom”, “left”, and “right”, even though they actually use logical properties.

You can check out our RTL handbook for more details and resources, but, for the most part, you don’t have to do anything to implement RTL. If you experience any issues or concerns, please reach out to us on Slack or start a GitHub discussion.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.