Diseño adaptado a cada mercado

Una funcionalidad está lista para el mundo cuando funciona en cualquier idioma y sigue las convenciones de cada lector sin necesidad de modificar su código. Esta página sigue las directrices de Microsoft. Lista de verificación de internacionalización: cada sección explica las diferencias entre mercados, cómo escribir código que lo haga bien y el Comprobación de Globalización código que marca el hábito erróneo.

En esencia, todo se reduce a una regla: dejar que la configuración regional del lector decida. La del navegador Intl APIs, el formateador de tu framework y los datos subyacentes Cultura conoce las convenciones de cada mercado; el código que codifica de forma fija las de un solo mercado no sirve.

Textos y oraciones#

Todo texto que una persona lee debe formar parte del catálogo de origen, bajo una clave, y ser renderizado mediante la función de traducción del proyecto. Esto incluye etiquetas, encabezados, botones, mensajes, errores mostrados a los usuarios y marcadores de posición. alt texto y etiquetas ARIA. Códigos: hardcoded_text.

Una oración es un mensaje. El orden de las palabras varía según el idioma, por lo que una oración ensamblada a partir de partes no se puede traducir. Pasa los valores como marcadores de posición y los recuentos como formas plurales. Códigos: concatenated_text.

// Not world-ready: English word order and English plurals
'You have ' + count + ' new ' + (count === 1 ? 'message' : 'messages');

// World-ready: one ICU message
t('inbox.new', { count });
// "inbox.new": "{count, plural, one {You have # new message} other {You have # new messages}}"

Los idiomas necesitan diferentes formas plurales: el inglés tiene dos, el árabe seis y el japonés una. Escribe el mensaje de origen con plurales ICU y el motor añadirá las formas que cada idioma requiere.

Números#

Los mercados escriben el mismo número de manera distinta: 1.234,5 en Estados Unidos, 1.234,5 en Alemania, 1 234,5 en Suecia y Francia, y con otros dígitos en algunos mercados árabes. Formatea según la configuración regional del lector. Códigos: locale_number.

new Intl.NumberFormat(locale).format(1234.5);
new Intl.NumberFormat(locale, { style: 'percent' }).format(0.25);

Lee un número que una persona haya introducido con la misma configuración regional, o utiliza un campo de entrada numérica cuyo valor normalice el navegador. parseFloat('1,5') equivale a 1, no a uno y medio. Códigos: locale_parsing.

Fechas, horas y zonas horarias#

El orden de las fechas, los separadores, los nombres de los meses, el reloj de 12 o 24 horas y el calendario difieren. Formatea según la configuración regional del lector y nunca con un patrón fijo como MM/dd/yyyy. Códigos: locale_date.

new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short', timeZone }).format(when);

• Almacena los instantes en UTC, como ISO 8601 con un desfase, y formatea en la zona horaria del lector. Calcula "hoy" y los límites diarios en esa zona horaria, no en la del servidor.
• Las semanas empiezan en días distintos: el domingo en Estados Unidos, el lunes en la mayor parte de Europa y el sábado en algunas regiones de Oriente Medio. Los fines de semana también varían. Obtén ambos datos de la configuración regional (new Intl.Locale(locale).getWeekInfo() cuando esté disponible, o de los datos de configuración regional de tu librería de fechas), nunca como un valor constante. Códigos: calendar_names.
• Nombres de días y meses provienen de la configuración regional (Intl.DateTimeFormat(locale, { weekday: 'long' })), no de una lista en el código. Códigos: calendar_names.
• Calendarios. Arabia Saudí, Israel y Japón usan el calendario gregoriano junto con los calendarios Umm al-Qura, hebreo y japonés; Tailandia e Irán utilizan por defecto los calendarios budista y persa. La cultura indica cuál emplea cada mercado.

Moneda#

Formatea los importes con la moneda y la configuración regional del lector; nunca coloques un símbolo junto al número. El mismo importe se muestra $1,234.50, 1.234,50 $ o US$1,234.50 dependiendo del lector, y muchos mercados comparten el mismo símbolo. Códigos: hardcoded_currency.

new Intl.NumberFormat(locale, { style: 'currency', currency }).format(1234.5);

La moneda es una decisión comercial, no de formato: cambiar la configuración regional del lector no debe convertir los precios. La cultura registra en qué moneda paga cada mercado.

Ordenación, comparación y mayúsculas/minúsculas#

Cada idioma ordena sus elementos a su manera: el sueco coloca å, ä y ö después de z, el alemán ordena ä junto a a y el chino lo hace por pinyin o por trazos. Ordena los textos que lee la gente según la configuración regional del lector. Códigos: ordinal_sort.

names.sort(new Intl.Collator(locale).compare);

La asignación de mayúsculas y minúsculas también depende del idioma: en turco, la versión en mayúscula de i es İ. Utiliza toLocaleUpperCase(locale) para los textos que lee la gente. Códigos: case_mapping.

Listas#

"Anna, Ben y Chen" se escribe de forma distinta en cada idioma. Une las listas según la configuración regional. Códigos: joined_list.

