Bu blog yazısı, web uygulamanızda RTL (Sağdan-sola) dil desteğini etkili bir şekilde uygulamak için temel adımları size rehberlik edecektir.
Logto, Müşteri Kimliği ve Erişim Yönetimi (CIAM) çözümü olarak en iyi tercihinizdir. Açık kaynaklıdır ve canlı bir topluluk tarafından desteklenmektedir. Yakın zamanda, topluluğumuz (kredi @zaaakher), Logto Yönetici Konsolu ve Logto Giriş Deneyimi için Arapça dil çevirisi katkısında bulundu ve Arapça konuşan kullanıcılar için daha erişilebilir hale getirdi.
Ancak, yalnızca bir çeviriye sahip olmanın yeterli olmadığını anlıyoruz. UI düzeninin de sağdan-sola (RTL) diller için optimize edildiğinden emin olmamız gerekiyor. Bu öğreticide, RTL uyumluluğunda karşılaşılan yaygın zorluklar ve bunların web uygulamanızda nasıl ele alınacağı hakkında konuşacağız.
Soldan-sağa (LTR) bir web uygulamasında, düzen ekranın sol tarafından başlayacak şekilde tasarlanmıştır. İçerik soldan sağa doğru akar ve kaydırma çubuğu ekranın sağ tarafında bulunur. Buna karşılık, bir RTL web uygulaması ekranın sağ tarafından başlar. İçerik sağdan sola doğru akar ve kaydırma çubuğu ekranın sol tarafında bulunur.
Logto Konsolu ekran görüntüsünü bir örnek olarak alalım:
Bir LTR web uygulamasını RTL dostu hale getirirken, aşağıdaki zorluklarla karşılaşabilirsiniz:
Logto'yu RTL dostu yapmak için yaptığımız bazı ipuçları ve püf noktaları:
dir="rtl" KullanınMevcut dil Arapça veya başka bir RTL dili ise web uygulamanızın kök elemanına dir="rtl" HTML attribute'unu uygulayın.
Bu, tarayıcının içeriğin RTL modunda gösterilmesi gerektiğini anlamasına yardımcı olur ve otomatik olarak ilk üç zorluğu (metin hizalaması, içerik yönü ve kaydırma çubuğu konumu) ayarlar. Ancak, özel bir kaydırma çubuğu kullanıyorsanız, pozisyonu manuel olarak ayarlamanız gerekebilir.
Dil RTL ise, ikonları yatay olarak çevirmek için CSS transform: scaleX(-1); kullanabiliriz. İşte React ve TypeScript ile yazılmış bir örnek:
Bu bileşenle, ikon bileşenini sarabilir ve RTL modunda ikonu otomatik olarak çevirebilirsiniz.
Tarih, saat ve sayıları yerelleştirmek için JavaScript fonksiyonu toLocalString kullanın. Örneğin:
Tarih ve saat yerelleştirmeyi ele almak için date-fns gibi bir kütüphane kullanmayı da tercih edebilirsiniz.
Sayılar için, toLocaleString metodunu, ancak ar-u-nu-arab seçeneği ile Arap-Hint rakamlarını göstermek için kullanabilirsiniz.
Açıklama
Boşluk, konumlandırma, border-radius ve diğer CSS stillerini uygun şekilde ayarlamanız gerekebilir. Bazı yaygın durumlar şunlardır:
margin-left, margin-right, padding-left ve padding-right yazmak yerine, hem LTR hem de RTL modlarını ele almak için margin-inline-start, margin-inline-end, padding-inline-start ve padding-inline-end kullanabilirsiniz.
Mutlak konumlandırma kullanırken, left ve right yerine inset-inline-start ve inset-inline-end kullanabilirsiniz.
Border-radius kullanırken, border-start-start-radius, border-start-end-radius, border-end-start-radius ve border-end-end-radius kullanarak hem LTR hem de RTL modlarını ele alabilirsiniz.
Yukarıdaki yöntemlerle ele alınamayan bazı köşe durumları olabilir. Bu gibi durumlarda, metin yönüne bağlı olarak farklı stiller uygulamak için :dir() pseudo-class'ını kullanabilirsiniz.
Bu öğreticide, RTL dostu bir UI uygularken karşılaşılan zorlukları ve bunları Logto Konsolu ve Logto Giriş Deneyimi'nde nasıl ele aldığımızı tartıştık. Yukarıda bahsedilen ipuçları ve püf noktalarını uygulayarak, web uygulamanızı RTL dil kullanıcılarına daha erişilebilir hale getirebilirsiniz.