Ajuste de escala de texto

Ejemplo de escalado de texto en Windows 11 (100 % a 225 %)

Información general

Leer texto en una pantalla de equipo (desde un dispositivo móvil a un portátil hasta un monitor de escritorio a la pantalla gigante de un Surface Hub) puede ser difícil para muchas personas. Por el contrario, algunos usuarios encuentran los tamaños de fuente usados en aplicaciones y sitios web para que sean mayores de lo necesario.

Para garantizar que el texto sea lo más legible posible para la gama más amplia de usuarios, Windows ofrece la posibilidad de que los usuarios cambien el tamaño de fuente relativo tanto en el sistema operativo como en las aplicaciones individuales. 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 %.

Soporte técnico

Las aplicaciones universales de Windows (tanto estándar como PWA), admiten el escalado de texto de forma predeterminada.

Si la aplicación Windows incluye controles personalizados, superficies de texto personalizadas, alturas de control codificadas de forma rígida, marcos antiguos o marcos de terceros, es probable que tenga que realizar algunas actualizaciones para garantizar una experiencia coherente y útil para los usuarios.

DirectWrite, GDI y XAML SwapChainPanels no admiten de forma nativa el escalado de texto, mientras que la compatibilidad con Win32 está limitada a menús, iconos y barras de herramientas.

Experiencia del usuario

Los usuarios pueden ajustar la escala de texto con el control deslizante Hacer texto más grande en la pantalla Configuración -> Facilidad de acceso -> Visión/Pantalla.

Configuración de escalado de texto de Configuración-> Facilidad de acceso -> Pantalla de visión/visualización

Directrices sobre la experiencia de usuario

A medida que se cambia el tamaño del texto, los controles y los contenedores también deben cambiar el tamaño y el flujo para acomodar el texto y su nuevo diseño. Como se mencionó anteriormente, en función de la aplicación, el marco y la plataforma, gran parte de este trabajo se realiza por usted. En la siguiente guía de experiencia de usuario se tratan los casos en los que no lo es.

Uso de los controles de plataforma

¿Ya lo dijimos? Vale la pena repetir: Siempre que sea posible, use siempre los controles integrados proporcionados con los distintos marcos de aplicaciones de Windows para obtener la experiencia de usuario más completa posible para la menor cantidad de esfuerzo.

Por ejemplo, todos los controles de texto de UWP admiten la experiencia de escalado de texto completo sin ninguna personalización ni plantillas.

Este es un fragmento de código de una aplicación básica para UWP que incluye un par de controles de texto estándar:

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

Escalado de texto animado

Uso del ajuste de tamaño automático

No especifique tamaños absolutos para los controles. Siempre que sea posible, deje que la plataforma cambie el tamaño de los controles automáticamente en función de la configuración del usuario y del dispositivo.

En este fragmento de código del ejemplo anterior, usamos los Auto valores de ancho y * para un conjunto de columnas de cuadrícula y permite 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.

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

Usar ajuste de texto

Para garantizar 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).

Si no especifica el ajuste de texto, la plataforma usa otros métodos para ajustar el diseño, incluido el recorte (consulte el ejemplo anterior).

Aquí, usamos las AcceptsReturn propiedades y TextWrapping TextBox para garantizar que el diseño sea lo más flexible posible.

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

Escalado de texto animado con ajuste de texto

Especificar el comportamiento de recorte de texto

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. El recorte se prefiere a los puntos suspensivos, ya que los puntos suspensivos ocupan espacio en sí mismos.

Nota

Si necesita recortar el texto, recorte el final de la cadena, no el principio.

En este ejemplo, se muestra cómo recortar texto en un TextBlock mediante la propiedad TextTrimming .

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

Escalado de texto con recorte de texto

Uso de una información sobre herramientas

Si recorta texto, use una información sobre herramientas para proporcionar el texto completo a los usuarios.

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

No escalar iconos o símbolos basados en fuentes

Al usar iconos basados en fuentes para énfasis o decoración, deshabilite el escalado en estos caracteres.

Establece la propiedad falseIsTextScaleFactorEnabled en para la mayoría de los controles XAML.

Compatibilidad con el escalado de texto de forma nativa

Controle el evento del sistema TextScaleFactorChanged UISettings en el marco y los controles personalizados. Este evento se genera cada vez que el usuario establece el factor de escalado de texto en su sistema.

Resumen

En este tema se proporciona información general sobre la compatibilidad con el escalado de texto en Windows e incluye la experiencia del usuario y la guía para desarrolladores sobre cómo personalizar la experiencia del usuario.

Artículos relacionados

Referencia de API

• IsTextScaleFactorEnabled
• TextScaleFactorChanged