Internacionalización: soporte a formato de escritura Right-to-Left en ASP.NET MVC

Uno de los temas pendientes en esta serie de post’s de internacionalización que estamos viendo es el soporte a culturas con sentido de escritura de derecha a izquierda en ASP.NET MVC (Right-to-Left o su acrónimo RTL, el cual usaremos de aquí en adelante). Esto será necesario cuando nuestra aplicación deba dar soporte a culturas que utilizan dicho formato de escritura, como por ejemplo sucede con el árabe.

Siguiendo con el ejemplo que venimos utilizando en el post anterior lo primero que haremos será dar soporte al árabe como cultura de nuestra aplicación. Para ello inicialmente crearemos el archivo de recursos asociado a la cultura árabe, el cual utiliza la sigla “ar” y agregaremos el contenido de cada recurso en su idioma:

InternacionalizacionRTL - CrearRecursos

NOTA: Todo el contenido que usemos en este post escrito en árabe está traducido con Google Translate ya que no conozco dicho idioma. Si alguien conoce del idioma y considera que la traducción no es la apropiada se agradece el comentario.

Lo siguiente será agregar tanto el link que permite el acceso a dicha cultura, el valor dentro de las constantes de las culturas soportadas y la lógica mínima para reconocer y establecer dicha cultura con nuestro esquema de rutas donde se visualiza la cultura.

  • Acceso a la nueva cultura:

InternacionalizacionRTL - AgregarLink

  • Constantes de culturas soportadas:

  • Lógica actualizada en el BaseController para reconocer y establecer la cultura:

Con esto ya tenemos el soporte para una nueva cultura, por lo cual podemos proceder a ejecutar la aplicación y validar que todo funcione como esperamos:

InternacionalizacionRTL - FuncionamientoInicial

Efectivamente al seleccionar dicha cultura estamos manteniendo todo el comportamiento que ya teníamos implementado. Así que ahora podemos centrarnos ya en lo que se refiere de forma específica a RTL.

Lo primero que deberemos tener en cuenta es el cómo poder reconocer si la cultura utiliza el formato RTL o el para nosotros convencional LTR. Para ello contamos con la propiedad IsRightToLeft sobre la cultura correspondiente al hilo actual, la cual podremos acceder de la siguiente forma:

Thread.CurrentThread.CurrentCulture.TextInfo.IsRightToLeft

Con dicha propiedad podremos hacer nuestro trabajo de reconocer el formato de escritura correspondiente al usuario y a partir de ello mostrar el contenido de una u otra forma.

Aquí, como en muchos aspectos asociados a internacionalización, tendremos por un lado el enfoque genérico en el cual sólo aplicamos alguna característica que modifique el contenido de una misma vista del sitio para todas las culturas, usado cuando la estructura es general para todas. O bien el enfoque donde ciertas culturas tienen sus propias vistas por cuestiones de que necesitan una renderización/visualización completamente distinta a otras.

En este caso iremos por el primer enfoque, adoptando una solución nativa: la etiqueta dir de HTML. A través del uso de la misma sobre el elemento html podremos definir cual de los dos sentidos de escritura se desea utilizar en la página en cuestión. Teniendo en cuenta la propiedad mencionada anteriormente que nos da la información de la cultura y este atributo que manipula el cambio en el contenido, podemos agregar la lógica necesaria en nuestro Layout, de forma que ante cada cambio de cultura se establezca el valor correspondiente en el atributo:

InternacionalizacionRTL - EstablecerDireccion
Agregamos la lógica para establecer el sentido de escritura en el archivo _Layout.cshtml

 

Para que la visualización de este ejemplo sea más clara, vamos a internacionalizar de forma completa el contenido de una página, en este caso la vista Contact del controlador Home. Para ello solo agregaremos en los archivos de recursos el contenido necesario y en la vista correspondiente la utilización de los mismos.

Ejecutando la aplicación con la cultura en español veremos que el resultado es el esperado:

InternacionalizacionRTL - EjecucionEs
Aplicación en español

 

Y si seleccionamos la cultura en árabe se produce el cambio en el formato de escritura:

InternacionalizacionRTL - EjecucionAr
Aplicación en árabe

 

Efectivamente el resultado es el esperado, y nuevamente sin tener que hacer demasiadas cosas de forma manual, sino utilizando distintas funcionalidades ya existentes.

La decisión que se deberá tomar a continuación de este punto es cómo manejar cuestiones adicionales a la visualización del contenido que no podemos manejar con la etiqueta mencionada. Por ejemplo la visualización de los menúes de acceso sigue estando en el formato LTR, ya que allí entra en juego la hoja de estilos de Bootstrap. Para este caso por ejemplo contamos con el paquete de Nuget Twitter.Bootstrap.RTL, el cual ofrece los recursos de la librería en el formato RTL. Una vez instalado el mismo podremos crear los bundles alternativos en el archivo BundleConfig.cs de nuestra aplicación.

Y finalmente de forma similar a lo que estamos haciendo para establecer la etiqueta dir podremos seleccionar un bundle u otro dependiendo de lo que la cultura del usuario indique, quedando la visualización del sitio de la siguiente forma:

InternacionalizacionRTL - FuncionamientoFinal
Aplicación en árabe con menú ajustado

 

Conclusiones:

Como venimos viendo en esta serie de post’s asociados a internacionalización generalmente contamos con muchas problemáticas ya resueltas en ASP.NET MVC, lo que debemos realizar es agregar lógica propia por encima para manejar y coordinar esas funcionalidades disponibles. Esto no es la excepción para dar soporte a RTL ya que el paradigma en sí es algo soportado, solamente debemos saber que tenemos disponible una propiedad que nos indica el sentido de escritura de la cultura del usuario y después que tenemos formas disponibles de aplicarlo a la visualización de nuestra aplicación.

Será en este último punto donde más trabajo haya que realizar en una aplicación real, ya que seguramente este valor cambiará de forma significativa el maquetado que deban tener las páginas de nuestra aplicación para cumplir con cada formato de escritura.

Espero que les sea útil, gracias por leer!!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s