Como ajustar o layout e as fontes para vários idiomas e dar suporte a layouts da direita para a esquerda (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]
Dê suporte a layouts e fontes localizados em seus aplicativos da Windows Store seguindo algumas diretrizes simples.
Tecnologias
Instruções
Diretrizes de layout
Alguns idiomas, como alemão e finlandês, exigem mais espaço de texto do que o inglês.
Quando possível, use mecanismos de layout flexíveis em vez de posicionamento absoluto, larguras fixas ou alturas fixas. Para os aplicativos da Windows Store em JavaScript, use os mecanismos de layout CSS, como -ms-grid e -ms-box. Use preenchimento e margens simétricos para permitir a localização para várias direções de layout.
Seu aplicativo também pode usar o seletor de pseudoclasse :-ms-lang() para ajustar propriedades CSS como a largura em determinados elementos com base no idioma do aplicativo. Para ativar esse recurso, o Host de Aplicativo define o atributo lang do elemento raiz para o idioma do aplicativo.
.item:-ms-lang(de, fi) { width: 350px; }
Alguns idiomas, como o árabe e o hebraico, exigem que o layout do texto e o layout do aplicativo tenham a ordem de leitura da direita para a esquerda.
Os aplicativos da Windows Store em JavaScript e que usam as folhas estilo ui-light.css ou ui-dark.css têm a direção do layout do corpo definida automaticamente, com base no idioma do aplicativo. O CSS seguinte está em ui-light e ui-dark.css, e você não precisa escrevê-lo.
body:-ms-lang(ar,he…) { direction: rtl;}
Isso significa que a maioria dos layouts de aplicativo serão definidos corretamente quando o sistema usar um idioma da direita para a esquerda.
Como os controles WinJS.UI, seu aplicativo pode usar o pseudo seletor de classe :-ms-lang() para ajustar as propriedades físicas de CSS, como margin e padding. Você não precisa ajustar as propriedades lógicas de CSS que usam palavras-chave como after e before.
Não use a propriedade ou atributo align em HTML. Em vez disso, use a propriedade direction para controlar o alinhamento de componentes específicos.
Use a propriedade writing-mode para permitir layouts de texto vertical no CSS.
Espelhando imagens
Se o seu aplicativo tiver imagens que devem ser espelhadas da direita para a esquerda, você pode usar as transformações do CSS para espelhar suas imagens no momento da renderização adicionando uma classe .mirrorable aos seus elementos e adicionando a seguinte classe de CSS:
.mirrorable { transform: scaleX(-1); }
Se o seu aplicativo requer uma imagem diferente para inverter a imagem corretamente, você pode usar o sistema de gerenciamento de recursos com o qualificador layoutdir. O sistema escolhe uma imagem chamada file.layoutdir-rtl.png quando o idioma do aplicativo é definido como um idioma da direita para a esquerda. Essa abordagem pode ser necessária quando uma parte da imagem é invertida, mas outra parte não é.
Fontes
Os aplicativos da Windows Store em JavaScript e que usam ui-light.css ou as folhas estilo ui-dark.css têm a direção do layout do corpo definida automaticamente, com base no idioma do aplicativo. O host de aplicativo define o atributo lang dos elementos da raiz para o idioma do aplicativo.
Os aplicativos que exibem vários idiomas em uma única página devem definir o atributo lang para a seção em cada idioma. O pseudo seletor de classe :-ms-lang() seleciona a fonte correta para cada seção da página.
Use as APIs de mapeamento de fonte LanguageFont para acesso via programação à família de fontes, tamanho, peso e estilo recomendados para um idioma específico. O objeto LanguageFont oferece acesso às informações corretas de fonte para várias categorias de conteúdo, incluindo cabeçalhos de interface do usuário, notificações, texto do corpo e fontes de corpo de documento editável pelo usuário.