Internacionalizacion y RTL
Internacionalizacion y RTL
8 reglasRTL con dir y logical properties
Activa dir="rtl" en el contenedor y reemplaza propiedades fisicas por logicas: margin-inline-start en vez de margin-left, padding-inline-end en vez de padding-right. Asi un mismo CSS espeja layout, iconos direccionales y orden de lectura sin un stylesheet aparte. Hardcodear left/right rompe el 40% de los idiomas (arabe, hebreo, farsi, urdu).
Reservar 30-40% extra para expansion
El aleman y el espanol expanden el ingles un 30-40% de media; un boton de 7 letras (Submit) se vuelve Absenden o Confirmar pedido. Disena botones y labels con min-width y permite wrap en lugar de truncar. Fijar el ancho al texto ingles garantiza overflow y elipsis en cuanto se traduce.
Fechas con Intl.DateTimeFormat
Nunca hardcodees DD/MM/YYYY: 06/14/2026 es ambiguo para un europeo que lee dia/mes. Usa new Intl.DateTimeFormat(locale, {dateStyle:'long'}) para que el orden, el separador y el nombre del mes salgan en el idioma del usuario. Asi 14 de junio de 2026, 14. Juni 2026 y June 14, 2026 nacen del mismo timestamp.
Moneda y numeros con Intl.NumberFormat
El separador decimal y de millares se invierte segun locale: 1.299,90 € en es-ES contra $1,299.90 en en-US. Usa Intl.NumberFormat(locale,{style:'currency',currency:'EUR'}) para que el simbolo, su posicion y los separadores salgan correctos. Concatenar "$" + valor mezcla coma y punto y produce precios que se leen mil veces mas o menos.
Iconos culturalmente neutros
Gestos de mano (pulgar arriba, OK, V) y simbolos religiosos cambian de significado o se vuelven ofensivos entre culturas: el pulgar arriba insulta en partes de Oriente Medio. Sustituye gestos por iconos abstractos universales (check, estrella, corazon). Una palomita verde comunica aprobacion en todo el mundo sin riesgo de ofender.
w3c.org · nngroup.comInputs de nombre flexibles
Imponer "First name + Last name" excluye a quien tiene un solo nombre, varios apellidos o un orden invertido (en China el apellido va primero). Prefiere un unico campo "Nombre completo" o, si necesitas separar, "Given name + Family name" con ambos opcionales. Etiquetar al reves (apellido antes que nombre) confunde y produce datos mal asignados.
w3c.org/International · nngroup.comTelefono con selector de pais
Un campo de telefono plano obliga al usuario a adivinar si incluir el prefijo internacional y cuantos digitos van. Anade un selector de pais con bandera y codigo (+52, +49) que aplique mascara y validacion por region en vivo. Sin selector, el numero llega sin prefijo o mal formateado y falla en envios SMS/WhatsApp.
Plurales y genero con reglas i18n
Concatenar count + " articulos" falla: el arabe tiene 6 formas plurales, el polaco 4, y muchos idiomas distinguen genero. Usa las plural rules de CLDR/i18next con interpolacion para que cada cuenta seleccione la forma correcta. 1 articulo vs 2 articulos vs 0 articulos no se resuelve con un simple "+s".
- R-632 RTL con dir y logical properties
- R-633 Reservar 30-40% extra para expansion
- R-634 Fechas con Intl.DateTimeFormat
- R-635 Moneda y numeros con Intl.NumberFormat
- R-636 Iconos culturalmente neutros
- R-637 Inputs de nombre flexibles
- R-638 Telefono con selector de pais
- R-639 Plurales y genero con reglas i18n