Ridimensionamento del testoText scaling

Immagine Hero che mostra un esempio di ridimensionamento del testo da 100% a 225%.Hero image showing an example of text scaling from 100% to 225%.
Esempio di ridimensionamento del testo in Windows 10 (100% a 225%)Example of text scaling in Windows 10 (100% to 225%)

PanoramicaOverview

La lettura di testo sullo schermo di un computer (dal dispositivo mobile al computer portatile a monitor desktop fino alla schermata gigante di una Surface Hub) può risultare complessa per molti utenti.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. Viceversa, alcuni utenti trovano le dimensioni del carattere utilizzate nelle app e nei siti Web per essere più grandi del necessario.Conversely, some users find the font sizes used in apps and web sites to be larger than necessary.

Per garantire che il testo sia più leggibile possibile per la più ampia gamma di utenti, Windows consente agli utenti di modificare le dimensioni del carattere relative sia per il sistema operativo sia per le singole applicazioni.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. Invece di usare un'app di lente di ingrandimento (che in genere ingrandisce tutti gli elementi all'interno di un'area dello schermo e introduce specifici problemi di usabilità), modificare la risoluzione del display o basarsi sul ridimensionamento DPI (che ridimensiona tutti gli elementi in base al display e alla distanza di visualizzazione tipica), un utente può accedere rapidamente a un'impostazione per ridimensionare solo il testo, dal 100% (dimensione predefinita) fino al 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%.

SupportoSupport

Per impostazione predefinita, le applicazioni Windows universali (sia standard che PWA) supportano il ridimensionamento del testo.Universal Windows applications (both standard and PWA), support text scaling by default.

Se l'applicazione Windows include controlli personalizzati, superfici di testo personalizzate, altezze di controllo hardcoded, Framework precedenti o Framework di terze parti, è probabile che sia necessario apportare alcuni aggiornamenti per garantire un'esperienza coerente e utile per gli utenti.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 SwapChainPanels XAML non supportano in modo nativo il ridimensionamento del testo, mentre il supporto Win32 è limitato a menu, icone e barre degli strumenti.DirectWrite, GDI, and XAML SwapChainPanels do not natively support text scaling, while Win32 support is limited to menus, icons, and toolbars.

Esperienza utenteUser experience

Gli utenti possono modificare la scala del testo con il dispositivo di scorrimento testo più grande nella finestra Impostazioni-> semplicità di accesso-> visione/visualizzazione.Users can adjust text scale with the Make text bigger slider on the Settings -> Ease of Access -> Vision/Display screen.

Screenshot della pagina delle impostazioni di visualizzazione e visualizzazione della semplicità di accesso che mostra il dispositivo di scorrimento Crea testo più grande.Screenshot of the Ease of Access Vision/Display settings page showing the Make text bigger slider.
Impostazione della scalabilità del testo da impostazioni-> semplicità di accesso-> visione/visualizzazione dello schermoText scale setting from Settings -> Ease of Access -> Vision/Display screen

Linee guida per l'esperienza utenteUX guidance

Quando il testo viene ridimensionato, i controlli e i contenitori devono anche essere ridimensionati e riflussi per adattarsi al testo e al nuovo layout.As text is resized, controls and containers must also resize and reflow to accommodate the text and its new layout. Come indicato in precedenza, a seconda dell'app, del Framework e della piattaforma, la maggior parte di queste operazioni viene eseguita per l'utente.As mentioned previously, depending on the app, framework, and platform, much of this work is done for you. Le seguenti indicazioni sull'esperienza utente riguardano i casi in cui non lo è.The following UX guidance covers those cases where it's not.

Usare i controlli della piattaformaUse the platform controls

Questo è già stato detto?Did we say this already? Vale la pena ripetere: quando possibile, usare sempre i controlli incorporati forniti con i diversi framework di app di Windows per ottenere l'esperienza utente più completa possibile per il minor numero di sforzi.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.

Ad esempio, tutti i controlli di testo UWP supportano l'esperienza di ridimensionamento full-text senza alcuna personalizzazione o modello.For example, all UWP text controls support the full text scaling experience without any customization or templating.

