Cómo ajustar el diseño y las fuentes para diversos idiomas y admitir diseños de derecha a izquierda (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 ]
Sigue unas sencillas directrices para que tus aplicaciones de la Tienda Windows admitan diseños y fuentes localizadas.
Tecnologías
Instrucciones
Directrices de diseño
Algunos idiomas, como el alemán y el finés, requieren más espacio para el texto que el inglés.
Cuando sea posible, usa mecanismos de diseño flexibles en lugar del posicionamiento absoluto, los anchos fijos o los altos fijos. Para las aplicaciones de la Tienda Windows con JavaScript, usa mecanismos de diseño de hojas de estilo en cascada (CSS), como -ms-grid y –ms-box. Usa márgenes y relleno simétricos para permitir la localización de diversas direcciones de diseño.
Tu aplicación también puede usar el selector de seudoclase :-ms-lang() para ajustar las propiedades de CSS, como el ancho, en elementos concretos según el idioma de la aplicación. Para habilitarlo, el host de aplicaciones establece el atributo lang del elemento raíz en el idioma de la aplicación.
.item:-ms-lang(de, fi) { width: 350px; }
Algunos idiomas, como el árabe y el hebreo, requieren que el diseño de texto y el diseño de la aplicación tengan el orden de lectura de derecha a izquierda.
La dirección de diseño de cuerpo de las aplicaciones de la Tienda Windows con JavaScript que usan las hojas de estilo ui-light.css o ui-dark.css está establecida automáticamente según el idioma de la aplicación. Las CSS siguientes están establecidas en ui-light y ui-dark.css, y no es necesario que lo escribas.
body:-ms-lang(ar,he…) { direction: rtl;}
Esto significa que la mayoría de los diseños de aplicación se establecen correctamente cuando el sistema usa un idioma de derecha a izquierda.
Al igual que los controles WinJS.UI, tu aplicación puede usar el selector de seudoclase :-ms-lang() para ajustar las propiedades de CSS físicas, como margin y padding. No necesitas ajustar las propiedades de CSS lógicas que usan palabras clave como after y before.
No uses el atributo ni la propiedad align en HTML. En cambio, usa la propiedad direction para controlar la alineación de componentes particulares.
Usa la propiedad writing-mode para admitir diseños de texto vertical en CSS.
Creación de espejos de imágenes
Si tu aplicación tiene imágenes que deben reflejarse de derecha a izquierda, puedes usar transformaciones de CSS para reflejar tus imágenes al momento de la representación agregando una clase .mirrorable a tus elementos y agregando la siguiente clase CSS:
.mirrorable { transform: scaleX(-1); }
Si tu aplicación requiere de una imagen diferente para voltear la imagen correctamente, puedes usar el sistema de administración de recursos con el calificador layoutdir. El sistema elige una imagen llamada file.layoutdir-rtl.png cuando el idioma de la aplicación se establece en un idioma de derecha a izquierda. Este enfoque puede ser necesario cuando una parte de la imagen se voltea, pero otra no.
Fuentes
La fuente de las aplicaciones de la Tienda Windows con JavaScript que usan las hojas de estilo ui-light.css o ui-dark.css está establecida automáticamente en la fuente más apropiada según el idioma de la aplicación. El host de aplicaciones establece el atributo lang del elemento raíz en el idioma de la aplicación.
Las aplicaciones que muestran múltiples idiomas en una única página deben establecer el atributo lang para la sección en cada idioma. El selector de seudoclase :-ms-lang() elige la fuente correcta para cada sección de la página.
Usa las API de asignación de fuentes LanguageFont para acceder mediante programación al estilo, el peso, el tamaño y la familia de fuentes recomendados para un idioma en particular. El objeto LanguageFont proporciona acceso a la información de fuente correcta para diversas categorías de contenido, como encabezados de interfaz de usuario, notificaciones, cuerpo y fuentes de cuerpo de documento que los usuarios pueden editar.