Colocar texto em escala

Exemplo de dimensionamento de texto em Windows 11 (100% a 225%)

Visão geral

Ler texto em uma tela do computador (do dispositivo móvel ao laptop para o monitor da área de trabalho até a tela gigante de um Surface Hub) pode ser um desafio para muitas pessoas. Por outro lado, alguns usuários acham que os tamanhos de fonte usados em aplicativos e sites são maiores do que o necessário.

Para garantir que o texto seja o mais legível possível para a gama mais ampla de usuários, o Windows fornece a capacidade para que os usuários alterem o tamanho relativo da fonte no sistema operacional e em aplicativos individuais. Em vez de usar um aplicativo de lupa (que normalmente amplia tudo dentro de uma área da tela e apresenta seus próprios problemas de usabilidade), alterar a resolução de vídeo ou depender do ajuste de DPI (que redimensiona tudo com base na exibição e na distância de exibição comum), um usuário pode acessar rapidamente uma configuração para redimensionar somente o texto, de 100% (o tamanho padrão) até 225%.

Suporte

Aplicativos universais do Windows (padrão e PWA), dão suporte à escala de texto por padrão.

Se o aplicativo do Windows incluir controles personalizados, superfícies de texto personalizadas, alturas de controle embutidos em código, estruturas mais antigas ou estruturas de terceiros, você provavelmente precisará fazer algumas atualizações para garantir uma experiência consistente e útil para seus usuários.

DirectWrite, GDI e XAML SwapChainPanels não dão suporte nativo ao dimensionamento de texto, enquanto o suporte ao Win32 é limitado a menus, ícones e barras de ferramentas.

Experiência do usuário

Os usuários podem ajustar a escala de texto com o controle deslizante Tornar o texto maior na tela Configurações –> Facilidade de Acesso –> Visão/Exibição.

Configuração de escala de texto de Configurações –> Facilidade de Acesso –> Tela de Visão/Exibição

Diretrizes de experiência do usuário

À medida que o texto é redimensionado, os controles e os contêineres também devem redimensionar e refluxar para acomodar o texto e seu novo layout. Conforme mencionado anteriormente, dependendo do aplicativo, da estrutura e da plataforma, grande parte desse trabalho é feito para você. As diretrizes de UX a seguir abordam os casos em que não está.

Usar os controles de plataforma

Já dissemos isso? Vale a pena repetir: quando possível, sempre use os controles internos fornecidos com as várias estruturas de aplicativos do Windows para obter a experiência de usuário mais abrangente possível para a menor quantidade de esforço.

Por exemplo, todos os controles de texto UWP dão suporte à experiência de dimensionamento de texto completo sem nenhuma personalização ou modelagem.

Aqui está um snippet de código de um aplicativo UWP básico que inclui alguns controles de texto padrão:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test" 
                HorizontalTextAlignment="Center" />
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
        <StackPanel Grid.Column="1" 
                    HorizontalAlignment="Center">
            <TextBlock TextWrapping="WrapWholeWords">
                The quick brown fox jumped over the lazy dog.
            </TextBlock>
            <TextBox PlaceholderText="Type something here" />
        </StackPanel>
        <Image Grid.Column="2" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
    </Grid>
    <TextBlock Grid.Row="2" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test footer" 
                HorizontalTextAlignment="Center" />
</Grid>

Dimensionamento de texto animado

Usar o dimensionamento automático

Não especifique tamanhos absolutos para seus controles. Sempre que possível, permita que a plataforma redimensione seus controles automaticamente com base nas configurações do usuário e do dispositivo.

Neste snippet do exemplo anterior, usamos os Auto valores de largura e * para um conjunto de colunas de grade e permitimos que a plataforma ajuste o layout do aplicativo com base no tamanho dos elementos contidos na grade.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

Usar disposição de texto

Para garantir que o layout do aplicativo seja o mais flexível e adaptável possível, habilite o encapsulamento de texto em qualquer controle que contenha texto (muitos controles não dão suporte ao encapsulamento de texto por padrão).

Se você não especificar o encapsulamento de texto, a plataforma usará outros métodos para ajustar o layout, incluindo recorte (consulte o exemplo anterior).

Aqui, usamos as AcceptsReturn propriedades e TextWrapping TextBox para garantir que nosso layout seja o mais flexível possível.

<TextBox PlaceholderText="Type something here" 
          AcceptsReturn="True" TextWrapping="Wrap" />

Dimensionamento de texto animado com disposição de texto

Especificar o comportamento de corte de texto

Se o encapsulamento de texto não for o comportamento preferencial, a maioria dos controles de texto permitirá que você corte o texto ou especifique reticências para o comportamento de corte de texto. O recorte é preferencial para reticências à medida que as reticências ocuparem espaço por conta própria.

Observação

Se você precisar cortar o texto, recorte o final da cadeia de caracteres, não o início.

Neste exemplo, mostramos como cortar texto em um TextBlock usando a propriedade TextTrimming .

<TextBlock TextTrimming="Clip">
    The quick brown fox jumped over the lazy dog.
</TextBlock>

Dimensionamento de texto com recorte de texto

Usar uma dica de ferramenta

Se você cortar texto, use uma dica de ferramenta para fornecer o texto completo aos usuários.

Aqui, adicionamos uma dica de ferramenta a um TextBlock que não dá suporte ao encapsulamento de texto:

<TextBlock TextTrimming="Clip">
    <ToolTipService.ToolTip>
        <ToolTip Content="The quick brown fox jumped over the lazy dog."/>
    </ToolTipService.ToolTip>
    The quick brown fox jumped over the lazy dog.
</TextBlock>

Não dimensionar ícones ou símbolos baseados em fonte

Ao usar ícones baseados em fonte para ênfase ou decoração, desabilite o dimensionamento nesses caracteres.

Defina a propriedade IsTextScaleFactorEnabled como para a false maioria dos controles XAML.

Suporte ao dimensionamento de texto nativamente

Manipule o evento do sistema TextScaleFactorChanged UISettings em sua estrutura e controles personalizados. Esse evento é gerado sempre que o usuário define o fator de dimensionamento de texto em seu sistema.

Resumo

Este tópico fornece uma visão geral do suporte ao dimensionamento de texto no Windows e inclui orientações de desenvolvedor e experiência do usuário sobre como personalizar a experiência do usuário.

Artigos relacionados

Referência de API

• IsTextScaleFactorEnabled
• TextScaleFactorChanged