Tambahkan `dir="auto"` ke kolom input dan area teks Anda

 (mough.xyz)
3 poin oleh GN⁺ 2023-08-24 | 1 komentar | Bagikan ke WhatsApp
  • Hanya dengan satu atribut HTML dir="auto", kolom input dan area teks dapat otomatis mendukung bahasa RTL (kanan-ke-kiri) seperti Ibrani, Arab, dan Urdu
  • Selama ini yang dikenal hanya cara manual dan rumit, seperti menulis listener pendeteksi karakter, memakai library pihak ketiga, atau mengganti manual ke dir="right"
  • Karena tidak ada hasil pencarian untuk "textarea rtl" yang menyebut dir="auto", hal ini lama disalahpahami sebagai masalah yang perlu intervensi langsung
  • Saat benar-benar diterapkan, hasilnya langsung bekerja normal tanpa parsing bahasa tingkat rendah tambahan
  • Perubahan kecil tetapi besar dampaknya ini adalah elemen kunci internasionalisasi (i18n) yang menentukan apakah pengguna di seluruh dunia bisa memakai aplikasi

Sulitnya dukungan RTL

  • Sejak awal Standard Notes, sudah ada permintaan dukungan bahasa RTL seperti Ibrani, Arab, dan Urdu, tetapi terus ditunda karena tampak sulit diimplementasikan
  • Setiap kali ditinjau, masalah ini terlihat seperti pekerjaan parsing bahasa yang mengharuskan penanganan encoding tingkat rendah seperti Unicode dan ASCII
  • Topik yang sama berulang setiap beberapa bulan, tetapi saran yang muncul selalu sama
    • Menulis parser karakter sendiri
    • Menggunakan library pihak ketiga
    • Menerapkan dir="right"

Keterbatasan pencarian

  • Mencari dengan kata kunci seperti "textarea rtl" atau "textarea right to left" pun sama sekali tidak menampilkan dir="auto" di hasil
  • Yang muncul justru jawaban Stack Overflow yang menyarankan memakai dir="rtl" pada tag atau library pihak ketiga di Twitter
  • Karena hanya mengandalkan halaman pertama hasil pencarian, masalah ini terus dianggap membutuhkan penanganan langsung dan selalu tersisih dari prioritas

Menemukan solusinya

  • Beberapa minggu lalu, saat mencari lagi, ditemukan komentar pada sebuah tulisan GitHub yang mengatakan cukup tambahkan dir="auto" ke textarea
  • Masalah yang selama 1 tahun dicari solusinya ternyata selesai hanya dengan satu baris
  • Setelah dicoba langsung, hasilnya bekerja sempurna tanpa cacat

Cara menerapkannya

  • Cukup tambahkan satu baris atribut ke kolom input atau area teks
    • <textarea dir='auto'> שלום, עתיד. </textarea>
  • Arah teks akan ditentukan otomatis berdasarkan nilai input
  • Sebagai referensi, dokumentasi atribut dir di MDN menjelaskan hal ini

Bacaan terkait

