Agrega `dir="auto"` a tus campos de entrada y áreas de texto

 (mough.xyz)
3 puntos por GN⁺ 2023-08-24 | 1 comentarios | Compartir por WhatsApp
  • Con solo el atributo HTML dir="auto", los campos de entrada y las áreas de texto pueden dar soporte automático a idiomas RTL (de derecha a izquierda) como hebreo, árabe y urdu
  • Hasta ahora, solo se conocían métodos manuales y complejos como escribir listeners para detectar caracteres, usar librerías de terceros o cambiar manualmente a dir="right"
  • Como en ningún resultado de búsqueda de "textarea rtl" se mencionaba dir="auto", se había malinterpretado como un problema que requería intervención directa
  • Al aplicarlo en la práctica, funciona correctamente de inmediato sin parsing de lenguaje de bajo nivel adicional
  • Aunque parezca un cambio pequeño, es un elemento clave de internacionalización (i18n) que determina si usuarios de todo el mundo pueden usar una app

La dificultad del soporte RTL

  • Desde los inicios de Standard Notes llegaron solicitudes para soporte de idiomas RTL como hebreo, árabe y urdu, pero se fue postergando porque parecía difícil de implementar
  • Cada vez que se revisaba, daba la impresión de requerir trabajo de parsing de lenguaje manejando Unicode, ASCII y otras codificaciones a bajo nivel, así que se evitaba
  • Cada pocos meses volvía a salir el mismo tema, pero siempre regresaban los mismos consejos
    • Escribir un parser de caracteres por cuenta propia
    • Usar una librería de terceros
    • Aplicar dir="right"

Los límites de la búsqueda

  • Aunque se buscara "textarea rtl" o "textarea right to left", en los resultados no aparecía para nada dir="auto"
  • En su lugar, solo salían respuestas de Stack Overflow recomendando usar dir="rtl" en la etiqueta o la librería de terceros de Twitter
  • Al confiar en la primera página de resultados, se asumió que era un problema que requería intervención directa, por lo que siguió perdiendo prioridad

Descubrimiento de la solución

  • Hace unas semanas, al volver a buscar, apareció un comentario en una publicación de GitHub diciendo que bastaba con agregar dir="auto" al textarea
  • Un problema cuya solución se estuvo buscando durante un año se resolvió con una sola línea
  • Al probarlo directamente, funcionó de forma perfecta y sin fallas

