右から左へのサポート

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

概要

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

LTRとRTLのレンダリングの違いを示すために、英語とアラビア語の一般翻訳ランディングページを見てください。

ガイド

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

generaltranslationライブラリのgetLanguageDirection()関数を使用して、言語が"rtl"か"ltr"かを判断できます。

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

my-app/app/layout.tsx

import { getLocale } from 'gt-next'
import { getLanguageDirection } from 'generaltranslation';
 
export default async function RootLayout({ children }) {
        
  const locale = await getLocale(); // 例: アラビア語の場合は "ar"
  const dir = getLanguageDirection(locale); // 例: "右から左" の場合は "rtl"
 
  return (
    <html lang={locale} dir={dir}>
      <body> 
        {children}
      </body>
    </html>
  )
}

右から左へのサポート

概要

ガイド

このページについて