Ajuste de escala de textoText scaling

Imagen de Hero que muestra un ejemplo de escalado de texto de 100% a 225%.Hero image showing an example of text scaling from 100% to 225%.
Ejemplo de escalado de texto en Windows 10 (100% a 225%)Example of text scaling in Windows 10 (100% to 225%)

Información generalOverview

La lectura de texto en la pantalla de un equipo (desde el dispositivo móvil hasta el monitor de escritorio hasta la pantalla de Giant de un Surface Hub) puede resultar desafiante para muchas personas.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 el contrario, algunos usuarios encuentran los tamaños de fuente que se usan en aplicaciones y sitios web para ser más grandes de lo necesario.Conversely, some users find the font sizes used in apps and web sites to be larger than necessary.

Para asegurarse de que el texto sea lo más legible posible para la gama más amplia de usuarios, Windows proporciona la posibilidad de que los usuarios cambien el tamaño de fuente relativo en el sistema operativo y en las aplicaciones individuales.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. En lugar de usar una aplicación de lupa (que normalmente solo aumenta el tamaño de todo el contenido dentro de un área de la pantalla y tiene sus propios problemas de facilidad de uso), cambiar la resolución de pantalla o confiar en el ajuste de PPP (que cambia el tamaño de todo el contenido según la pantalla y la distancia típica de visualización), un usuario puede acceder rápidamente a un ajuste para cambiar el tamaño del texto solamente, que varía entre 100 % (tamaño predeterminado) y 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%.

CompatibilidadSupport

Las aplicaciones universales de Windows (estándar y PWA) admiten el escalado de texto de forma predeterminada.Universal Windows applications (both standard and PWA), support text scaling by default.

Si la aplicación Windows incluye controles personalizados, superficies de texto personalizado, altos de control codificados de forma rígida, marcos anteriores o marcos de terceros, es probable que tenga que realizar algunas actualizaciones para garantizar una experiencia coherente y útil para los usuarios.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 y XAML SwapChainPanels no admiten de forma nativa el escalado de texto, mientras que la compatibilidad con Win32 se limita a menús, iconos y barras de herramientas.DirectWrite, GDI, and XAML SwapChainPanels do not natively support text scaling, while Win32 support is limited to menus, icons, and toolbars.

Experiencia del usuarioUser experience

Los usuarios pueden ajustar la escala de texto con el control deslizante convertir texto en más grande en la pantalla Configuración-> facilidad de acceso > visión/visualización.Users can adjust text scale with the Make text bigger slider on the Settings -> Ease of Access -> Vision/Display screen.

Captura de pantalla de la página de configuración de la visión o visualización de accesibilidad que muestra el control deslizante hacer el texto más grande.Screenshot of the Ease of Access Vision/Display settings page showing the Make text bigger slider.
Configuración de la escala de texto en la pantalla de configuración-> facilidad de acceso > visión y visualizaciónText scale setting from Settings -> Ease of Access -> Vision/Display screen

Directrices sobre la experiencia de usuarioUX guidance

A medida que se cambia el tamaño del texto, los controles y contenedores también deben cambiar el tamaño y el flujo para alojar el texto y su nuevo diseño.As text is resized, controls and containers must also resize and reflow to accommodate the text and its new layout. Como se mencionó anteriormente, en función de la aplicación, el marco de trabajo y la plataforma, gran parte de este trabajo se realiza automáticamente.As mentioned previously, depending on the app, framework, and platform, much of this work is done for you. En las siguientes instrucciones de la experiencia del usuario se tratan los casos en los que no lo es.The following UX guidance covers those cases where it's not.

Usar los controles de plataformaUse the platform controls

¿Ya dijimos esto?Did we say this already? Merece la pena repetirse: cuando sea posible, use siempre los controles integrados que se proporcionan con los distintos marcos de trabajo de aplicaciones de Windows para obtener la experiencia de usuario más completa posible por la menor cantidad de esfuerzo.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 ejemplo, todos los controles de texto UWP admiten la experiencia de escalado de texto completo sin ninguna personalización o plantilla.For example, all UWP text controls support the full text scaling experience without any customization or templating.

