Colocar texto em escalaText scaling

Imagem do Hero mostrando um exemplo de dimensionamento de texto de 100% a 225%.Hero image showing an example of text scaling from 100% to 225%.
Exemplo de dimensionamento de texto no Windows 10 (100% a 225%)Example of text scaling in Windows 10 (100% to 225%)

Visão geralOverview

A leitura de texto em uma tela de computador (do dispositivo móvel ao laptop para o monitor de área de trabalho na tela gigante de um Surface Hub) pode ser desafiadora para muitas pessoas.Reading text on a computer screen (from mobile device to laptop to desktop monitor to the giant screen of a Surface Hub) can be challenging for many people. Por outro lado, alguns usuários encontram os tamanhos de fonte usados em aplicativos e sites para serem maiores do que o necessário.Conversely, some users find the font sizes used in apps and web sites to be larger than necessary.

Para garantir que o texto seja o mais legível possível para a maior variedade de usuários, o Windows fornece a capacidade de os usuários alterarem o tamanho da fonte relativa no sistema operacional e nos aplicativos individuais.To ensure text is as legible as possible for the broadest range of users, Windows provides the ability for users to change relative font size across both the OS and individual applications. 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%.Instead of using a magnifier app (which typically just enlarges everything within an area of the screen and introduces its own usability issues), changing display resolution, or relying on DPI scaling (which resizes everything based on display and typical viewing distance), a user can quickly access a setting to resize just text, ranging from 100% (the default size) up to 225%.

SuporteSupport

Os aplicativos universais do Windows (Standard e PWA) oferecem suporte ao dimensionamento de texto por padrão.Universal Windows applications (both standard and PWA), support text scaling by default.

Se seu aplicativo do Windows inclui controles personalizados, superfícies de texto personalizadas, alturas de controle embutidas em código, estruturas mais antigas ou estruturas de terceiros, é provável que você precise fazer algumas atualizações para garantir uma experiência consistente e útil para os usuários.If your Windows application includes custom controls, custom text surfaces, hard-coded control heights, older frameworks, or 3rd party frameworks, you likely have to make some updates to ensure a consistent and useful experience for your users.

DirectWrite, GDI e XAML SwapChainPanels não dão suporte nativo ao dimensionamento de texto, enquanto o suporte a Win32 é limitado a menus, ícones e barras de ferramentas.DirectWrite, GDI, and XAML SwapChainPanels do not natively support text scaling, while Win32 support is limited to menus, icons, and toolbars.

Experiência do usuárioUser experience

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.Users can adjust text scale with the Make text bigger slider on the Settings -> Ease of Access -> Vision/Display screen.

Captura de tela da página de configurações de visão/exibição de facilidade de acesso mostrando o controle deslizante tornar texto maior.Screenshot of the Ease of Access Vision/Display settings page showing the Make text bigger slider.
Configuração de escala de texto de configurações-> facilidade de acesso-> visão/tela de exibiçãoText scale setting from Settings -> Ease of Access -> Vision/Display screen

Diretrizes de experiência do usuárioUX guidance

À medida que o texto é redimensionado, os controles e os contêineres também devem ser redimensionados e refluídos para acomodar o texto e seu novo layout.As text is resized, controls and containers must also resize and reflow to accommodate the text and its new layout. Conforme mencionado anteriormente, dependendo do aplicativo, da estrutura e da plataforma, grande parte desse trabalho é feito para você.As mentioned previously, depending on the app, framework, and platform, much of this work is done for you. As diretrizes de UX a seguir abordam os casos em que não é.The following UX guidance covers those cases where it's not.

Usar os controles de plataformaUse the platform controls

Já dissemos isso?Did we say this already? Vale a pena repetir: quando possível, sempre use os controles internos fornecidos com as várias estruturas de aplicativo do Windows para obter a experiência de usuário mais abrangente possível para a menor quantidade de esforço.It's worth repeating: When possible, always use the built-in controls provided with the various Windows app frameworks to get the most comprehensive user experience possible for the least amount of effort.

Por exemplo, todos os controles de texto UWP dão suporte à experiência de dimensionamento de texto completo sem qualquer personalização ou modelagem.For example, all UWP text controls support the full text scaling experience without any customization or templating.

Aqui está um trecho de um aplicativo UWP básico que inclui alguns controles de texto padrão:Here's a snippet from a basic UWP app that includes a couple of standard text controls:

