Categorías: Labs

Creando web apps y sitios web compatibles con RTL – parte 2

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Impulsar la Web significa hacerla mejor para los desarrolladores y usuarios igualmente. Significa abordar problemas que nuestra Web afronta; esto es especialmente cierto para hacer diseños responsivos RTL y desarrollos más fáciles de conseguir.

Antes de que sigamos adelante hacia los temas de vanguardia en RTL, aquí está un vídeo tutorial con un ejemplo práctico para refrescarte la memoria acerca de cómo programar RTL adecuadamente hoy en día:

Retomando donde lo dejamos en nuestro último artículo, es hora de profundizar en algunos temas avanzados acerca de la implementación de Derecha-a-Izquierda (Right-To-Left). En la parte 1 cubrimos los fundamentos de RTL. En este segundo artículo cubriremos guías con las últimas novedades para interfaces de usuario bidireccionales (BIDI). Esto es el estado alfa de la Web, podemos echar un vistazo a lo que a RTL le depara en el futuro.

La vanguardia de RTL

El núcleo del diseño de interfaz de usuario con RTL y desarrollo en la Web se encuentra en las propiedades CSS y, así como en cualquier otro aspecto del desarrollo web, estas propiedades se mantienen en mejora en el tiempo.

Aquí están las propiedades CSS que puedes empezar a usar hoy en versiones alfa de varios navegadores modernos. (Esta información es susceptible de cambio según las actualizaciones del navegador son lanzadas):

Alineación de texto: en el pasado usábamos explícitamente la configuración de la alineación horizontal del texto con text-align left o right (por ejemplo text-align: left). Ahora tenemos valores de comienzo y final que pueden ser usados en su lugar. Por ejemplo, text-align: start te dará un resultado diferente dependiendo de si el contenido es configurado para RTL o LTR. start indica izquierda en LTR y derecha en RTL, y viceversa para end.

Ejemplo usando left/right:

#content {
  text-align: left:
}
html[dir="rtl"] #content {
  text-align: right;
}

Ejemplo usando start/end:

#content {
  text-align: start;
}

Con start/end, no hay necesidad de una regla RTL.

Navegadores compatibles: Chrome 1.0+, Safari 3.1+, Firefox 3.6+, Android, iOS. No compatible con Internet Explorer en este momento.

Padding, margen, y bordes: hay un par de mejoras relacionadas con estas propiedades.

Cada una de ellas ahora puede tomar un sufijo adicional de -inline-start o -inline-end, por ejemplo puedes escribir padding-inline-end o margin-inline-start. Estas nuevas palabras clave dan el mismo resultado que start y end para la alineación de texto: padding-inline-start se equipara a padding-left en LTR y padding-right en RTL. margin-inline-end da el efecto de margin-right en LTR y margin-left en RTL.

Ejemplo usando left/right:

#content {
  padding-left: 12px:
  margin-right: 20px;
}
html[dir="rtl"] #content {
  padding-left: 0;
  padding-right: 12px;
  margin-left: 20px;
  margin-right: 0px;
}

Ejemplo usando start/end:

#content {
  padding-inline-start: 12px:
  margin-inline-end: 20px;
}

De nuevo, no hay necesidad para una regla RTL; margin-inline-end actuará como margin-right en LTR y actuará como margin-left para RTL, por ejemplo.

Navegadores compatibles: solo Firefox 41+.

Posicionamiento absoluto: left y right son propiedades CSS que han sido siempre claves para el posicionamiento absoluto, pero muy pronto escribirás CSS mucho más inteligente para tus usuarios con las nuevas propiedades offset-inline-start y offset-inline-end.

Merece la pena mencionar que top y bottom pueden ser sustituidas por offset-block-start y offset-block-end.

Ejemplo usando left/right:

#content {
  position: absolute;
  left: 5rem;
}
html[dir="rtl"] #content {
  left: auto;
  right: 5rem;
}

Ejemplo usando start/end:

#content {
  offset-inline-start: 5rem;
}

Una vez más, el concepto start/end nos ha ahorrado una regla en nuestro fichero CSS.

Navegadores compatibles: solo Firefox 41+.

Floats: float: left y float: right han existido y han sido usadas durante mucho tiempo, pero muy pronto serás capaz de usar float: inline-start y float: inline-end en Firefox Nightly. inline-start posicionará a la izquierda en modo de izquierda a derecha (LTR), y a la derecha en modo de derecha a izquierda (RTL).

