Cómo traducir idiomas RTL en WordPress: árabe, hebreo, persa
Acabas de terminar de traducir tu tema de WordPress al árabe. Subes el archivo .mo, cambias el idioma del sitio y el resultado es ilegible. El texto se desborda hacia la izquierda, los botones se superponen y tu diseño, cuidadosamente elaborado, parece que ha pasado por una trituradora de papel.
Bienvenido al mundo de los idiomas de derecha a izquierda (RTL), donde la traducción es solo la mitad de la batalla.
El árabe, el hebreo y el persa (farsi) se encuentran entre los idiomas más hablados del mundo. Solo el árabe tiene más de 400 millones de hablantes nativos. Si tu sitio de WordPress ignora a estas audiencias, estás dejando mucho dinero sobre la mesa. Pero atenderlos requiere algo más que intercambiar palabras en inglés por palabras en árabe. Requiere repensar toda la dirección de tu diseño.
Esta guía cubre todo lo que necesitas saber: cómo funciona RTL en WordPress, cómo corregir tu CSS, cómo manejar los archivos .po con cadenas RTL y cómo evitar los errores más comunes.
Cómo funciona RTL en WordPress
WordPress tiene soporte RTL integrado. Cuando estableces el idioma de tu sitio en árabe (ar), hebreo (he) o persa (fa), WordPress agrega automáticamente dir="rtl" a la etiqueta <html> y carga una hoja de estilo rtl.css si tu tema la proporciona.
Esta es la teoría. En la práctica, la mayoría de los temas se entregan con un soporte RTL mínimo o defectuoso.
Qué cambia realmente
Cuando se activa el modo RTL, el navegador refleja todo el diseño de la página:
- El texto fluye de derecha a izquierda.
- Las barras laterales cambian de lado.
- Los menús de navegación invierten el orden.
- Los valores de padding y margin se invierten (la izquierda se convierte en derecha).
- Los iconos con significado direccional (flechas, cheurones) deben reflejarse.
Si el CSS de tu tema se escribió solo para LTR, cada declaración margin-left, padding-right, float: left y text-align: left ahora está luchando contra el motor RTL del navegador.
Cómo arreglar tu CSS para RTL: Una guía práctica
El enfoque más limpio es utilizar Propiedades Lógicas CSS, que se adaptan automáticamente a la dirección de escritura del documento. En lugar de left y right, utilizas inline-start y inline-end.
Antes: Propiedades Físicas (Se rompe en RTL)
/* LTR-only CSS -- breaks in Arabic */
.sidebar {
float: left;
margin-right: 20px;
}
.nav-arrow {
padding-left: 10px;
text-align: left;
}
.card {
border-left: 3px solid #0073aa;
}
Después: Propiedades Lógicas (Funciona en ambas direcciones)
/* Direction-agnostic CSS -- works in both LTR and RTL */
.sidebar {
float: inline-start;
margin-inline-end: 20px;
}
.nav-arrow {
padding-inline-start: 10px;
text-align: start;
}
.card {
border-inline-start: 3px solid #0073aa;
}
Con las propiedades lógicas, escribes tu CSS una vez y funciona correctamente tanto en inglés como en árabe sin ninguna modificación.
El método de anulación [dir="rtl"]
Si no puedes refactorizar toda tu hoja de estilo, puedes dirigirte a RTL específicamente utilizando selectores de atributos:
[dir="rtl"] .sidebar {
float: right;
margin-left: 20px;
margin-right: 0;
}
[dir="rtl"] .nav-arrow {
padding-left: 0;
padding-right: 10px;
text-align: right;
}
Esto funciona, pero duplica tu carga de mantenimiento. Cada vez que actualices tus estilos LTR, también debes actualizar las anulaciones RTL.
Traducir archivos PO con cadenas RTL
La traducción en sí misma presenta desafíos que van más allá del diseño. Los idiomas RTL tienen características únicas que hacen tropezar a la mayoría de las herramientas automatizadas.
Texto bidireccional (Bidi) en archivos PO
La verdadera complejidad aparece cuando el texto RTL y LTR se mezclan en una sola cadena. Considera este patrón común de WordPress:
msgid "Powered by %s"
msgstr "مدعوم بواسطة %s"
El marcador de posición %s se reemplazará con un nombre de producto en inglés como "WooCommerce". En la salida renderizada, el navegador debe mostrar el texto árabe que fluye de derecha a izquierda, luego cambiar a izquierda a derecha para la palabra en inglés, y luego potencialmente volver a cambiar.
Esto se llama texto bidireccional (o "bidi"), y es manejado por el Algoritmo bidireccional Unicode. La mayoría de las veces funciona automáticamente. Pero cuando tienes múltiples marcadores de posición o números adyacentes al texto RTL, el orden visual puede volverse impredecible.
Errores comunes de traducción
Las herramientas de traducción genéricas cometen varios errores específicos de RTL:
-
Orden de marcador de posición invertido. Una cadena como
%1$s out of %2$spodría tener los marcadores de posición intercambiados porque la IA los reordena para que coincidan con la gramática árabe. Esto produce una salida incorrecta como "10 out of Page" en lugar de "Page out of 10." Obtén más información sobre cómo proteger las variables de código durante la traducción. -
Direccionalidad HTML rota. Si tu cadena contiene HTML en línea como
<span dir="ltr">, un traductor ingenuo podría eliminar el atributodiro traducirlo. -
Formas plurales faltantes. El árabe tiene seis formas plurales: cero, uno, dos, pocos, muchos y otros. Este es el sistema plural más complejo de todos los idiomas que admite WordPress. Una herramienta que solo genera dos formas (como el singular/plural en inglés) dejará tu archivo
.poárabe roto. Para una inmersión profunda en cómo funcionan los plurales de Gettext, consulta nuestra guía sobre pluralización compleja en WordPress.
Así es como se ve una cadena plural árabe traducida correctamente en un archivo .po:
# Arabic: nplurals=6
msgid "%d comment"
msgid_plural "%d comments"
msgstr[0] "لا تعليقات"
msgstr[1] "تعليق واحد"
msgstr[2] "تعليقان"
msgstr[3] "%d تعليقات"
msgstr[4] "%d تعليقًا"
msgstr[5] "%d تعليق"
Si alguna de esas seis formas está vacía o es incorrecta, WordPress recurrirá a la cadena en inglés para ese conteo específico. Tus usuarios verán "5 comments" en inglés dispersos por una interfaz que de otro modo estaría completamente en árabe.
Probar tu implementación RTL
Traducir y arreglar CSS no es suficiente. Necesitas verificar el resultado en un navegador real.
Una lista de verificación rápida para las pruebas
- Cambia el idioma de WordPress a árabe en Ajustes > General. No te limites a añadir
dir="rtl"manualmente, utiliza la configuración de idioma real para que WordPress cargue sus propias anulaciones RTL. - Comprueba los menús de navegación. ¿Están reflejados? ¿Los menús desplegables se abren en la dirección correcta?
- Inspecciona los campos de formulario. El texto de entrada debe fluir de derecha a izquierda. El texto del marcador de posición debe estar alineado a la derecha.
- Verifica el contenido de dirección mixta. Las cadenas que contienen tanto árabe como inglés (como nombres de marca o URLs) deben renderizarse en el orden visual correcto.
- Prueba en dispositivos móviles. Los errores de diseño RTL suelen ser más graves en pantallas más pequeñas, donde hay menos espacio para errores de alineación.
Si tus traducciones no se muestran en absoluto, el problema podría no estar relacionado con RTL; primero comprueba la compilación de tu archivo .mo y las rutas de archivo.
Truco de las herramientas de desarrollador del navegador
En Chrome DevTools, puedes forzar temporalmente RTL en cualquier página sin cambiar la configuración de WordPress:
/* Paste in DevTools console as: document.documentElement.dir = 'rtl' */
html {
direction: rtl;
}
Esto te da una vista previa rápida de cómo tu tema maneja RTL antes incluso de empezar a traducir.
Automatizar la traducción RTL de la manera correcta
La traducción manual de idiomas RTL es costosa y lenta. Los traductores profesionales de árabe cobran tarifas elevadas, y encontrar a alguien que entienda tanto el idioma como la sintaxis Gettext específica de WordPress es difícil.
SimplePoTranslate resuelve esto con un motor de IA con reconocimiento de contexto que entiende los desafíos específicos de RTL de forma nativa:
- Las seis formas plurales árabes se generan automáticamente. Nuestro motor lee el encabezado
Plural-Formsen tu archivo.poy produce exactamente el número de formas que requiere tu idioma de destino. Sin ranurasmsgstrvacías, sin alternativas en inglés. - Seguridad del marcador de posición. Las variables como
%s,%dy%1$sse bloquean durante la traducción. La IA no puede reordenarlas, eliminarlas ni corromperlas, incluso cuando la gramática árabe sugiere un orden de palabras diferente. Lee más sobre cómo el bloqueo de sintaxis protege tu código. - Contexto bidireccional. La IA entiende que las cadenas de dirección mixta necesitan un manejo especial y conserva los atributos de direccionalidad HTML.
Ya sea que estés localizando un tema de blog para una audiencia hebrea o traduciendo una tienda completa de WooCommerce al persa, el proceso es el mismo: sube tu archivo .po, selecciona tu idioma de destino y descarga el archivo traducido. Todo el flujo de trabajo lleva minutos, no días.
Para obtener un recorrido completo del proceso de localización de WordPress, consulta nuestra guía definitiva para la localización de WordPress.
Deja de tratar RTL como una ocurrencia tardía
Los idiomas de derecha a izquierda representan a más de mil millones de usuarios potenciales. El árabe es el quinto idioma más hablado del mundo. El hebreo y el persa atienden a mercados críticos en Oriente Medio y Asia Central.
Si tu sitio de WordPress no puede atender a estos usuarios con una experiencia pulida y de aspecto nativo, encontrarán un competidor que sí pueda.
La buena noticia: WordPress ya tiene la infraestructura. Tu tema solo necesita el CSS adecuado, y tus archivos .po necesitan una herramienta de traducción que respete la complejidad de los idiomas RTL.
¿Listo para traducir tu sitio de WordPress al árabe, hebreo o persa? Empieza gratis en SimplePoTranslate.com