new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' }).format(names);

Nombres, direcciones, códigos postales y números de teléfono#

• Nombres. En muchos mercados el apellido va primero y muchas personas tienen un único nombre o más de dos. Recoge el nombre de una persona en un único campo salvo que el mercado necesite sus partes. Acepta todos los sistemas de escritura: Åsa, José, 王 y Мария son nombres válidos. Códigos: latin_only_input.
• Direcciones. Los campos, su orden y sus denominaciones varían: un estado y código postal en Estados Unidos, una prefectura en Japón y en algunos mercados ni siquiera hay código postal. La cultura muestra la dirección de cada mercado tal como la escribe el servicio postal. No exijas campos que un mercado no utilice.
• Códigos postales. Guárdalos como texto y valida según el país, o no los valides en absoluto. Un patrón de cinco dígitos rechaza la mayor parte del mundo. Códigos: postal_code_format.
• Números de teléfono. Almacénalos en formato E.164 (+46 8 123 456 78), formatea y valida con una librería que conozca el plan de numeración de cada país, como libphonenumber. Un patrón como (555) 555-1234 Rechaza cualquier número que no sea de Norteamérica. Códigos: phone_number_format.

Unidades y papel#

La mayor parte del mundo mide en kilómetros, kilogramos y grados Celsius; Estados Unidos usa millas, libras y grados Fahrenheit; el Reino Unido combina ambos sistemas. Utiliza la unidad correspondiente a la región del lector y formatea según la configuración regional. Códigos: fixed_unit.

new Intl.NumberFormat(locale, { style: 'unit', unit: 'kilometer' }).format(12);

La salida impresa y en PDF sigue el tipo de papel del mercado: tamaño Carta en Norteamérica y A4 en casi todo el resto del mundo. Códigos: paper_size.

Métodos de entrada y fuentes#

Para escribir chino, japonés y coreano se emplea un editor de métodos de entrada: se pulsa Enter para seleccionar una palabra, no para enviar datos. Un controlador que envíe datos al pulsar Enter debe ignorarlo mientras se esté componiendo una palabra. Códigos: ime_composition.

onKeyDown={event => {
  if (event.key === 'Enter' && !event.nativeEvent.isComposing) submit();
}}

Elige fuentes que cubran todos los alfabetos que utilices, o recurre a las fuentes del sistema que los soporten; el árabe, chino, hebreo, japonés, coreano y tailandés requieren cada uno su propia fuente. Deja espacio en la altura de línea para los alfabetos con caracteres altos, no dependas de cursivas (el chino y el japonés no las tienen) y nunca incluyas texto en imágenes, ya que no se pueden traducir.

Dirección de derecha a izquierda#

El árabe y el hebreo se escriben de derecha a izquierda, y toda la disposición se refleja en consecuencia: navegación, alineación, iconos que indican una dirección y el orden de las columnas.

• Configura dir="rtl" en el elemento raíz para esos idiomas, y lang para cada idioma.
• Utiliza propiedades lógicas: margin-inline-start en lugar de margin-left, padding-inline-end, inset-inline-start, text-align: start, float: inline-start, y las clases de utilidad lógicas de tu framework CSS (ms-4, pe-2, text-start). Códigos: physical_direction, unmirrored_layout.
• Refleja los iconos que indiquen dirección, como flechas y chevrones, pero no otros, como un reloj o un botón de reproducción.
• Los números, códigos, URL y nombres en alfabeto latino permanecen de izquierda a derecha dentro de texto con dirección de derecha a izquierda. Aísla el texto procedente de personas o datos en <bdi> para que no reordene lo que lo rodea.

Espacio para expandirse#

Las traducciones suelen ser más largas que el inglés, y las etiquetas cortas son las que más crecen: un 'OK' en alemán puede convertirse en una palabra completa, y una etiqueta de diez caracteres puede duplicar su longitud. Deja espacio al texto: permite que se envuelva, que los botones y pestañas crezcan según sus etiquetas, y evita anchos y alturas fijos para el texto. No truncques las etiquetas que la gente necesita para actuar. Códigos: clipped_text.

La seudotraducción alarga cada cadena de texto en estas cantidades, para que puedas ver el problema antes de que lo haga un traductor:

El chino, el japonés y el coreano suelen ser más breves, pero requieren líneas más altas.

Una lista de verificación para cada modificación.#

• El texto que leen las personas proviene del catálogo, y cada oración constituye un mensaje.
• Los números, fechas, horas, monedas, unidades y listas se adaptan a la configuración regional del lector.
• La ordenación y la correspondencia de mayúsculas y minúsculas siguen la configuración regional del lector.
• Los nombres, direcciones, códigos postales y números de teléfono son compatibles con todos los mercados.
• La tecla Enter no envía el formulario mientras se esté componiendo una palabra.
• El diseño utiliza propiedades lógicas y reserva espacio para textos más largos.

Relacionado#

• La comprobación de Globalización
• Pseudo-Localización
• Preparación para el mercado mundial y la cultura
• Globalización