Cómo admitir interfaces de usuario bidireccionales (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Diseña tus aplicaciones para proporcionar compatibilidad con textos bidireccionales para los sistemas de escritura de derecha a izquierda.

Introducción

Microsoft tiene una larga historia de producción de software para Oriente Medio y demás regiones que usan el sistema de escritura de derecha a izquierda. Los requisitos de diseño para esas partes del mundo son exclusivos porque los sistemas de escritura que generalmente se usan allí requieren de compatibilidad de textos bidireccionales. Esta es la capacidad de introducir y mostrar diseño de texto ya sea en orden de derecha a izquierda (RTL) como de izquierda a derecha (LTR). Windows 3.1 fue la primera versión de Windows en incorporar compatibilidad para idiomas de textos bidireccionales. En Windows 98, se reflejó la orientación de la interfaz de usuario para que la experiencia del usuario tuviera una apariencia más natural cuando se presentaba a los hablantes de árabe o hebreo.

Windows 8 proporciona una experiencia bidireccional óptima. Cada elemento de la nueva interfaz de usuario de Windows está diseñado para formar parte de una experiencia del usuario enriquecedora y envolvente para los idiomas de lectura de derecha a izquierda, en que se exhiben de la forma más natural.

A partir de Windows 8, se incluyen nueve idiomas BiDi:

• Dos idiomas completamente localizados (árabe y hebreo).
• Siete paquetes de interfaz de idiomas para los mercados emergentes: persa, urdu, dari, kurdo central, sindhi, punyabí (Pakistán) y uigur. Dos de estos idiomas son nuevos y exclusivos de Windows 8.

Diseñar aplicaciones de la Tienda Windows para los mercados con idiomas BiDi

He aquí la filosofía de diseño BiDi y estudios de caso que muestran consideraciones de diseño BiDi.

Elementos de diseño BiDi

Hay cuatro elementos que determinan las decisiones sobre el diseño BiDi en Windows:

• Interfaz de usuario reflejada. El flujo de la interfaz de usuario permite que el contenido de derecha a izquierda se presente en su formato nativo. El diseño de la interfaz de usuario se percibe como local en los mercados BiDi.
• Coherencia en la experiencia del usuario. El diseño tiene un aspecto natural en la orientación de derecha a izquierda. Los elementos de la interfaz de usuario comparten un diseño coherente y se muestran tal y como el usuario espera.
• Optimización de la entrada táctil. Los elementos son fáciles de alcanzar y la interacción táctil es natural, del mismo modo que la experiencia táctil del usuario en las interfaces de usuario no reflejadas.
• Compatibilidad con texto mixto. La compatibilidad con la direccionalidad del texto permite una presentación óptima de los textos mixtos (textos en inglés en compilaciones BiDi y viceversa).

Introducción al diseño de características

La plataforma Windows admite los cuatro elementos de diseño BiDi mencionados anteriormente. Veremos algunas de las características más importantes de Windows y te proporcionaremos el contexto en el que pueden afectar a tu aplicación.

Navega en la dirección que te resulte más natural.

Ajustamos la dirección de la cuadrícula para que fluyera de derecha a izquierda, lo que significa que el primer icono de la cuadrícula está situado en la esquina superior derecha y el último, en la esquina inferior izquierda. Así, la información se presenta en un patrón que resulta familiar a los usuarios por las publicaciones impresas, como libros y revistas, en las que la lectura comienza siempre en la esquina superior derecha y continúa hacia la izquierda.

Para mantener un flujo coherente de la interfaz de usuario, los iconos que se colocan en la cuadrícula siempre mantienen una distribución de derecha a izquierda, lo que significa que el nombre y el logotipo de la aplicación se encuentran en la esquina inferior derecha del icono, independientemente del idioma de la interfaz de usuario de la aplicación.

Icono en BiDi:

Icono en inglés:

Obtén notificaciones de icono que se lean correctamente.

Los iconos admiten texto mixto. La región de notificación dispone de flexibilidad integrada para ajustar la alineación del texto en función del idioma de la notificación. Cuando la aplicación envía notificaciones en árabe, hebreo u otro idioma BiDi, el texto se alinea a la derecha, y cuando llega una notificación en inglés u otro idioma de izquierda a derecha, se alinea a la izquierda.

Facilidad táctil en una experiencia de usuario coherente para los idiomas de derecha a izquierda.

Todos los elementos de la nueva interfaz de usuario de Windows se ajustan a la orientación de los idiomas de derecha a izquierda. Los accesos y los controles flotantes se han colocado en el borde izquierdo de la pantalla para que no se superpongan a los resultados de búsqueda ni afecten a la optimización de la entrada táctil. Pueden alcanzarse fácilmente con los pulgares.

Entrada de texto en cualquier dirección.

Windows ofrece un teclado táctil en pantalla nítido y sencillo. Para los idiomas BiDi, hay una tecla de control de dirección de texto de modo que la dirección de la entrada de texto se pueda alternar según se necesite.

Usa cualquier aplicación en cualquier idioma.

Instala tus aplicaciones preferidas y úsalas en cualquier idioma. Las aplicaciones tienen el aspecto y la funcionalidad que tendrían en las versiones de Windows que no son BiDi. Los elementos dentro de las aplicaciones siempre se colocan en una posición coherente y predecible.

Muestra los paréntesis correctamente.

Con la introducción del algoritmo de paréntesis BiDi (BPA), los pares de paréntesis siempre se muestran correctamente, independientemente de las propiedades de idioma o de la alineación del texto.

Paréntesis incorrecto:

Paréntesis correcto:

Nueva fuente.

Windows usa la nueva fuente Segoe UI para todos los idiomas bidireccionales. La forma y la escala de esta nueva fuente están adaptadas a la nueva interfaz de usuario de Windows.

Caso práctico 1: una aplicación de música en idioma BiDi

Introducción

Las aplicaciones multimedia presentan un desafío de diseño muy interesante ya que, por lo general, se espera que los controles multimedia tengan un diseño de izquierda a derecha similar al de los idiomas que no son BiDi.

Establecer la direccionalidad de la interfaz de usuario

Conservar el flujo de la interfaz de usuario de derecha a izquierda es importante para un diseño coherente en los mercados con idiomas BiDi. Incluir elementos con un flujo de izquierda a derecha en este contexto es difícil porque algunos elementos de navegación, como el botón Atrás, pueden contradecir la orientación direccional del botón Atrás en los controles de audio.

La aplicación Música de Microsoft conserva una cuadrícula orientada de derecha a izquierda. Esto le da a la aplicación una apariencia muy natural para los usuarios que ya navegan en esta dirección a través de la nueva interfaz de usuario de Windows. El flujo se mantiene garantizando que los elementos principales no estén simplemente ordenados de derecha a izquierda, sino que también estén correctamente alineados en los encabezados de sección para ayudar a mantener el flujo de la interfaz de usuario.

Control de texto

La biografía del intérprete de la pantalla anterior está alineada a la izquierda, mientras que otros fragmentos de texto relacionados, como los nombres del álbum y de la pista, mantienen la alineación a la derecha. El campo de la biografía es un elemento de texto de tamaño considerable, que resulta difícil de leer cuando está alineado a la derecha porque cuesta seguir las líneas cuando se lee un bloque de texto más grande. En general, deben considerarse excepciones de alineación como esta en cualquier elemento de texto de dos o tres líneas con cinco o más palabras, cuando la alineación del bloque de texto es opuesta a la del diseño direccional general de la aplicación.

La manipulación de la alineación en toda la aplicación puede parecer sencilla pero, con frecuencia, pone en evidencia las limitaciones de los motores de representación en cuanto a la ubicación del carácter neutro en las cadenas con idiomas BiDi. Por ejemplo, la siguiente cadena puede mostrarse de diferentes maneras según la alineación:

	Cadena en inglés (izquierda a derecha)	Cadena en hebreo (derecha a izquierda)
Alineación a la izquierda	¡Hola a todos!	בוקר טוב!
Alineación a la derecha	!Hola a todos¡	!בוקר טוב

 

Para garantizar que la información del intérprete se muestre correctamente en la aplicación de música, el equipo de desarrollo separó las propiedades de diseño de texto de la alineación. En otras palabras, la información del intérprete probablemente se muestra como alineada a la derecha en muchos de los casos pero el ajuste de diseño de la cadena se establece sobre la base de procesamiento en segundo plano personalizado. El procesamiento en segundo plano determina la mejor configuración de diseño direccional sobre la base del contenido de la cadena.

Ejemplo: sin procesamiento de diseño de cadenas personalizado, el nombre del intérprete "The Contoso Band." aparecería como ".The Contoso Band."

Preprocesamiento especializado de la dirección de la cadena

Cuando la aplicación sondea nuestros servidores en busca de metadatos multimedia, preprocesa cada cadena antes de mostrarla al usuario. Durante este preprocesamiento, la aplicación también realiza una transformación para dar coherencia a la dirección del texto. Para hacer esto, comprueba si existen caracteres neutros en los extremos de la cadena. Además, si la dirección del texto de la cadena es opuesta a la dirección de la aplicación establecida por la configuración de idiomas de Windows, anexa (y en ocasiones antepone) marcadores de dirección de Unicode. La función de transformación tiene este aspecto en JavaScript:

function normalizeTextDirection(data) {
    if (data) {
        var lastCharacterDirection = DetectCharacterDirection(data[data.length - 1]);

        // If the last character has strong directionality (direction is not null), then the text direction for the string is already consistent.
        if (!lastCharacterDirection) {
            // If the last character has no directionality (neutral character, direction is null), then we may need to add a direction marker to
            // ensure that the last character doesn't inherit directionality from the outside context.
            var appTextDirection = GetAppTextDirection(); // checks the <html> element's "dir" attribute.
            var dataTextDirection = DetectStringDirection(data); // Run through the string until a non-neutral character is encountered,
                                                                 // which determines the text direction.

            if (appTextDirection !== dataTextDirection) {
                // Add a direction marker only if the data text runs opposite to the directionality of the app as a whole,
                // which would cause the neutral characters at the ends to flip.
                var directionMarkerCharacter =
                    dataTextDirection === TextDirections.RightToLeft ?
                        UnicodeDirectionMarkers.RightToLeftDirectionMarker : // "\u200F"
                        UnicodeDirectionMarkers.LeftToRightDirectionMarker; // "\u200E"

                data += directionMarkerCharacter;

                // Prepend the direction marker if the data text begins with a neutral character.
                var firstCharacterDirection = DetectCharacterDirection(data[0]);
                if (!firstCharacterDirection) {
                    data = directionMarkerCharacter + data;
                }
            }
        }
    }

    return data;
}

Los caracteres Unicode agregados son de ancho cero y, como resultado, no afectan el espaciado de las cadenas. Este código puede ocasionar una disminución del rendimiento porque para detectar la dirección de una cadena, es necesario recorrerla hasta encontrar un carácter que no sea neutro. Para detectar la neutralidad de cada carácter, primero se compara con varios intervalos Unicode, de modo que no es una comprobación trivial.

Caso práctico 2: una aplicación de correo en idioma BiDi

Introducción

En cuanto a los requisitos de diseño de la interfaz de usuario, un cliente de correo es relativamente fácil de diseñar. La aplicación Microsoft Mail que viene con Windows se refleja de manera predeterminada. Desde una perspectiva de control de texto, la visualización de texto y las funcionalidades de redacción de una aplicación de correo deben ser más sólidas para adaptarse a escenarios de texto mixto.

Establecer la direccionalidad de la interfaz de usuario

El diseño de la interfaz de usuario de la aplicación Microsoft Mail se refleja. Los tres paneles se reorientaron de modo que el panel de carpetas se encuentre en el margen derecho de la pantalla, seguido del panel de lista de elementos de correo a la izquierda y el panel de redacción de correo electrónico.

Los elementos adicionales se reorientaron para que coincidan con la optimización táctil y de flujo de la interfaz de usuario general. Esto incluye la barra de la aplicación y los iconos de eliminación, respuesta y redacción.

Control de texto

Interfaz de usuario

La alineación de texto a través de la interfaz de usuario generalmente está alineada a la derecha. Esta incluye el panel de elementos y el panel de carpetas. El panel de elementos está limitado a dos líneas de texto (dirección y título). Es importante para conservar la alineación de derecha a izquierda sin introducir un bloque de texto que sería difícil de leer cuando la dirección del contenido es opuesta al flujo de dirección de la interfaz de usuario.

Edición de texto

La edición de texto requiere de la capacidad de componer tanto en la forma de derecha a izquierda como en la forma de izquierda a derecha. Además, debe mantenerse el diseño de la redacción mediante un formato, como el texto enriquecido, que permite guardar información sobre la dirección.