1 komentar

 
GN⁺ 2023-08-24
Komentar Hacker News

  • Ini memang cara mudah untuk memperbaiki rendering teks pada kolom input dan textarea, tetapi perlakuan yang sama juga diperlukan pada elemen yang menampilkan teks yang sudah dikirim
    Dan saat berhadapan dengan teks dua arah, misalnya nama produk berbahasa Inggris di dalam paragraf Arab, tingkat kerumitannya menjadi benar-benar berbeda
    Saat ini Chrome memiliki bug regresi yang memengaruhi rendering teks RTL pada kolom input dengan dir='auto', tetapi perbaikannya sudah dirilis dan dijadwalkan masuk ke rilis berikutnya

  • MDN selalu jadi penyelamat: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

  • Dunia itu ada juga di luar Amerika Serikat, tetapi tergantung sifat situsnya, dukungan ini tidak selalu wajib
    Saya bukan orang Amerika maupun penutur asli bahasa Inggris, tetapi untuk 99% situs yang saya kunjungi, tidak masalah sama sekali jika nama pengguna atau postingan tidak mengizinkan karakter RTL
    Jika ini belum diselesaikan di tingkat browser atau sistem operasi, saya rasa saya hampir tidak punya kewajiban untuk mendukungnya
    Dan ini bukan berarti saya ingin menindas kelompok minoritas

    • Setiap kali mempertimbangkan dukungan bahasa lain untuk proyek pribadi, saya selalu mengingat hal ini
      Kalau cari cepat, katanya ada sekitar 840 juta pengguna bahasa Inggris, dan dari sudut pandang orang yang membuat sesuatu sendirian, bisa melayani 1/10 dunia saja sudah terasa cukup bagus
      Memperluas cakupan untuk mendukung lebih banyak orang itu baik, tetapi bukan sesuatu yang wajib dilakukan
    • Jika dukungan untuk kasus penggunaan niche itu sederhana dan beban pemeliharaannya kecil, ya lumayan juga untuk ditambahkan sekadar demi seru-seruan

  • “Halaman hasil pertama Google tidak pernah bohong”, memang ada sesuatu yang bisa membantu menyelesaikan masalah, tapi sebaiknya duduk dulu. Soalnya mungkin bakal sedih

    • Sepertinya kalimat itu dipahami secara harfiah
      Ungkapan “Halaman hasil pertama Google tidak pernah bohong…” hampir pasti sindiran, melihat kalimat setelahnya yang mengatakan “Google telah membohongi kita tentang dukungan RTL pada kolom input”

  • Sayangnya, baik situs web maupun CodePen yang terhubung sama-sama cukup berantakan dalam rendering source. Posisi titiknya salah, sementara HTML yang dirender justru baik-baik saja
    Ini tampaknya kegagalan khas dari algoritma dua arah Unicode
    Sepertinya dibutuhkan algoritma khusus yang merender seluruh bagian tag HTML, yaitu semua yang berada di antara < dan >, sebagai satu unit atomik yang secara internal LTR tetapi tidak memengaruhi arah karakter di sekitarnya
    Dalam contoh ini, algoritmanya harus bisa mengganti arah di tengah urutan .<

    • Di sini yang gagal bukan algoritma dua arah Unicode, melainkan ia sedang bekerja persis sesuai desain
      Arah dasar potongan source code adalah LTR, tetapi arahnya bercampur karena ada teks Ibrani
      Tanda baca memiliki arah yang lemah, jadi titik muncul di akhir segmen RTL, dan karena arah dasarnya LTR, “akhir” itu berarti sisi kanan
      Untuk memaksa konten dengan arah campuran agar dirender dengan benar, sering kali perlu memasukkan karakter kontrol dua arah yang menentukan di mana segmen dengan arah tertentu dimulai dan berakhir
      Namun dalam kasus ini, itu tidak tepat karena justru bisa merusak rendering contoh input yang sebenarnya

  • Terkait hal ini, dukungan untuk logical properties/values sudah matang dalam beberapa tahun terakhir
    Ini adalah alternatif untuk properti berbasis arah seperti top/left/bottom/right, dan bisa menyesuaikan diri saat arah konten atau teks berubah
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...

    • Konsep seperti ini sudah lama menjadi standar di platform mobile. Misalnya leading dan trailing di iOS
      Senang melihatnya juga hadir di web, dan ini membuat pembuatan UI yang tidak bergantung pada bahasa jadi jauh lebih realistis

  • Jika saya mencari textarea dan teks BiDi dalam hampir semua kombinasi yang bisa saya pikirkan, https://www.w3.org/International/talks/1602-oman muncul sebagai salah satu tautan teratas
    Bahkan bagian “What if you don't know the direction in advance” juga langsung ada di dalamnya: https://www.w3.org/International/talks/1602-oman/#advance
    Masalahnya tampaknya penulis tidak begitu paham bidang ini, jadi dia bahkan tidak tahu bahwa istilah pencarian yang tepat di sini adalah BiDi. Itu singkatan dari “bi-directional text”, dan dipakai saat kita tidak ingin menentukan arah penulisan tertentu
    Saya juga tidak ingin menyalahkan dia karena menganggap “hasil pencarian itu salah”. Jika Anda mencari dengan RTL, hasil itu memang jawaban yang benar, tetapi Anda tidak akan tahu sampai memahami bidang ini sedikit lebih jauh
    Ini menunjukkan keterbatasan ketika bergantung pada jawaban dari internet. Internet tidak tahu apa yang tidak saya ketahui
    Jika bertanya kepada orang yang sudah lama menangani BiDi, salah satu pertanyaan pertama mereka kemungkinan adalah, “Maksud Anda RTL atau BiDi?”
    Jika memungkinkan, lebih baik bertanya kepada manusia daripada perangkat lunak. Terutama saat Anda belum memahami bidang itu dengan baik

    • Alih-alih memperlakukan “bidang itu” seperti jargon orang dalam untuk berjaga gerbang dan merendahkan penulisnya, kita juga bisa melihat sisi baiknya bahwa masalah ini jadi lebih dikenal

  • Menarik juga untuk menambahkan tautan ke dirname, atribut yang bisa menyertakan arah teks saat formulir dikirim: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

  • Kalau saya membuat browser, saya ingin membuat pengumuman layanan masyarakat: anggap saja default-nya dir="auto" jika tidak ada penentuan lain

    • Kontrol formulir untuk input pengguna itu semacam dokumen terpisah, jadi default seperti itu mungkin lebih masuk akal di sana, tetapi sebagai default untuk semua elemen itu sangat buruk
      Jika Anda tahu pengguna akan mengetik dalam bahasa tertentu, itu pun mungkin bukan default terbaik. Tentu saja, tetap lebih baik daripada menetapkannya secara keliru

  • Sedikit terkait, baru-baru ini saya tahu bahwa Vim punya :set rl untuk membuat teks mengalir dari kanan ke kiri
    Untuk kembali seperti semula, gunakan :set norl

    • Wah, cukup keren, dan ternyata agak seru juga mengetik bahasa Inggris seperti itu. Saya melakukannya lebih lama dari yang saya kira
    • Vim lama juga punya vim -A yang dimulai dalam mode Arab. Saya tidak tahu cara memakainya, sepertinya menggunakan semacam metode input
    • Bagaimana dengan :set td?