Este es un fragmento de código de una aplicación de UWP básica que incluye un par de controles de texto estándar: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>

Animación de la escala del texto del 100% al 225%.Animation of text scaling 100% to 225%.
Escalado de texto animadoAnimated text scaling

Usar el ajuste automático de tamañoUse auto-sizing

No especifique tamaños absolutos para los controles.Don't specify absolute sizes for your controls. Siempre que sea posible, permita a la plataforma cambiar el tamaño de los controles automáticamente según la configuración del usuario y del dispositivo.Whenever possible, let the platform resize your controls automatically based on user and device settings.

En este fragmento de código del ejemplo anterior, usamos los Auto * valores de ancho y para un conjunto de columnas de la cuadrícula y permiten que la plataforma ajuste el diseño de la aplicación en función del tamaño de los elementos contenidos en la cuadrícula.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 ajuste de textoUse text wrapping

Para asegurarse de que el diseño de la aplicación sea lo más flexible y adaptable posible, habilite el ajuste de texto en cualquier control que contenga texto (muchos controles no admiten el ajuste de texto de forma predeterminada).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 no especifica el ajuste de texto, la plataforma usa otros métodos para ajustar el diseño, incluido el recorte (vea el ejemplo anterior).If you don't specify text wrapping, the platform uses other methods to adjust the layout, including clipping (see previous example).

Aquí, usamos las AcceptsReturn propiedades del TextWrapping cuadro de texto y para asegurarnos de que el diseño sea lo más flexible posible.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" />

Animación de la escala del texto 100% a 225% con ajuste de texto.Animation of text scaling 100% to 225% with text wrapping.
Escalado de texto animado con ajuste de textoAnimated text scaling with text wrapping

Especificar el comportamiento de recorte de textoSpecify text trimming behavior

Si el ajuste de texto no es el comportamiento preferido, la mayoría de los controles de texto permiten recortar el texto o especificar puntos suspensivos para el comportamiento de recorte 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. El recorte es preferible a los puntos suspensivos a medida que los puntos suspensivos ocupan espacio.Clipping is preferred to ellipses as ellipses take up space themselves.

Nota

Si necesita recortar el texto, recorte el final de la cadena, no el principio.If you need to clip your text, clip the end of the string, not the beginning.

En este ejemplo, se muestra cómo recortar el texto en un TextBlock mediante la propiedad 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>

Captura de pantalla de la escala del texto 100% a 225% con el recorte de texto.Screenshot of text scaling 100% to 225% with text clipping.
Ajuste de escala de texto con recorte de textoText scaling with text clipping

Usar una información sobre herramientasUse a tooltip

Si recorta el texto, use una información sobre herramientas para proporcionar el texto completo a los usuarios.If you clip text, use a tooltip to provide the full text to your users.

Aquí, agregamos una información sobre herramientas a un TextBlock que no admite el ajuste 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>

No escale iconos ni símbolos basados en fuentesDon’t scale font-based icons or symbols

Al usar iconos basados en fuentes para énfasis o decoración, deshabilite el escalado de estos caracteres.When using font-based icons for emphasis or decoration, disable scaling on these characters.

Establezca la propiedad IsTextScaleFactorEnabled en false para la mayoría de los controles XAML.Set the IsTextScaleFactorEnabled property to false for most XAML controls.

Compatibilidad de escala de texto de forma nativaSupport text scaling natively

Controle el evento del sistema TextScaleFactorChanged UISettings en el marco de trabajo y los controles personalizados.Handle the TextScaleFactorChanged UISettings system event in your custom framework and controls. Este evento se desencadena cada vez que el usuario establece el factor de escala de texto en su sistema.This event is raised each time the user sets the text scaling factor on their system.

ResumenSummary

En este tema se proporciona información general sobre la compatibilidad con el escalado de texto en Windows e incluye experiencia del desarrollador y experiencia del usuario sobre cómo personalizar la experiencia del usuario.This topic provides an overview of text scaling support in Windows and includes UX and developer guidance on how to customize the user experience.

Referencia de APIAPI reference