Right-to-Left Support

Overview

While most languages are written left-to-right (LTR), some languages are written right-to-left (RTL). These languages include Arabic, Hebrew, Persian, and Urdu which have a combined total of over 500 million speakers worldwide.

Look at the General Translation landing page in English and Arabic to illustrate the difference between ltr and rtl rendering.

Guide

To add RTL support to your application, all we need to do to is determine the direction of the language and set the direction of the text on the screen accordingly.

You can use the getLanguageDirection() function from the generaltranslation library to determine if a language goes "rtl" or "ltr".

In gt-next use the getLocale() function to get the locale in the root layout, then add the lang and dir props to the <html> tag:

my-app/app/layout.tsx

import { getLocale } from 'gt-next'
import { getLanguageDirection } from 'generaltranslation';
 
export default async function RootLayout({ children }) {
        
  const locale = await getLocale(); // e.g. "ar" for Arabic
  const dir = getLanguageDirection(locale); // e.g. "rtl" for "right-to-left"
 
  return (
    <html lang={locale} dir={dir}>
      <body> 
        {children}
      </body>
    </html>
  )
}

Right-to-Left Support

Overview

Guide

On this page