Ejemplo usando start/end:

#content {
  float: left;
}
html[dir="rtl"] #content {
  float: right;
}

Usando start/end:

#content {
  float: inline-start;
}

Navegadores compatibles: Firefox 44.

Firefox OS te brinda la gran oportunidad de intentar algunas de las últimas implementaciones de propiedades CSS — hay una página de referencia en la Wiki de Mozilla para todas las nuevas propiedades y valores relacionados con BIDI en CSS.

Componentes Web: los componentes Web son widgets de interfaz de usuario reutilizables (véase MDN para más información). Si has trabajado con componentes web sabrás que los estilos CSS definidos dentro del shadow DOM (DOM oculto) tienen alcance, así que por defecto no puedes seguir la dirección de toda la página para los componentes de ámbito CSS usando html[dir=”rtl”]. Sin embargo, el shadow DOM presenta un nuevo selector llamado :host-context(), el cual puede ser usado para seleccionar un elemento encapsulado basado en el correspondiente elemento padre.

Vamos a aclararlo con un ejemplo— digamos que tienes un elemento dentro de tu árbol shadow DOM con una clase llamada back. En una situación normal donde no hay un shadow DOM tu solamente usarias html[dir=”rtl”] .back {}, sin embargo no puedes usar esta sintaxis desde dentro de un componente web. ¿Con alcance y encapsulado, recuerdas? El selector equivalente cuando .back está dentro de un componente de ámbito web sería el siguiente:

.back:host-context(html[dir="rtl"]) { }

El estado exacto de compatibilidad del servidor de esta sintaxis no está clara actualmente, sin embargo puedes usar este polyfill para cubrir agujeros en la compatibilidad.

Querer usar un polyfill para ensombrecer CSS pero todavía querer jugar con RTL en los componentes web en los navegadores que ya lo soportan tales como Firefox (actualmente oculta detrás del flag dom.webcomponents.enabled ) y Google Chrome? Puedes hacer esto usando Mutation Observers mediante la observación de la propiedad document.documentElement.dir. El código para el observer sería similar a este ejemplo:

var dirObserver = new MutationObserver(updateShadowDir);
dirObserver.observe(document.documentElement, {
  attributeFilter: ['dir'],
  attributes: true
});

Tampoco debes olvidar el inicializar tu función la primera vez que la página se carga, justo después de la lógica del observer:

updateShadowDir();

Tu función updateShadowDir() sería parecida a esto:

function updateShadowDir() {
  var internal = myInnerElement.shadowRoot.firstElementChild;
  if (document.documentElement.dir === 'rtl') {
    internal.setAttribute('dir', 'rtl');
  } else {
    internal.removeAttribute('dir');
  }
};

Eso es todo lo que deberías hacer en el lado JavaScript— ahora, desde que el primer elemento hijo de tu componente web tiene un cambiante atributo dir, tu CSS dependerá de ello como un selector en lugar de un elemento HTML. Digamos que si estas usando span — tu selector se parecería a esto:

span[dir="rtl"] rest-of-the-selectors-chain {}

Esto podría parecer un poco torpe, pero afortunadamente el futuro es más claro, así que echemos un vistazo a lo que W3C tiene reservado para nosotros en el futuro con relación a Right-To-Left.

El futuro de RTL en la Web

Informando al servidor de la dirección del texto: Actualmente en los campos de entrada y áreas de texto, cuando se envía un formulario, la dirección de los elementos de la página/formulario se pierden. Los servidores entonces tienen que llegar con su propia lógica para estimar la dirección del texto que les fue enviada.

Para resolver este problema y ser más informativos sobre el texto siendo enviado así como también sobre su dirección, W3C ha añadido un nuevo atributo para la especificación de formularios en HTML5 llamado dirname, el cual los proveedores de navegadores implementarán en el futuro.

Como la especificación declara, incluir el dirname “en un elemento de control de formulario permite el envío de la direccionalidad del elemento, y le da el nombre del campo que contiene este valor durante el envío del formulario . Si se especifica el atributo, su valor no deberá ser una cadena vacía”.

Traducción: Añadiendo este atributo a tu <input> o <textarea> hace que la dirección se pase a través de la cadena GET o POST que es enviada al servidor. Veamos un ejemplo del mundo real — primero, supongamos que tienes este formulario:

<form action="result.php" method="post">
<input name="comment" type="text" dirname="comment.dir"/>
<button type=submit>Send!</button>
</form>