<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>

Animação de escala de texto de 100% a 225%.Animation of text scaling 100% to 225%.
Dimensionamento de texto animadoAnimated text scaling

Usar o dimensionamento automáticoUse auto-sizing

Não especifique tamanhos absolutos para seus controles.Don't specify absolute sizes for your controls. Sempre que possível, permita que a plataforma redimensione os controles automaticamente com base nas configurações do usuário e do dispositivo.Whenever possible, let the platform resize your controls automatically based on user and device settings.

Neste trecho de código 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.In this snippet from the previous example, we use the Auto and * width values for a set of grid columns and let the platform adjust the app layout based on the size of the elements contained within the grid.

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

Usar quebra automática de textoUse text wrapping

Para garantir que o layout do seu aplicativo seja tão flexível e adaptável quanto possível, habilite a quebra de texto em qualquer controle que contenha texto (muitos controles não dão suporte ao encapsulamento de texto por padrão).To ensure the layout of your app is as flexible and adaptable as possible, enable text wrapping in any control that contains text (many controls do not support text wrapping by default).

Se você não especificar a quebra automática de texto, a plataforma usará outros métodos para ajustar o layout, incluindo recorte (Veja o exemplo anterior).If you don't specify text wrapping, the platform uses other methods to adjust the layout, including clipping (see previous example).

Aqui, usamos as AcceptsReturn Propriedades de TextWrapping TextBox e para garantir que o layout seja o mais flexível possível.Here, we use the AcceptsReturn and TextWrapping TextBox properties to ensure our layout is as flexible as possible.

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

Animação de escala de texto de 100% a 225% com quebra automática de texto.Animation of text scaling 100% to 225% with text wrapping.
Dimensionamento de texto animado com disposição de textoAnimated text scaling with text wrapping

Especificar o comportamento de corte de textoSpecify text trimming behavior

Se a quebra automática de texto não for o comportamento preferencial, a maioria dos controles de texto permitirá que você recorte o texto ou especifique reticências para o comportamento de corte de texto.If text wrapping is not the preferred behavior, most text controls let you either clip your text or specify ellipses for the text trimming behavior. O recorte é preferencial para reticências, pois as reticências ocupam o próprio espaço.Clipping is preferred to ellipses as ellipses take up space themselves.

Observação

Se você precisar recortar o texto, recorte o final da cadeia de caracteres, não o início.If you need to clip your text, clip the end of the string, not the beginning.

Neste exemplo, mostramos como recortar o texto em um TextBlock usando a propriedade Textaparation .In this example, we show how to clip text in a TextBlock using the TextTrimming property.

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

Captura de tela de dimensionamento de texto de 100% para 225% com recorte de texto.Screenshot of text scaling 100% to 225% with text clipping.
Dimensionamento de texto com recorte de textoText scaling with text clipping

Usar uma dica de ferramentaUse a tooltip

Se você cortar o texto, use uma dica de ferramenta para fornecer o texto completo aos seus usuários.If you clip text, use a tooltip to provide the full text to your users.

Aqui, adicionamos uma dica de ferramenta a um TextBlock que não dá suporte ao encapsulamento de texto:Here, we add a tooltip to a TextBlock that doesn't support text wrapping:

<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 fonteDon’t scale font-based icons or symbols

Ao usar ícones baseados em fonte para ênfase ou decoração, desabilite o dimensionamento nesses caracteres.When using font-based icons for emphasis or decoration, disable scaling on these characters.

Defina a propriedade IsTextScaleFactorEnabled como false para a maioria dos controles XAML.Set the IsTextScaleFactorEnabled property to false for most XAML controls.

Suporte ao dimensionamento de texto nativamenteSupport text scaling natively

Manipule o evento do sistema TextScaleFactorChanged UISettings na estrutura e nos controles personalizados.Handle the TextScaleFactorChanged UISettings system event in your custom framework and controls. Esse evento é gerado cada vez que o usuário define o fator de dimensionamento de texto em seu sistema.This event is raised each time the user sets the text scaling factor on their system.

ResumoSummary

Este tópico fornece uma visão geral do suporte ao dimensionamento de texto no Windows e inclui orientações de UX e desenvolvedor sobre como personalizar a experiência do usuário.This topic provides an overview of text scaling support in Windows and includes UX and developer guidance on how to customize the user experience.

Referência de APIAPI reference