इनपुट बॉक्स और टेक्स्ट एरिया में dir="auto" जोड़ें

 (mough.xyz)
3 पॉइंट द्वारा GN⁺ 2023-08-24 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • HTML के सिर्फ dir="auto" attribute से इनपुट बॉक्स और टेक्स्ट एरिया में हिब्रू, अरबी, उर्दू जैसी RTL (दाएँ-से-बाएँ) भाषाओं का automatic support मिल जाता है
  • अब तक character detection के लिए listener लिखना, third-party library इस्तेमाल करना, dir="right" को manually switch करना जैसे manual और जटिल तरीके ही जाने जाते थे
  • "textarea rtl" search results में कहीं भी dir="auto" का ज़िक्र नहीं था, इसलिए इसे ऐसी समस्या समझा जाता रहा जिसमें direct intervention चाहिए
  • असल में लागू करने पर, अलग से low-level language parsing के बिना तुरंत सही तरह से काम करता है
  • छोटा-सा लेकिन बड़ा बदलाव; दुनिया भर के users app इस्तेमाल कर पाएँगे या नहीं, यह तय करने वाला internationalization (i18n) का core element

RTL support की कठिनाई

  • Standard Notes के शुरुआती समय से ही हिब्रू, अरबी, उर्दू जैसी RTL भाषाओं के support की requests आती रही थीं, लेकिन implementation मुश्किल लगने की वजह से इसे टाला जाता रहा
  • हर बार review करने पर यह Unicode, ASCII जैसी encodings को low level पर संभालने वाला language parsing task लगता था, इसलिए इससे बचा गया
  • हर कुछ महीनों में वही topic दोहराया जाता था, लेकिन हर बार वही सलाह लौटकर आती थी
    • खुद character parser लिखना
    • third-party library इस्तेमाल करना
    • dir="right" लागू करना

Search की सीमाएँ

  • "textarea rtl", "textarea right to left" आदि से search करने पर भी results में dir="auto" बिल्कुल नहीं दिखता
  • इसके बजाय tags में dir="rtl" लिखने वाली Stack Overflow answers या Twitter की third-party libraries ही दिखती हैं
  • Search के पहले page पर भरोसा करके इसे ऐसी समस्या मान लिया गया जिसमें direct intervention चाहिए, और यह priority में लगातार पीछे जाता रहा

समाधान मिला

  • कुछ हफ्ते पहले फिर से search करते समय एक GitHub post में यह comment मिला कि "textarea में बस dir="auto" जोड़ दें"
  • 1 साल से समाधान खोजी जा रही समस्या सिर्फ एक line में हल हो गई
  • खुद लागू करके देखने पर यह बिना किसी defect के पूरी तरह काम करता है

लागू करने का तरीका

  • इनपुट बॉक्स और टेक्स्ट एरिया में attribute की बस एक line जोड़ें
    • <textarea dir='auto'> שלום, עתיד. </textarea>
  • input value के आधार पर text direction automatically detect होता है
  • संदर्भ के लिए MDN की dir attribute documentation में संबंधित explanation दी गई है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-08-24