Ecco un frammento di codice di un'app UWP di base che include un paio di controlli di testo standard: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>

Animazione del ridimensionamento del testo 100% a 225%.Animation of text scaling 100% to 225%.
Ridimensionamento del testo animatoAnimated text scaling

USA dimensionamento automaticoUse auto-sizing

Non specificare dimensioni assolute per i controlli.Don't specify absolute sizes for your controls. Quando possibile, consentire alla piattaforma di ridimensionare automaticamente i controlli in base alle impostazioni di utenti e dispositivi.Whenever possible, let the platform resize your controls automatically based on user and device settings.

In questo frammento di codice dell'esempio precedente si usano Auto i * valori di larghezza e per un set di colonne della griglia e si lascia che la piattaforma modifichi il layout dell'app in base alle dimensioni degli elementi contenuti nella griglia.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>

USA ritorno a capo testoUse text wrapping

Per garantire che il layout dell'app sia flessibile e adattabile possibile, abilitare il ritorno a capo del testo in qualsiasi controllo che contiene testo (molti controlli non supportano il wrapping del testo per impostazione predefinita).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 non si specifica il ritorno a capo del testo, la piattaforma usa altri metodi per modificare il layout, incluso il ritaglio (vedere l'esempio precedente).If you don't specify text wrapping, the platform uses other methods to adjust the layout, including clipping (see previous example).

In questo caso vengono usate AcceptsReturn le TextWrapping proprietà e della casella di testo per assicurarsi che il layout sia il più flessibile possibile.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" />

Animazione del ridimensionamento del testo 100% a 225% con ritorno a capo del testo.Animation of text scaling 100% to 225% with text wrapping.
Ridimensionamento del testo animato con ritorno a capo del testoAnimated text scaling with text wrapping

Specifica il comportamento di taglio del testoSpecify text trimming behavior

Se il ritorno a capo del testo non è il comportamento preferito, la maggior parte dei controlli di testo consente di ritagliare il testo o specificare ellissi per il comportamento di taglio del testo.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. Il ritaglio è preferibile ai puntini di sospensione quando i puntini di sospensione prendono spazio.Clipping is preferred to ellipses as ellipses take up space themselves.

Nota

Se è necessario ritagliare il testo, ritagliare la fine della stringa, non l'inizio.If you need to clip your text, clip the end of the string, not the beginning.

In questo esempio viene illustrato come ritagliare il testo in un TextBlock usando la proprietà TextTrimming .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>

Screenshot del testo ridimensionato da 100% a 225% con il ritaglio del testo.Screenshot of text scaling 100% to 225% with text clipping.
Ridimensionamento del testo con ritaglio del testoText scaling with text clipping

Usare una descrizione comandoUse a tooltip

Se si ritaglia il testo, usare una descrizione comando per fornire il testo completo agli utenti.If you clip text, use a tooltip to provide the full text to your users.

Qui viene aggiunta una descrizione comando a un TextBlock che non supporta il ritorno a capo del testo: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>

Non ridimensionare icone o simboli basati su caratteriDon’t scale font-based icons or symbols

Quando si usano icone basate su tipi di carattere per l'enfasi o l'effetto, disabilitare il ridimensionamento su questi caratteri.When using font-based icons for emphasis or decoration, disable scaling on these characters.

Impostare la proprietà IsTextScaleFactorEnabled su false per la maggior parte dei controlli XAML.Set the IsTextScaleFactorEnabled property to false for most XAML controls.

Supportare il ridimensionamento del testo in modo nativoSupport text scaling natively

Gestire l'evento di sistema TextScaleFactorChanged uisettings nel Framework e nei controlli personalizzati.Handle the TextScaleFactorChanged UISettings system event in your custom framework and controls. Questo evento viene generato ogni volta che l'utente imposta il fattore di scala del testo nel sistema.This event is raised each time the user sets the text scaling factor on their system.

SummarySummary

Questo argomento fornisce una panoramica del supporto per il ridimensionamento del testo in Windows e include indicazioni su come personalizzare l'esperienza utente.This topic provides an overview of text scaling support in Windows and includes UX and developer guidance on how to customize the user experience.

Informazioni di riferimento sulle APIAPI reference