Implement RTL Support in Web Application

Overview

Do you know that over 20 countries in the world read and write from right to left, such as Arabic, Hebrew, Persian, and Urdu? Without proper support, web applications designed for these languages can be confusing and difficult to read. That's why it's essential to consider Right-to-Left (RTL) support when building web applications.

I have the opportunity to work on a learning management system project abroad that needs to enable their users to choose a variety of languages including several languages that are being read from right to left.

What is TailwindCSS

Having been using this for years, Tailwind CSS is a popular utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces. It supports RTL layouts out of the box, making it an ideal choice for building web applications with RTL languages.

Prerequisite

Enabling RTL support means that you need to implement multiple languages support first for your web applications. Basic knowledge of Internationalization (i18n) is required to implement RTL support.

Enabling RTL Support

After you have created a multi-language website that can change the language of the content by switching the locale from the Navigation section, you need to do one more thing. Languages like Arabic need RTL support. The content should be aligned from Right To Left.

HTML has built-in support for RTL:

<html dir="rtl" lang="ar">
</html>

Define Languages that Require RTL

Create an array that consists of all languages that need right-to-left support:

export const RTLLanguages = ['ur', 'ar', 'he']

ur stands for Urdu
ar stands for Arabic (standard)
he stands for Hebrew

Dynamic HTML Direction

Here is the implementation in _document.js that is a custom document in Next.js:

import Document, { Html, Head, Main, NextScript } from "next/document";
import { RTLLanguages } from "constants/languages";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, locale: ctx?.locale || "en" };
  }

  render() {
    return (
      <Html
        dir={RTLLanguages.includes(this.props.locale) ? "rtl" : "ltr"}
        lang={this.props.locale}
      >
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

To overcome the refresh requirement, use the useEffect hook:

import { useRouter } from "next/router";
import { RTLLanguages } from "constants/languages";

function MyApp({ Component, pageProps }) {
  const { locale = "en" } = useRouter();

  useEffect(() => {
    const dir = RTLLanguages.includes(locale) ? "rtl" : "ltr";
    document?.querySelector("html")?.setAttribute("dir", dir);
    document?.querySelector("html")?.setAttribute("lang", locale);
  }, [locale]);

  return <Component {...pageProps} />;
}

Styling with TailwindCSS

Right-to-left will change the direction of your web application - everything will be reversed or started from the right side of your screen. TailwindCSS v3 has built-in support for RTL languages with rtl: and ltr: modifiers:

<div class="ltr:ml-4 rtl:mr-4">
  Content with proper margins for both directions
</div>

For Tailwind v2, you can use the third-party plugin tailwindcss-rtl.

Best Practices

When implementing RTL support, consider:

Mirroring the layout - Navigation, sidebars, and icons should be mirrored
Text alignment - Text should align to the right
Directional icons - Arrows and directional icons should be flipped
Numbers and dates - These often remain left-to-right even in RTL languages

Conclusion

Implementing RTL support is essential for creating inclusive web applications that serve users worldwide. With TailwindCSS and Next.js, the implementation becomes straightforward and maintainable.