Hacker News की राय

  • input field और textarea की text rendering ठीक करने का यह आसान तरीका सही है, लेकिन submitted text दिखाने वाले elements पर भी यही लागू करना होगा
    और जब आप bidirectional text से टकराते हैं, जैसे किसी Arabic paragraph के अंदर English product name, तो जटिलता पूरी तरह अलग स्तर पर पहुंच जाती है
    Chrome में फिलहाल dir='auto' वाले input fields में RTL text rendering को प्रभावित करने वाला एक regression bug है, लेकिन fix पहले ही deploy हो चुका है और अगले release में शामिल होगा

  • MDN हमेशा बचा लेता है: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

  • अमेरिका के बाहर भी दुनिया है, लेकिन site की प्रकृति के हिसाब से उसे support करना ज़रूरी हो, ऐसा नहीं है
    मैं न तो अमेरिकी हूं और न ही native English speaker, लेकिन जिन sites पर मैं जाता हूं उनमें 99% पर username या posts में RTL characters की अनुमति न हो, तब भी कोई समस्या नहीं होती
    अगर यह browser या operating system स्तर पर हल नहीं हुआ है, तो मुझे इसे support करना ही चाहिए, ऐसा कोई खास दायित्व नहीं लगता
    और इसका मतलब यह नहीं है कि मैं अल्पसंख्यकों को दबाने की बात कर रहा हूं

    • जब भी मैं personal project में दूसरी भाषाओं के support के बारे में सोचता हूं, तो यह बात याद आती है
      जल्दी से search करें तो English users लगभग 84 करोड़ बताए जाते हैं; अकेले बनाने वाले के नज़रिए से देखें तो दुनिया के सिर्फ 1/10 तक पहुंच पाना भी काफ़ी ठीक लगता है
      ज़्यादा लोगों को support करने के लिए scope बढ़ाना अच्छी बात है, लेकिन यह कोई अनिवार्य ज़िम्मेदारी नहीं है
    • अगर niche use case का support आसान हो और maintenance burden भी कम हो, तो सिर्फ मज़े के लिए भी उसे जोड़ा जा सकता है

  • “Google का पहला results page कभी झूठ नहीं बोलता” — इसमें problem-solving के काम की बात हो सकती है, लेकिन पहले बैठ जाना बेहतर होगा। शायद दुख होगा

    • लगता है उस वाक्य को शाब्दिक अर्थ में ले लिया गया
      “Google का पहला results page कभी झूठ नहीं बोलता…” जैसी अभिव्यक्ति, उसके बाद आने वाले “Google input fields के RTL support के बारे में हमसे झूठ बोलता रहा है” वाले वाक्य को देखते हुए, लगभग निश्चित रूप से व्यंग्य थी

  • दुर्भाग्य से website और उससे जुड़ा CodePen, दोनों में source rendering काफ़ी खराब है। full stop की जगह गलत है, जबकि rendered HTML ठीक है
    यह Unicode bidirectional algorithm की हमेशा वाली विफलता जैसा लगता है
    लगता है एक special algorithm चाहिए जो HTML tags, यानी < और > के बीच के पूरे हिस्से को अंदर से LTR atomic unit की तरह render करे, लेकिन आसपास के characters की direction को प्रभावित न करे
    इस उदाहरण में algorithm को .< sequence के बीच में direction बदल पाने में सक्षम होना चाहिए

    • यहां Unicode bidirectional algorithm विफल नहीं हुआ है; वह design के मुताबिक ही काम कर रहा है
      source code snippet की base direction LTR है, लेकिन Hebrew text की वजह से direction mix हो रही है
      punctuation की directionality weak होती है, इसलिए full stop RTL segment के अंत में दिखाई देता है, और क्योंकि base direction LTR है, वह “अंत” दाईं ओर होता है
      mixed-direction content को सही तरह render कराने के लिए अक्सर bidirectional control characters डालने पड़ते हैं, ताकि यह बताया जा सके कि खास direction segments कहां से शुरू और खत्म होते हैं
      लेकिन इस मामले में ऐसा करना वास्तविक input example की rendering को बिगाड़ सकता है, इसलिए शायद नहीं करना चाहिए

  • इससे जुड़ा हुआ, पिछले कुछ सालों में logical properties/values का support काफ़ी mature हुआ है
    यह top/left/bottom/right जैसे direction-based properties का विकल्प है, जो content या text direction बदलने पर अपने-आप adapt कर सकता है
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...

    • ऐसी concepts mobile platforms पर बहुत पहले से standard रही हैं। उदाहरण के लिए iOS में leading और trailing जैसी चीज़ें
      इन्हें web पर आते देखना अच्छा है, और language-independent UI बनाना अब कहीं ज़्यादा व्यावहारिक काम हो गया है

  • textarea और BiDi text के लगभग हर combination के साथ search करें, तो https://www.w3.org/International/talks/1602-oman ऊपर आने वाले links में से एक होता है
    उसके अंदर “What if you don't know the direction in advance” section में भी यह सीधे मौजूद है: https://www.w3.org/International/talks/1602-oman/#advance
    समस्या यह लगती है कि लेखक इस क्षेत्र से परिचित नहीं था, इसलिए उसे यह भी नहीं पता था कि यहां search term के रूप में BiDi सही शब्द है। यह “bi-directional text” का संक्षिप्त रूप है, और तब इस्तेमाल होता है जब आप किसी खास writing direction को निर्दिष्ट नहीं करना चाहते
    “search results गलत थे” ऐसा सोचने के लिए भी मैं उसे दोष नहीं दूंगा। अगर RTL से search करें तो वे नतीजे सही जवाब हैं, लेकिन इस क्षेत्र के बारे में थोड़ा और जानने से पहले यह समझना मुश्किल है
    यह internet answers पर निर्भर रहने की सीमा दिखाता है। internet को यह नहीं पता कि मुझे क्या नहीं पता
    अगर आप लंबे समय से BiDi पर काम कर रहे किसी व्यक्ति से पूछें, तो उसके पहले सवालों में से एक शायद यह होगा: “क्या आप RTL की बात कर रहे हैं, या BiDi की?”
    अगर संभव हो, तो software से ज़्यादा किसी इंसान से पूछना बेहतर है। खासकर तब, जब आप उस क्षेत्र से परिचित न हों

    • “उस क्षेत्र” को insider jargon के सहारे gatekeeping की तरह पेश करके लेखक को नीचा दिखाने के बजाय, यह भी देखा जा सकता है कि उसने इस समस्या को अधिक लोगों तक पहुंचाया

  • form submit करते समय text input की directionality को साथ में शामिल कर सकने वाले दिलचस्प attribute dirname का link भी जोड़ा जा सकता है: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

  • अगर मैं browser बनाता, तो public service announcement देता कि अलग से कुछ निर्दिष्ट न होने पर dir="auto" मान लिया जाए

    • user input form controls एक तरह के अलग document जैसे होते हैं, इसलिए उनके लिए यह default ज़्यादा तर्कसंगत हो सकता है, लेकिन सभी elements के default के रूप में यह बहुत खराब होगा
      अगर आपको पता है कि user किस भाषा में input करेगा, तो यह भी सबसे अच्छा default नहीं हो सकता। हां, गलत तरीके से निर्दिष्ट करने से तो बेहतर है

  • थोड़ा संबंधित है: हाल ही में पता चला कि Vim में :set rl है, जो text को right-to-left बना देता है
    वापस सामान्य स्थिति में आने के लिए :set norl इस्तेमाल करें

    • वाह, यह काफ़ी शानदार है, और English में भी इस तरह टाइप करके देखना छिपे तौर पर मज़ेदार है। मैंने सोचे से ज़्यादा देर तक इसे आज़माया
    • पुराने Vim में vim -A भी है, जो Arabic mode में शुरू होता है। यह कैसे काम करता है, पता नहीं; लगता है कोई input method इस्तेमाल होती है
    • :set td कैसा रहेगा?