Mise à l’échelle du texteText scaling

Image de héros présentant un exemple de mise à l’échelle du texte de 100% à 225%.Hero image showing an example of text scaling from 100% to 225%.
Exemple de mise à l’échelle du texte dans Windows 10 (100% à 225%)Example of text scaling in Windows 10 (100% to 225%)

Vue d’ensembleOverview

La lecture d’un texte sur un écran d’ordinateur (de l’appareil mobile à l’écran du moniteur de bureau à l’écran géant d’un Surface Hub) peut être difficile pour de nombreuses personnes.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. Inversement, certains utilisateurs recherchent les tailles de police utilisées dans les applications et les sites Web pour être plus volumineuses que nécessaire.Conversely, some users find the font sizes used in apps and web sites to be larger than necessary.

Pour garantir que le texte est le plus lisible possible pour le plus grand nombre d’utilisateurs, Windows offre aux utilisateurs la possibilité de modifier la taille de police relative sur le système d’exploitation et les applications individuelles.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. Au lieu d'utiliser une loupe (qui se contente généralement d'agrandir tout ce qui se trouve dans une zone de l'écran et introduit ses propres problèmes d'utilisation), de modifier la résolution d'affichage ou de se fier à la mise à l'échelle PPP (qui redimensionne tout en fonction de l'affichage et de la distance de visualisation standard), un utilisateur peut rapidement accéder à un paramètre permettant de redimensionner uniquement le texte, dans une fourchette comprise entre 100 % (taille par défaut) et 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%.

SupportSupport

Les applications Windows universelles (à la fois standard et PWA) prennent en charge par défaut la mise à l’échelle du texte.Universal Windows applications (both standard and PWA), support text scaling by default.

Si votre application Windows comprend des contrôles personnalisés, des surfaces de texte personnalisées, des hauteurs de contrôle codés en dur, des frameworks plus anciens ou des frameworks tiers, vous devrez probablement effectuer des mises à jour pour garantir une expérience cohérente et utile à vos utilisateurs.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 et XAML SwapChainPanels ne prennent pas en charge la mise à l’échelle du texte en mode natif, tandis que la prise en charge de Win32 est limitée aux menus, aux icônes et aux barres d’outils.DirectWrite, GDI, and XAML SwapChainPanels do not natively support text scaling, while Win32 support is limited to menus, icons, and toolbars.

Expérience utilisateurUser experience

Les utilisateurs peuvent ajuster la mise à l’échelle du texte à l’aide du curseur augmenter la taille du texte sur les paramètres-> faciliter l’accès-> écran visuel/affichage.Users can adjust text scale with the Make text bigger slider on the Settings -> Ease of Access -> Vision/Display screen.

Capture d’écran de la page Options d’ergonomie/paramètres d’affichage montrant le curseur agrandir le texte.Screenshot of the Ease of Access Vision/Display settings page showing the Make text bigger slider.
Paramètre de mise à l’échelle du texte à partir des paramètres-> facilité d’accès-> écran vision/affichageText scale setting from Settings -> Ease of Access -> Vision/Display screen

Recommandations en matière d’expérience utilisateurUX guidance

Au fur et à mesure que du texte est redimensionné, les contrôles et les conteneurs doivent également être redimensionnés et redistribués pour s’adapter au texte et à la nouvelle disposition.As text is resized, controls and containers must also resize and reflow to accommodate the text and its new layout. Comme mentionné précédemment, en fonction de l’application, de l’infrastructure et de la plateforme, une grande partie de ce travail est effectuée pour vous.As mentioned previously, depending on the app, framework, and platform, much of this work is done for you. L’aide de l’expérience utilisateur suivante couvre les cas où elle ne l’est pas.The following UX guidance covers those cases where it's not.

Utiliser les contrôles de plateformeUse the platform controls

Avons-nous déjà dit cela ?Did we say this already? Il convient de répéter : dans la mesure du possible, utilisez toujours les contrôles intégrés fournis avec les différentes infrastructures d’application Windows pour obtenir l’expérience utilisateur la plus complète possible pour un minimum d’effort.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.

Par exemple, tous les contrôles de texte UWP prennent en charge l’expérience de mise à l’échelle du texte complète sans personnalisation ni création de modèles.For example, all UWP text controls support the full text scaling experience without any customization or templating.

Voici un extrait de code d’une application UWP de base qui comprend deux contrôles de texte 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>

Animation de la mise à l’échelle du texte 100% à 225%.Animation of text scaling 100% to 225%.
Mise à l’échelle du texte animéAnimated text scaling

Utiliser le dimensionnement automatiqueUse auto-sizing

Ne spécifiez pas de tailles absolues pour vos contrôles.Don't specify absolute sizes for your controls. Dans la mesure du possible, laissez la plateforme redimensionner automatiquement vos contrôles en fonction des paramètres de l’utilisateur et de l’appareil.Whenever possible, let the platform resize your controls automatically based on user and device settings.

Dans cet extrait de code de l’exemple précédent, nous utilisons les Auto * valeurs et Width d’un ensemble de colonnes de grille et laissons la plateforme ajuster la disposition de l’application en fonction de la taille des éléments contenus dans la grille.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>

Utiliser l’habillage du texteUse text wrapping

Pour garantir que la disposition de votre application est aussi flexible et adaptable que possible, activez l’habillage du texte dans n’importe quel contrôle qui contient du texte (de nombreux contrôles ne prennent pas en charge l’habillage du texte par défaut).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).

