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

Published in

Black Lens

3 min readJan 24, 2019

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

“A yellow road sign with a black arrow pointing in both directions on the dry roadside near Death Valley” by Pablo García Saldaña on Unsplash

จริงๆหัวข้อนี้เราเองก็อยากลองเขียนดูนะ เป็นบล็อกสั้นๆ เหตุเกิดจากการเขียนหน้า 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

The main difference between left-to-right (LTR) and right-to-left (RTL) language scripts is the direction in which…

material.io

สำหรับ 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…

android.jlelse.eu

ดังนั้น 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

Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share…

stackoverflow.com

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

การที่ให้แอปของเรานั้น 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 ต่างๆ ตามรูปนี้เลย

โดยอันซ้ายคือแบบปกติ ltr เนอะ เราก็ทำ layout ปกติแบบรูปซ้าย ส่วนอันขวาเป็นแบบ rtl ซึ่งได้จากการ preview ที่หน้า layout นี่แหละ ถ้าเป็นภาษาที่อ่านขวาไปซ้ายจะเข้าทางพอดี

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

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