เป็น developer เราต้องรู้เรื่อง RTL Support หรือไม่?

ช่วงนึงต้องมาเขียน left และ start พร้อมกัน กับ right และ end พร้อมกัน ตาม warning ของ Android มันเพราะอะไรกันนะ?

จริงๆหัวข้อนี้เราเองก็อยากลองเขียนดูนะ เป็นบล็อกสั้นๆ เหตุเกิดจากการเขียนหน้า layout ของฝั่ง Android แล้วมันขึ้น warning มาแบบนี้

เราก็เลย อ่ะ ลองใส่ให้เขาด้วยก็ได้นะ ตอนนั้นเป็น targetSdkVersion 25 อยู่เลย

ตอนนี้ก็เป็น targetSdkVersion 27 และไม่จำเป็นต้องใส่ซ้อนกันแล้วนะ

แล้วก็มีความสงสัย เจ้า right-to-left support คืออะไรนะ แต่ก็ยังไม่ถามอากู๋ จนมางาน LINE Developer Meetup ครั้งที่ 2 ก็เพิ่งมานึกออก อ่ออออออ หมายถึง support สำหรับภาษาที่เขียนขวามาซ้ายไงเธอ (หรือใน session ของพี่ต้าในงาน UX Thailand ที่เป็น keynote ก็พูดถึงเรื่องนี้ด้วยเช่นกัน)

ปกติภาษาที่เราเขียนกันเนี่ย ก็ภาษาไทย ภาษาอังกฤษ มันจะเขียนซ้ายมาขวาใช่ป่ะ หลายๆภาษาก็ด้วยแหละ เช่น จีน เกาหลี ญี่ปุ่น อินโด ลาว พม่า กัมพูชา บลาๆๆๆๆ เป็นส่วนใหญ่เลย แล้วเราก็จะใช้ Left กับ Right ใช่ป่ะ

พอเป็นภาษาที่เขียนขวามาซ้าย เช่น พวกภาษาอารบิค หรือภาษาแขกนั่นแหละ พอมาแสดงผลมันก็ขัดกับความเคยชินเขาไง

Right-to-left - Wikipedia

In a right-to-left, top-to-bottom script (commonly shortened to right to left or abbreviated RTL), writing starts from…

en.wikipedia.org

เวลาเราทำแอป และใส่พวก paddingStart จะชอบขึ้นมาแบบนี้ เพื่อเตือนเราว่า เห้ยยยใส่ paddingEnd เผื่อคนอ่านแบบขวาไปซ้ายด้วยสิ

เราก็อาจจะใส่ให้ครบตามที่บอกอะเนอะ

ซึ่งใน Material Design ก็บอก Use Case ต่างๆ เผื่อทำแอปรองรับคนที่ใช้ภาษาขวามาซ้ายเนอะ และไม่ใช่เอาไปเปลี่ยนมันหมดทุกอย่าง บางอย่างซ้ายไปขวาตามเดิมไป

Bidirectionality

UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored to ensure content is easy to understand.

Material Design

สำหรับ Developer ก็มีคนมาสรุปให้แล้วด้วย

RTL Support on Android. Here is all you need to know

There comes a point in an app’s lifecycle when you decide to widen your audience. Although your app works great and you have a huge number of daily downloads, not everyone is happy. Why 🤔? No RTL…

AndroidPubRishabh Harit

ดังนั้น Android เลยแนะนำให้ใส่ Start กับ End แทน Left กับ Right เพื่อรองรับทั้ง left-to-right support และ right-to-left support นั่นเอง

แต่มีวิธีที่ง่ายกว่านั้นนะ แบบทั้งแอปเลย

แน่นอนว่า เราหาตัวอย่างไม่ค่อยได้เท่าไหร่ งั้นลองอ่านอันนี้ดู คนนี้เขาจะทำ RadioButton โดยให้มันชิดขวา เพื่อให้ text ที่เราเห็นนั้น สามารถอ่านจากขวามาซ้าย แต่คำถามมันปี 2013 แล้วอะเนอะ …

how to put the text on the left of a radio button in android

I want to put the text of a radio button on the left not on the right I found this solution <RadioGroup android:id=”@+id/radios” android:layout_width=“fill_parent” ...

Stack OverflowBasILyoS

สรุปเมื่อสักครู่ เราแอบไปหาหนทางง่ายๆมา …

การที่ให้แอปของเรานั้น support rtl ทั้งแอป ไปใส่ที่ AndroidManifest.xml แบบนี้

<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.supportRtl">
    <application android:supportsRtl="true">
        ...
    </application>
</manifest>

โดยเพิ่มเจ้า android:supportsRtl=”true” ใน application จ้า เท่านี้ทั้งแอปก็ support rtl แล้ว ไม่ต้องทำอะไรเลยใน layout ต่างๆ ตามรูปนี้เลย

ปล. ตามปกติมันเป็น support ltr จ้า

สุดท้ายฝากร้านกันสักนิด ฝากเพจด้วยนะจ๊ะ