Si vous ne spécifiez pas l’habillage du texte, la plateforme utilise d’autres méthodes pour ajuster la disposition, y compris le découpage (Voir l’exemple précédent).If you don't specify text wrapping, the platform uses other methods to adjust the layout, including clipping (see previous example).

Ici, nous utilisons les AcceptsReturn TextWrapping Propriétés de zone de texte et pour nous assurer que notre disposition est la plus flexible possible.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" />

Animation de la mise à l’échelle du texte 100% à 225% avec habillage du texte.Animation of text scaling 100% to 225% with text wrapping.
Mise à l’échelle du texte animé avec habillage du texteAnimated text scaling with text wrapping

Spécifier le comportement de suppression de texteSpecify text trimming behavior

Si l’habillage du texte n’est pas le comportement par défaut, la plupart des contrôles de texte vous permettent d’ajuster votre texte ou de spécifier des ellipses pour le comportement de suppression de texte.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. Le découpage est préférable aux ellipses, car les ellipses occupent de l’espace.Clipping is preferred to ellipses as ellipses take up space themselves.

Notes

Si vous devez découper votre texte, découpez la fin de la chaîne, pas le début.If you need to clip your text, clip the end of the string, not the beginning.

Dans cet exemple, nous montrons comment découper du texte dans un TextBlock à l’aide de la propriété 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>

Capture d’écran de la mise à l’échelle du texte 100% à 225% avec découpage de texte.Screenshot of text scaling 100% to 225% with text clipping.
Mise à l’échelle du texte avec le découpage de texteText scaling with text clipping

Utiliser une info-bulleUse a tooltip

Si vous découpez du texte, utilisez une info-bulle pour fournir le texte complet à vos utilisateurs.If you clip text, use a tooltip to provide the full text to your users.

Ici, nous ajoutons une info-bulle à un TextBlock qui ne prend pas en charge l’habillage du texte :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>

Ne pas mettre à l’échelle les symboles ou les icônes basés sur des policesDon’t scale font-based icons or symbols

Lorsque vous utilisez des icônes de police pour l’accentuation ou la décoration, désactivez la mise à l’échelle sur ces caractères.When using font-based icons for emphasis or decoration, disable scaling on these characters.

Affectez à la propriété IsTextScaleFactorEnabled la valeur false pour la plupart des contrôles XAML.Set the IsTextScaleFactorEnabled property to false for most XAML controls.

Prendre en charge la mise à l’échelle du texte en mode natifSupport text scaling natively

Gérez l’événement système TextScaleFactorChanged uisettings dans votre infrastructure et vos contrôles personnalisés.Handle the TextScaleFactorChanged UISettings system event in your custom framework and controls. Cet événement est déclenché chaque fois que l’utilisateur définit le facteur d’échelle du texte sur son système.This event is raised each time the user sets the text scaling factor on their system.

RésuméSummary

Cette rubrique fournit une vue d’ensemble de la prise en charge de la mise à l’échelle du texte dans Windows et inclut l’expérience utilisateur et l’aide pour les développeurs sur la personnalisation de l’expérience utilisateur.This topic provides an overview of text scaling support in Windows and includes UX and developer guidance on how to customize the user experience.

Informations de référence sur l'APIAPI reference