右から左へのサポート

アプリケーションに右から左（RTL）サポートを追加するためのステップバイステップガイド

概要

ほとんどの言語は左から右（LTR）に書かれますが、一部の言語は右から左（RTL）に書かれます。これらの言語にはアラビア語、ヘブライ語、ペルシャ語、ウルドゥー語が含まれており、世界中で合計5億人以上の話者がいます。

LTRとRTLの表示の違いを示すために、英語とアラビア語のGeneral Translationのランディングページを見てみましょう。

ガイド

アプリケーションにRTLサポートを追加するには、言語の方向を判定し、それに応じて画面上のテキストの方向を設定するだけです。

useLocaleDirection()フックを使用して、言語が"rtl"か"ltr"かを判定できます。

useLocale()関数を使用してルートレイアウトでロケールを取得し、<html>タグにlangとdirプロパティを追加します：

my-app/app/layout.tsx

import { useLocale, useLocaleDirection, GTProvider } from 'gt-next'

export default function RootLayout({ children }) {
        
  const locale = useLocale(); // 例：アラビア語の場合は "ar"
  const dir = useLocaleDirection(); // 例：「右から左」の場合は "rtl"

  return (
    <html lang={locale} dir={dir}>
      <body> 
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  )
}

右から左へのサポート

概要

ガイド

このページについて