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 hasta un portátil hasta un monitor de escritorio a la pantalla gigante de 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 capacidad 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 (estándar y 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 anteriores 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 se limita a menús, iconos y barras de herramientas.
Experiencia del usuario
Los usuarios pueden ajustar la escala de texto con el control deslizante Hacer que el texto sea más grande en la pantalla Configuración -> Facilidad de acceso -> Visión/Pantalla.
Configuración de escalado de texto desde Configuración-> Facilidad de acceso -> Pantalla de visión y 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, dependiendo de la aplicación, el marco y la plataforma, gran parte de este trabajo se realiza para usted. En las siguientes instrucciones 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>
Uso del ajuste de texto
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).
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 asegurarnos de que nuestro 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 para los puntos suspensivos, ya que los puntos suspensivos ocupan espacio.
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 una 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 escale iconos o símbolos basados en fuentes
Al usar iconos basados en fuentes para énfasis o decoración, deshabilite el escalado en estos caracteres.
Establezca la propiedad false IsTextScaleFactorEnabled 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.
