RTL significa de derecha a izquierda. Solo unos pocos idiomas en el mundo utilizan la dirección de texto RTL, pero estos idiomas abarcan a más de mil millones de personas. Añadir compatibilidad con RTL a su tema es sencillo y puede aumentar considerablemente su mercado.
Aquí hay dos páginas, una con dirección RTL y otra LTR (normal):
| Inglés – LTR | Hebreo – RTL |
|---|---|
 |
 |
Puede ver cómo todo en la página RTL aparece «volteado» horizontalmente. Es como mirar la página LTR «normal» a través de un espejo. Crear esta imagen especular es en realidad bastante fácil. La dirección «dir» en CSS hará la mayor parte del trabajo y solo necesita parchear algunos lugares.
Cargar un archivo CSS diferente para los idiomas RTL
WordPress sabe qué idiomas tienen un flujo RTL y le facilita la personalización de su diseño. Cree un nuevo archivo rtl.css y colóquelo en el directorio raíz de su tema.
WordPress cargará el archivo rtl.css después de cargar el styles.css normal, por lo que el archivo CSS RTL solo necesita sobrescribir los atributos que deben cambiar. Esto significa que el archivo rtl.css suele ser bastante pequeño en la mayoría de los temas.
Configurar la dirección de la página a RTL
El atributo «direction» en CSS indica al navegador la dirección de la página. Para los idiomas RTL, debe establecerlo en «rtl». Hay otro atributo «mágico» que debe configurar para una correcta visualización RTL. Se llama «unicode-bidi». Ese atributo «mágico» es bastante fácil de entender cuando se está acostumbrado a escribir en RTL. Controla la forma en que se muestran los caracteres dentro de la línea.
Para una visualización RTL correcta, añada lo siguiente al selector .body:
{
direction:rtl;
unicode-bidi:embed;
}
¡Y ya está! Su tema ahora se muestra en RTL. O casi. Estas dos declaraciones harán que la mayor parte de la página se vea correctamente. Ahora, necesita gestionar las excepciones.
Voltear la dirección del texto, los floats y los clears
Cada lugar en el CSS donde se establece la dirección del texto y se flotan elementos, requiere atención manual.
Busque todos los selectores de text-align, float y clear. Si alguno de estos especifica una dirección, cambie de «right» a «left». Recuerde esa imagen especular que intentamos conseguir y le resultará más fácil entender esta transformación.
Gráficos que implican dirección
Otra cosa a la que debe prestar atención son los gráficos con significado de «dirección». Por ejemplo, si está creando un carrusel de imágenes, es posible que tenga flechas para los elementos siguiente y anterior. Recuerde que su sitio aparecerá a través de un espejo en los idiomas RTL, por lo que también debe voltear los gráficos direccionales. Si está utilizando una flecha que apunta a la derecha para «siguiente» en LTR, debe proporcionar una flecha que apunte a la izquierda para «siguiente» en RTL.
Selección de fuentes personalizadas
Los idiomas RTL no tienen las mismas fuentes que los idiomas LTR. Si utiliza fuentes decorativas y el diseño de su tema depende de ellas, debe buscar fuentes de reemplazo para estos idiomas. Si elige una fuente que no existe en un idioma RTL, el navegador volverá a la que conoce. Es mejor que especifique fuentes alternativas existentes que le gusten.
Si utiliza fuentes web estándar, no tendrá problemas.
Cómo probar su tema en RTL
Cuando esté desarrollando su archivo CSS RTL, es una buena idea probar siempre lo que está haciendo.
- Cambie el idioma en el archivo wp-config.php a ese idioma. Si está utilizando WPML, simplemente añada un idioma RTL a su sitio.
Añadir idiomas RTL - Traduzca los textos codificados de su tema (al menos los del front-end) a ese idioma. WPML le permite hacerlo utilizando el módulo Traducción de cadenas.
Traducir los textos del tema - Obtenga contenido de muestra en ese idioma. Para facilitar la edición en RTL en el panel de administración de WordPress, vaya a su perfil, desplácese hasta la configuración del idioma de administración y establezca el mismo idioma que el idioma de edición.
Editar contenido en modo RTL
¿No conoce ningún idioma RTL? Simplemente utilice Google Traductor. La traducción no tendrá mucho sentido, pero para fines de desarrollo de CSS, está bien.
Ahora, revise los diferentes tipos de contenido de su sitio. Asegúrese de incluir las entradas, las páginas, la página de inicio y cualquier contenido personalizado que cree.
Para obtener los mejores resultados, busque a alguien que hable ese idioma y pídale que haga una revisión general por usted. Su amigo que habla un idioma RTL detectará el 5 % restante de los problemas que a usted se le pasen por alto. Esto es un «extra», así que no detenga sus esfuerzos con RTL si no conoce a nadie que le ayude con las pruebas. En cuanto publique la versión de su tema compatible con RTL, recibirá muchos comentarios de sus clientes. Si usted hace el 95 % del esfuerzo, ellos estarán encantados de contribuir con correcciones para el 5 % restante.
Material extra: la administración de su tema en idiomas RTL
El requisito básico para tener un tema compatible con RTL es que el front-end (contenido público) se muestre correctamente en los idiomas RTL. Esto es lo verdaderamente básico, sin lo cual nadie podrá utilizar su tema para crear sitios en idiomas RTL.
Además de esto, muchos usuarios querrán tener el panel de administración de WordPress en su idioma. Esto también significa ver las pantallas de administración de su tema en orientación RTL.
La forma más sencilla de lograr esta compatibilidad con RTL para las pantallas de administración de su tema es utilizar las clases CSS estándar de WordPress para los elementos de la interfaz de usuario (GUI). Es cierto que esto significa que no puede utilizar efectos CSS sofisticados para adornar su GUI. Pero también significa que su GUI se integrará perfectamente en el panel de administración de WordPress y se mostrará correctamente en LTR / RTL.
Si debe utilizar su CSS personalizado para las pantallas de administración, compruebe cómo se ve en un idioma RTL. Las mismas reglas que sigue para el CSS del front-end se aplican también al back-end. Voltee las alineaciones, los floats y los clears; evite el posicionamiento absoluto y tenga cuidado con las imágenes.
Una gran referencia: el tema predeterminado de WordPress
Para su información, todos los temas predeterminados de WordPress están perfectamente adaptados a los idiomas RTL. Abra el tema predeterminado y busque el archivo rtl.css. Verá qué cambios se hicieron en el CSS para el tema predeterminado. Por lo general, estos cambios son bastante pequeños y fáciles de seguir.