繁體中文（香港）
在你的網頁應用程式中支援 RTL 語言佈局
這篇博客文章將引導你有效地在網頁應用程式中實現 RTL（從右到左）語言的支援的基本步驟。
Charles
Developer
Developer
Stop wasting weeks on user auth
Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.
Get started
這篇博客文章將引導你有效地在網頁應用程式中實現 RTL（從右到左）語言的支援的基本步驟。
Logto 是你在客戶身份和存取管理 (CIAM) 解決方案中的更佳選擇。它是開放源碼的，並由活躍的社群支持。最近，我們的社群（感謝 @zaaakher）為 Logto 管理控制台和 Logto 登錄體驗做出了阿拉伯語言翻譯，使它們對阿拉伯語使用者更容易接觸。
然而，我們知道僅僅有翻譯是不夠的。我們需要確保用戶介面佈局也針對從右到左 (RTL) 語言進行了優化。在本教程中，我們將討論 RTL 相容中的常見挑戰以及如何在你的網頁應用程式中解決它們。
在一個從左到右 (LTR) 的網頁應用程式中，佈局被設計為從螢幕的左側開始。內容從左到右流動，滾動條在螢幕的右側。相反，RTL 網頁應用程式從螢幕的右側開始。內容從右到左流動，滾動條在螢幕的左側。
以 Logto 控制台截圖為例：
將 LTR 網頁應用程式轉換為 RTL 友好時，你可能會遇到以下挑戰：
以下是一些我們在使 Logto 變得 RTL 友好時使用的竅門和技巧：
dir="rtl"如果當前語言是阿拉伯語或任何其他 RTL 語言，將 HTML 屬性 dir="rtl" 應用於網頁應用程式的根元素。
這樣有助於瀏覽器理解內容應以 RTL 模式顯示，並會自動調整前三個挑戰（文本對齊、內容方向和滾動條位置）。但是，如果你使用自訂滾動條，你可能需要手動調整位置。
當語言是 RTL 時，我們可以使用 CSS 的 transform: scaleX(-1); 來水平翻轉圖標。以下是一個用 React 和 TypeScript 編寫的例子：
使用此組件，你可以包裝圖標組件，並在 RTL 模式下自動翻轉圖標。
使用 JavaScript 函數 toLocalString 來本地化日期、時間和數字。例如：
你也可以選擇使用類似 date-fns 的庫來處理日期和時間本地化。
對於數字，你也可以使用 toLocaleString 方法，但使用 ar-u-nu-arab 選項來顯示阿拉伯印度數字。
說明
你可能需要根據需要調整間距、定位、邊框半徑以及其他 CSS 樣式。以下是一些常見情況：
你可以使用 margin-inline-start、margin-inline-end、padding-inline-start 和 padding-inline-end 來處理 LTR 和 RTL 模式，而不是撰寫 margin-left、margin-right、padding-left 和 padding-right。
當使用絕對定位時，你可以使用 inset-inline-start 和 inset-inline-end 代替 left 和 right。
當使用邊框半徑時，你可以使用 border-start-start-radius、border-start-end-radius、border-end-start-radius 和 border-end-end-radius 來處理 LTR 和 RTL 模式。
可能還會有一些邊角案例，上述方法無法處理。在此類情況下，你可以使用 :dir() 偽類來根據文本方向應用不同的樣式。
在本教程中，我們討論了實現 RTL 友好介面時的挑戰，並分享了我們在 Logto 控制台和 Logto 登錄體驗中如何解決它們。通過應用上述技巧和竅門，你也可以讓你的網頁應用程式對 RTL 語言使用者更為友好。