Tras enviar el formulario, la cadena POST enviada al servidor incluirá un campo llamado comment, y otro llamado comment.dir. Si el usuario teclea Hola en el área de texto y lo envía el resultado de la cadena será:

comment=Hola&comment.dir=ltr

Pero si el usuario teclea  “مرحبا” se verá como esto:

comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&comment.dir=rtl

Lee las especificaciones aquí.

Nota: Para que los caracteres arábigos sean mostrados correctamente en URLs en tu navegador los caracteres son codificados en UTF-8 y cada letra arábiga ahora usa 4 caracteres y está separada en el medio con un signo %.

Por ejemplo, si tienes este enlace: http://ar.wikipedia.org/wiki/نجيب_محفوظ

Cuando lo visites, el enlace en tu navegador será transformado a

http://ar.wikipedia.org/wiki/%D9%86%D8%AC%D9%8A%D8%A8_%D9%85%D8%AD%D9%81%D9%88%D8%B8

Mejores maneras de gestionar fondos e imágenes en RTL: Cansado de usar transform: scaleX(-1) para reflejar tus imágenes de fondo? El W3C está introduciendo una nueva palabra clave CSS rtlflip, la cual es usada así:

background-image: url(backbutton.png) rtlflip;

Esta palabra clave te ahorra la molestia de manualmente reflejar tus imágenes a través de la propiedad transform: scaleX(-1).

También puede ser usada para dar estilos a los marcadores de elementos de lista como este:

list-style-image:url('sprite.png#xywh=10,30,60,20') rtlflip;

La especificación también establece que esta palabra clave puede ser usada junto con todas las otras formas posibles que una imagen se puede especificar en imágenes CSS3, por ejemplo. url, sprite, image-list, linear-gradient, y radial-gradient.

APIs de internacionalización

Anteriormente cubrimos la API de internacionalización de JavaScript en un artículo introductorio. Recapitulemos las partes menos conocidas pero importantes, relevantes en el contexto de trabajar en contenidos de derecha a izquierda.

El soporte de API de internacionalización cubre una amplia variedad de lenguajes y sus derivados. Por ejemplo no solo soporta el árabe como idioma, sino también árabe de Egipto, árabe de Túnez, y toda una lista completa de otras variantes.

Usar números arábigos orientales en lugar de arábigos occidentales: En algunas variantes del árabe, los números arábigos orientales  (١٢٣)  son usados en lugar de los números arábigos occidentales (123). Las APIs internacionales nos permiten especificar cuándo mostrar  ١٢٣  y cuándo mostrar 123.

console.log(new Intl.NumberFormat('ar-EG').format(1234567890));

Esto declara que queremos formatear 1234567890 a números arábigos de Egipto. Salida: ١٬٢٣٤٬٥٦٧٬٨٩٠

console.log(new Intl.NumberFormat('ar-TN').format(1234567890));

Aquí estamos diciendo que queremos obtener el mismo número en formato arábigo de Túnez; como Túnez usa el formato arábigo occidental, la salida es: 1234567890

Mostrar fechas en el calendario Hijri/musulmán en lugar de Gregoriano: Durante el mes del ramadán, Google hizo google.com/ramadan para mostrar contenido relacionado con la ocasión. Una de las piezas esenciales de información mostrada era el día del mes en el calendario Hijri. Google usó un polyfill para obtener esta información. Con las APIs de internacionalización puedes extraer la misma información con una línea de JavaScript en lugar de toda una librería de JavaScript.

Aquí está el ejemplo:

console.log(new Intl.DateTimeFormat("fr-FR-u-ca-islamicc").format(new Date()));

Esta línea declara que queremos formatear la fecha actual a la fecha del calendario árabe y mostrarlo con numerales fr-FR (arábigo occidental). Salida:16/12/1436

console.log(new Intl.DateTimeFormat("ar-SA-u-ca-islamicc").format(new Date()));

Esto hace lo mismo, pero formatea para mostrarlo en árabe de Arabia Saudí el cual usa números arábigos del este. Output: ١٦‏/١٢‏/١٤٣٦

Palabras finales

Con este artículo, concluimos el repaso en profundidad en manejar RTL en la Web de la manera correcta. ¡Esperamos que esto haya servido de ayuda en fomentar incluir soporte RTL en tus sitios web/productos! Si eres un contribuidor Firefox OS ésta será tu guía para añadir RTL en Gaia.

The following two tabs change content below.