Cómo aplicarlo

  • Solo hay que agregar una línea de atributo al campo de entrada o al área de texto
    • <textarea dir='auto'> שלום, עתיד. </textarea>
  • La dirección del texto se detecta automáticamente según el contenido ingresado
  • Como referencia, la documentación de MDN sobre el atributo dir ofrece una explicación relacionada

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-08-24
Comentarios de Hacker News

  • Es una forma sencilla de corregir el renderizado de texto en los campos de entrada y textarea, pero hay que aplicar el mismo tratamiento también a los elementos que muestran el texto enviado
    Y cuando te encuentras con texto bidireccional, por ejemplo nombres de productos en inglés dentro de un párrafo en árabe, se abre un nivel de complejidad completamente distinto
    Chrome actualmente tiene un bug de regresión que afecta el renderizado de texto RTL en campos de entrada con dir='auto', pero la corrección ya se distribuyó y se incluirá en la próxima versión

  • MDN siempre al rescate: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

  • Hay mundo fuera de EE. UU., pero según la naturaleza del sitio no siempre es obligatorio darle soporte
    No soy estadounidense ni hablante nativo de inglés, pero en el 99% de los sitios que visito no habría ningún problema aunque no permitieran caracteres RTL en nombres de usuario o publicaciones
    Si esto no se resolvió a nivel del navegador o del sistema operativo, no creo que yo tenga casi ninguna obligación de soportarlo
    Y esto no significa que quiera oprimir a las minorías

    • Cada vez que pienso en dar soporte a otros idiomas en un proyecto personal, recuerdo este punto
      Buscando rápido, parece que hay unos 840 millones de usuarios de inglés, y si trabajas solo, poder llegar aunque sea a una décima parte del mundo ya suena bastante bien
      Está bien ampliar el alcance para soportar a más gente, pero no es una obligación hacerlo
    • Si dar soporte a un caso de uso de nicho es sencillo y no añade mucha carga de mantenimiento, vale la pena incluirlo aunque sea por diversión

  • Eso de que “la primera página de resultados de Google nunca miente” suena como algo que puede ayudar a resolver problemas, pero mejor si primero te sientas. Probablemente te va a poner triste

    • Parece que lo tomaron de forma literal
      Viendo la frase que aparece después, “Google nos ha estado mintiendo sobre el soporte RTL en los campos de entrada”, casi seguro que “la primera página de resultados de Google nunca miente…” era sarcasmo

  • Por desgracia, tanto el sitio web como el CodePen enlazado tienen un renderizado del código fuente bastante desastroso. La posición del punto está mal, aunque el HTML renderizado está bien
    Parece otro de esos casos en los que falla el algoritmo bidireccional de Unicode, como siempre
    Haría falta un algoritmo especial que renderice las etiquetas HTML, es decir, todo lo que está entre < y >, como una unidad atómica internamente LTR, pero sin afectar la dirección de los caracteres que la rodean
    En este ejemplo, el algoritmo debería poder cambiar de dirección en medio de la secuencia .<

    • Aquí el algoritmo bidireccional de Unicode no está fallando; en realidad está funcionando tal como fue diseñado
      La dirección base del fragmento de código fuente es LTR, pero está mezclada con texto en hebreo
      La puntuación tiene direccionalidad débil, así que el punto aparece al final del tramo RTL, y como la dirección base es LTR, ese “final” significa la derecha
      Para forzar el renderizado correcto de contenido con direcciones mezcladas, muchas veces hay que insertar caracteres de control bidireccional que indiquen dónde empieza y termina cada tramo con dirección específica
      Aun así, en este caso no sería correcto ponerlos porque podría arruinar el renderizado del ejemplo de entrada real

  • Relacionado con esto, en los últimos años ha madurado el soporte para propiedades/valores lógicos
    Son una alternativa a propiedades basadas en direcciones como top/left/bottom/right, y pueden adaptarse a cambios en la dirección del contenido o del texto
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...

    • Este tipo de conceptos han sido estándar desde hace mucho en plataformas móviles. Por ejemplo, cosas como leading y trailing en iOS
      Qué bueno que también estén llegando a la web, porque vuelve mucho más realista crear una UI independiente del idioma

  • Si buscas textarea y texto BiDi en casi cualquier combinación que se te ocurra, https://www.w3.org/International/talks/1602-oman aparece entre los primeros resultados
    Incluso está directamente en la sección “What if you don't know the direction in advance”: https://www.w3.org/International/talks/1602-oman/#advance
    El problema parece ser que el autor no conocía bien esta área, así que ni siquiera sabía que BiDi era el término de búsqueda correcto. Es la abreviatura de “bi-directional text” y se usa cuando no quieres especificar una dirección de escritura concreta
    Tampoco me parece justo culparlo por pensar que “los resultados de búsqueda estaban mal”. Si buscas RTL, esos resultados sí responden a la pregunta, pero no puedes saberlo hasta entender un poco más este campo
    Ahí se ve la limitación de depender de respuestas en internet. Internet no sabe qué es lo que yo no sé
    Si le preguntas a alguien con experiencia de años trabajando con BiDi, una de sus primeras preguntas probablemente sería: “¿Te refieres a RTL o a BiDi?”
    Si es posible, es mejor preguntarle a una persona que a un software. Especialmente cuando no conoces bien el tema

    • En vez de tratar “ese campo” como una sigla de iniciados y usarla para menospreciar al autor, también se podría ver positivamente el hecho de que ayudó a dar visibilidad a este problema

  • También valdría la pena agregar el enlace a dirname, un atributo interesante que permite incluir la direccionalidad del texto al enviar un formulario: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

  • Si yo hiciera un navegador, me gustaría dar el anuncio de servicio público de que, salvo indicación contraria, se asuma dir="auto"

    • Los controles de formulario para entrada del usuario son una especie de documento aparte, así que ahí ese valor por defecto puede tener más sentido, pero sería muy mala idea como valor predeterminado para todos los elementos
      Si sabes que el usuario está escribiendo en un idioma específico, eso tampoco necesariamente sería el mejor valor por defecto. Claro, sigue siendo mejor que configurarlo mal

  • Algo medio relacionado: hace poco me enteré de que Vim tiene :set rl para hacer que el texto vaya de derecha a izquierda
    Para volver al modo normal, se usa :set norl

    • Vaya, está bastante genial, y hasta escribir así en inglés resulta curiosamente divertido. Lo probé por más tiempo del que esperaba
    • En versiones antiguas de Vim también existe vim -A, que arranca en modo árabe. No sé cómo se usa, pero parece que utiliza algún tipo de método de entrada
    • ¿Qué tal :set td?