Hãy thêm `dir="auto"` vào ô nhập liệu và vùng văn bản

 (mough.xyz)
3 điểm bởi GN⁺ 2023-08-24 | 1 bình luận | Chia sẻ qua WhatsApp
  • Chỉ với thuộc tính HTML dir="auto", ô nhập liệu và vùng văn bản có thể tự động hỗ trợ các ngôn ngữ RTL (phải sang trái) như tiếng Hebrew, tiếng Ả Rập và tiếng Urdu
  • Trước đây, người ta chỉ biết đến những cách làm thủ công và phức tạp như viết listener để phát hiện ký tự, dùng thư viện bên thứ ba, hoặc chuyển thủ công sang dir="right"
  • Vì không có kết quả tìm kiếm nào cho "textarea rtl" nhắc đến dir="auto", nên vấn đề này đã bị hiểu nhầm là cần phải can thiệp trực tiếp
  • Khi áp dụng thực tế, nó hoạt động đúng ngay lập tức mà không cần phân tích ngôn ngữ ở mức thấp riêng biệt
  • Dù nhỏ nhưng đây là thay đổi lớn, là yếu tố cốt lõi của quốc tế hóa (i18n) quyết định ứng dụng có thể phục vụ người dùng toàn cầu hay không

Sự khó khăn của việc hỗ trợ RTL

  • Ngay từ những ngày đầu của Standard Notes, đã có yêu cầu hỗ trợ các ngôn ngữ RTL như tiếng Hebrew, tiếng Ả Rập và tiếng Urdu, nhưng việc này liên tục bị hoãn vì có vẻ khó triển khai
  • Mỗi lần xem xét, nó lại trông giống như một bài toán phân tích ngôn ngữ phải xử lý các mã hóa như Unicode và ASCII ở mức thấp, nên thường bị né tránh
  • Cứ vài tháng chủ đề này lại lặp lại, nhưng lần nào cũng chỉ nhận được cùng một lời khuyên
    • Tự viết parser ký tự
    • Dùng thư viện bên thứ ba
    • Áp dụng dir="right"

Giới hạn của tìm kiếm

  • Dù tìm với các từ khóa như "textarea rtl", "textarea right to left", kết quả vẫn hoàn toàn không xuất hiện dir="auto"
  • Thay vào đó chỉ hiện các câu trả lời trên Stack Overflow khuyên dùng dir="rtl" trong thẻ, hoặc thư viện bên thứ ba của Twitter
  • Vì tin vào trang đầu của kết quả tìm kiếm và kết luận rằng đây là vấn đề cần can thiệp trực tiếp, nó liên tục bị đẩy xuống thấp trong mức độ ưu tiên

Phát hiện ra lời giải

  • Vài tuần trước, khi tìm lại lần nữa, tác giả thấy một bình luận trong bài viết trên GitHub nói rằng chỉ cần thêm dir="auto" vào textarea
  • Vấn đề đã tìm lời giải suốt 1 năm được giải quyết chỉ bằng một dòng
  • Khi tự áp dụng thử, nó hoạt động hoàn hảo không lỗi

