Dimensionamento de texto

Exemplo de escalonamento de texto no Windows 11 (100% a 225%)

Visão geral

Ler texto num ecrã de computador (desde dispositivo móvel a portátil, monitor de secretária até ao ecrã gigante de um Surface Hub) pode ser um desafio para muitas pessoas. Por outro lado, alguns utilizadores consideram que os tamanhos de fonte usados em aplicações e sites são maiores do que o necessário.

Para garantir que o texto seja o mais legível possível para o maior número possível de utilizadores, o Windows oferece a capacidade de alterar o tamanho relativo da fonte tanto no sistema operativo como nas aplicações individuais. Em vez de usar uma aplicação de lupa (que normalmente apenas amplia tudo numa área do ecrã e introduz os seus próprios problemas de usabilidade), alterar a resolução do ecrã ou confiar na escala DPI (que redimensiona tudo com base no ecrã e na distância típica de visualização), o utilizador pode aceder rapidamente a uma configuração para redimensionar apenas texto, variando de 100% (o tamanho padrão) até 225%.

Support

As aplicações universais do Windows (tanto padrão como PWA) suportam escalonamento de texto por padrão.

Se a sua aplicação Windows incluir controlos personalizados, superfícies de texto personalizadas, alturas de controlo codificadas fixamente, frameworks antigos ou frameworks de terceiros, provavelmente terá de fazer algumas atualizações para garantir uma experiência consistente e útil para os seus utilizadores.

O DirectWrite, GDI e XAML SwapChainPanels não suportam escalonamento de texto de forma nativa, enquanto o suporte ao Win32 está limitado a menus, ícones e barras de ferramentas.

Experiência de utilizador

Os utilizadores podem ajustar a escala do texto com o botão Tornar o texto maior no ecrã Definições -> Facilidade de Acesso -> Visão/Exibição.

Definição de escala de texto a partir de Definições -> Facilidade de Acesso -> Ecrã de Visão/Exibição

Orientação de UX

À medida que o texto é redimensionado, os controlos e contentores também têm de ser redimensionados e ajustados para acomodar o texto e o seu novo layout. Como mencionado anteriormente, dependendo da aplicação, framework e plataforma, grande parte deste trabalho é feita por si. As seguintes orientações de UX abrangem os casos em que não se aplicam.

Usar os controlos da plataforma

Já dissemos isto? Vale a pena repetir: sempre que possível, utilize sempre os controlos incorporados com os vários frameworks de aplicações Windows para obter a experiência de utilizador mais abrangente possível com o mínimo esforço.

Por exemplo, todos os controlos de texto UWP suportam a experiência de escalonamento de texto completo sem qualquer personalização ou modelagem.

Aqui está um excerto de uma aplicação UWP básica que inclui alguns controlos 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>

Escalonamento de texto animado

Use o autodimensionamento

Não especifiques tamanhos absolutos para os teus controlos. Sempre que possível, deixe a plataforma redimensionar automaticamente os seus controlos com base nas definições do utilizador e do dispositivo.

Neste excerto do exemplo anterior, usamos os valores de largura Auto e * para um conjunto de colunas da grelha e permitimos que a plataforma ajuste o layout da aplicação com base no tamanho dos elementos contidos na grelha.

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

Usar enrolamento de texto

Para garantir que o layout da sua aplicação é o mais flexível e adaptável possível, ative o enrolamento de texto em qualquer controlo que contenha texto (muitos controlos não suportam envolvimento de texto por defeito).

Se não especificar o enrolamento de texto, a plataforma utiliza outros métodos para ajustar o layout, incluindo o clipping (ver exemplo anterior).

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

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

Escalonamento animado de texto com envolvimento de texto

Especificar o comportamento de corte de texto

Se o enrolamento de texto não for o comportamento preferido, a maioria dos controlos de texto permite ou recortar o texto ou especificar elipses para o comportamento de corte de texto. O recorte é preferido às elipses, pois as elipses ocupam espaço.

Observação

Se precisares de cortar o texto, corta o fim da sequência, não o início.

Neste exemplo, mostramos como recortar texto num TextBlock usando a propriedade TextTrimming .

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

Escalonamento de texto com recorte de texto

Use uma dica de ferramenta

Se recortar texto, utilize uma dica de ferramenta para fornecer aos utilizadores o texto completo.

Aqui, adicionamos uma dica de ferramenta a um TextBlock que não suporta enrolamento 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 escale ícones ou símbolos baseados em fontes

Ao usar ícones baseados em fontes para ênfase ou decoração, desative a escala nestes caracteres.

Defina a propriedade IsTextScaleFactorEnabled para false na maioria dos controlos XAML.

Suporta escalabilidade de texto de forma nativa

Gere o evento do sistema TextScaleFactorChanged UISettings no teu framework e controlos personalizados. Este evento é ativado cada vez que o utilizador define o fator de escala do texto no seu sistema.

Resumo

Este tópico oferece uma visão geral do suporte para escalonamento de texto no Windows e inclui orientações de UX e programadores sobre como personalizar a experiência do utilizador.

Artigos relacionados

Referência da API

• IsTextScaleFactorEnabled
• FatorDeEscalaDeTextoAlterado