Product Craft Bible
Internacionalizacion y RTL
Inicio Avanzado Internacionalizacion y RTL
Avanzado

Internacionalizacion y RTL

8 reglas w3c.org · material.io/design/usability/bidirectionalityw3c.org/International · nngroup.comw3c.org · nngroup.com
73

Internacionalizacion y RTL

8 reglas
632

RTL 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).

w3c.org · material.io/design/usability/bidirectionality
Preferir
CSS: margin-inline-start:12px
سارة الأحمد
مديرة المنتج
Evitar
CSS: margin-left:12px
سارة الأحمد
مديرة المنتج
633

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.

w3c.org/International · nngroup.com
Preferir
EN
DE
ES
Evitar
EN
DE
ES
634

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.

w3c.org · material.io/design/usability/bidirectionality
Preferir
Factura #INV-2284
es-ES14 de junio de 2026
de-DE14. Juni 2026
en-USJune 14, 2026
Mismo timestamp, tres formatos correctos por locale.
Evitar
Factura #INV-2284
Locale es-ES06/14/2026
Locale de-DE06/14/2026
Locale en-US06/14/2026
El europeo lee "mes 14": no existe. Fecha ambigua.
635

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.

w3c.org/International · nngroup.com
Preferir
Auriculares Sony WH-1000XM5
es-ES1.299,90 €
de-DE1.299,90 €
en-US$1,299.90
fr-FR1 299,90 €
Separadores, simbolo y posicion correctos por locale.
Evitar
Auriculares Sony WH-1000XM5
es-ES esperado1.299,90 €
Render real€1299.90
de-DE esperado1.299,90 €
Render real€1299.90
Punto decimal y simbolo delante: parece formato US.
636

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.com
Preferir
Resena verificada
Util
Favorito
Guardar
Check, estrella y corazon: aprobacion neutra global.
Evitar
Resena verificada
Util
OK
Bendecir
El pulgar arriba ofende en Oriente Medio; la cruz excluye.
637

Inputs 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.com
Preferir
Crear cuenta
Tal como quieres que te llamemos
El usuario controla su nombre completo y su forma de saludo.
Evitar
Crear cuenta
En chino "Zhang Wei" pone el apellido primero: el orden queda invertido en el saludo.
638

Telefono 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.

w3c.org · material.io/design/usability/bidirectionality
Preferir
Verificacion por SMS
+52 55 4422 3311 valido. Mascara MX aplicada.
Evitar
Verificacion por SMS
Sin prefijo de pais. ¿+52? ¿+1? El SMS no se entrega.
639

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".

w3c.org/International · nngroup.com
Preferir
Carrito
count = 0Tu carrito esta vacio
count = 11 articulo
count = 55 articulos
Claves zero/one/other via i18next. Arabe carga sus 6 formas sin tocar el codigo.
Evitar
Carrito
count = 00 articulos
count = 11 articulos
count = 55 articulos
"1 articulos" es agramatical. En arabe/polaco esto falla aun mas: 4-6 formas ignoradas.