Cách áp dụng

  • Chỉ cần thêm một dòng thuộc tính vào ô nhập liệu hoặc vùng văn bản
    • <textarea dir='auto'> שלום, עתיד. </textarea>
  • Hướng văn bản sẽ được tự động xác định theo nội dung nhập vào
  • Ngoài ra, tài liệu về thuộc tính dir trên MDN cũng có giải thích liên quan

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-08-24
Các ý kiến trên Hacker News

  • Đúng là một cách dễ để sửa việc render văn bản trong ô nhập và textarea, nhưng các phần tử hiển thị văn bản đã gửi cũng cần được xử lý tương tự.
    Và khi gặp văn bản hai chiều, chẳng hạn tên sản phẩm tiếng Anh trong một đoạn tiếng Ả Rập, độ phức tạp sẽ mở ra ở một mức hoàn toàn khác.
    Chrome hiện có một lỗi hồi quy ảnh hưởng đến việc render văn bản RTL trong ô nhập có dir='auto', nhưng bản sửa đã được triển khai và dự kiến sẽ có trong bản phát hành tiếp theo.

  • MDN lúc nào cũng cứu cánh: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

  • Thế giới vẫn tồn tại bên ngoài nước Mỹ, nhưng tùy tính chất của website mà không nhất thiết phải hỗ trợ.
    Tôi không phải người Mỹ và cũng không phải người bản ngữ tiếng Anh, nhưng 99% các trang tôi truy cập hoàn toàn không có vấn đề gì nếu không cho phép ký tự RTL trong tên người dùng hay bài đăng.
    Nếu việc này chưa được giải quyết ở cấp trình duyệt hay hệ điều hành, tôi nghĩ mình hầu như không có nghĩa vụ phải hỗ trợ nó.
    Và đây không phải là nói rằng hãy đàn áp thiểu số.

    • Mỗi khi cân nhắc hỗ trợ ngôn ngữ khác trong dự án cá nhân, tôi lại nhớ đến điểm này.
      Tìm nhanh thì thấy có khoảng 840 triệu người dùng tiếng Anh, nên với một người làm một mình, chỉ cần 1/10 thế giới dùng được cũng đã khá ổn rồi.
      Mở rộng phạm vi để hỗ trợ nhiều người hơn là điều tốt, nhưng không có nghĩa là bắt buộc phải làm.
    • Nếu hỗ trợ trường hợp sử dụng ngách đơn giản và gánh nặng bảo trì cũng nhỏ, thì cứ thêm vào cho vui cũng được.

  • “Trang kết quả đầu tiên của Google không bao giờ nói dối” à, có chuyện này có thể giúp giải quyết vấn đề, nhưng tốt nhất là ngồi xuống trước. Có lẽ bạn sẽ buồn đấy.

    • Có vẻ như họ đã hiểu câu đó theo nghĩa đen.
      Cụm “Trang kết quả đầu tiên của Google không bao giờ nói dối…” gần như chắc chắn là châm biếm, xét theo câu phía sau “Google đã nói dối chúng ta về hỗ trợ RTL trong ô nhập”.

  • Đáng tiếc là cả website lẫn CodePen được liên kết đều render mã nguồn khá lộn xộn. Vị trí dấu chấm sai, còn HTML đã render thì ổn.
    Có vẻ như đây là một thất bại quen thuộc của thuật toán hai chiều Unicode.
    Có lẽ cần một thuật toán đặc biệt render toàn bộ thẻ HTML, tức phần giữa < và >, như một đơn vị nguyên tử nội bộ là LTR nhưng không ảnh hưởng đến hướng của các ký tự xung quanh.
    Trong ví dụ này, thuật toán cần có khả năng đổi hướng ở giữa chuỗi .<.

    • Ở đây thuật toán hai chiều Unicode không thất bại, mà đang hoạt động đúng như thiết kế.
      Hướng mặc định của đoạn mã nguồn là LTR, nhưng do có văn bản tiếng Hebrew nên hướng bị trộn lẫn.
      Dấu câu có tính định hướng yếu, nên dấu chấm xuất hiện ở cuối đoạn RTL; và vì hướng mặc định là LTR, “cuối” ở đây có nghĩa là phía bên phải.
      Để ép nội dung có hướng hỗn hợp render đúng, thường phải chèn các ký tự điều khiển hai chiều để chỉ rõ đoạn theo một hướng nhất định bắt đầu và kết thúc ở đâu.
      Tuy nhiên trong trường hợp này, làm vậy có thể phá cách render của ví dụ nhập liệu thực tế, nên có lẽ không nên chèn.

  • Liên quan đến chuyện này, trong vài năm gần đây hỗ trợ thuộc tính/giá trị logic đã trưởng thành hơn.
    Đây là lựa chọn thay thế cho các thuộc tính dựa trên hướng như top/left/bottom/right, có thể thích ứng theo việc chuyển hướng nội dung hoặc văn bản.
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...

    • Các khái niệm như vậy đã là chuẩn trên nền tảng di động từ lâu. Ví dụ như leading và trailing trên iOS.
      Thật tốt khi thấy chúng xuất hiện trên web, và việc tạo UI không phụ thuộc ngôn ngữ trở nên thực tế hơn nhiều.

  • Nếu tìm textarea và văn bản BiDi với gần như mọi tổ hợp tôi có thể nghĩ ra, https://www.w3.org/International/talks/1602-oman xuất hiện trong các liên kết hàng đầu.
    Ngay trong đó cũng có phần “What if you don't know the direction in advance”: https://www.w3.org/International/talks/1602-oman/#advance
    Vấn đề là có vẻ tác giả không rành lĩnh vực này, nên cũng không biết rằng từ khóa đúng để tìm ở đây là BiDi. Đây là viết tắt của “bi-directional text”, và là cách gọi khi không muốn chỉ định một hướng viết cụ thể.
    Tôi cũng không muốn trách việc họ nghĩ “kết quả tìm kiếm sai”. Nếu tìm RTL thì kết quả đó là câu trả lời đúng, nhưng bạn sẽ không biết điều đó cho đến khi hiểu thêm một chút về lĩnh vực này.
    Đây là giới hạn khi dựa vào câu trả lời trên Internet. Internet không biết bạn không biết điều gì.
    Nếu hỏi một người đã làm với BiDi lâu năm, rất có thể một trong những câu hỏi đầu tiên sẽ là “Bạn đang nói về RTL hay BiDi?”
    Nếu có thể, nên hỏi con người hơn là phần mềm. Đặc biệt là khi bạn không rành lĩnh vực đó.

    • Thay vì dùng biệt ngữ nội bộ để biến “lĩnh vực đó” thành kiểu gác cổng và hạ thấp tác giả, cũng có thể nhìn nhận tích cực rằng bài viết đã giúp vấn đề này được biết đến nhiều hơn.

  • Cũng đáng thêm liên kết tới dirname, một thuộc tính thú vị có thể đưa kèm hướng tính của văn bản nhập khi gửi form: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

  • Nếu bạn đang làm trình duyệt, tôi muốn đưa ra một thông báo vì lợi ích chung rằng khi không có chỉ định riêng thì hãy giả định dir="auto".

    • Các điều khiển form cho người dùng nhập liệu là một dạng tài liệu riêng, nên giá trị mặc định đó có thể hợp lý hơn, nhưng nếu dùng làm mặc định cho mọi phần tử thì rất tệ.
      Nếu bạn biết người dùng sẽ nhập bằng một ngôn ngữ cụ thể, đó cũng có thể không phải mặc định tốt nhất. Tất nhiên vẫn tốt hơn là chỉ định sai.

  • Hơi liên quan, gần đây tôi mới biết Vim có :set rl để làm văn bản chạy từ phải sang trái.
    Muốn quay lại như cũ thì dùng :set norl.

    • Chà, khá hay, và thử gõ tiếng Anh theo kiểu đó cũng thú vị ngầm. Tôi đã thử lâu hơn mình tưởng.
    • Vim đời cũ còn có vim -A để khởi động ở chế độ tiếng Ả Rập. Không rõ dùng thế nào, hình như dùng một kiểu bộ gõ nào đó.
    • :set td thì sao?