Tekst schalen

Voorbeeld van het schalen van tekst in Windows 11 (100% tot 225%)

Overzicht

Het lezen van tekst op een computerscherm (van mobiel apparaat tot laptop tot desktopmonitor tot het gigantische scherm van een Surface Hub) kan voor veel mensen lastig zijn. Omgekeerd vinden sommige gebruikers de tekengrootten die worden gebruikt in apps en websites die groter zijn dan nodig is.

Om ervoor te zorgen dat tekst zo leesbaar mogelijk is voor het breedste gebruikersbereik, biedt Windows de mogelijkheid voor gebruikers om de relatieve tekengrootte te wijzigen in zowel het besturingssysteem als afzonderlijke toepassingen. In plaats van een vergrootglas-app te gebruiken (die meestal alles in een gebied van het scherm vergroot en eigen bruikbaarheidsproblemen introduceert), de weergaveresolutie wijzigt of afhankelijk is van DPI-schaalaanpassing (waarmee de grootte van alles wordt aangepast op basis van weergave en typische kijkafstand), heeft een gebruiker snel toegang tot een instelling om alleen tekst te wijzigen, variërend van 100% (de standaardgrootte) tot 225%.

Support

Universele Windows-toepassingen (zowel standaard als PWA), ondersteunen standaard het schalen van tekst.

Als uw Windows-toepassing aangepaste besturingselementen, aangepaste tekstoppervlakken, vaste besturingselementhoogten, oudere frameworks of frameworks van derden bevat, moet u waarschijnlijk enkele updates uitvoeren om een consistente en nuttige ervaring voor uw gebruikers te garanderen.

DirectWrite, GDI en XAML SwapChainPanels bieden geen systeemeigen ondersteuning voor het schalen van tekst, terwijl win32-ondersteuning beperkt is tot menu's, pictogrammen en werkbalken.

Gebruikerservaring

Gebruikers kunnen de tekenschaal aanpassen met de schuifregelaar 'Tekst groter maken' op het scherm Instellingen -> Toegankelijkheid -> Visie/Weergave.

Instelling voor tekstschaal vanuit Instellingen -> Toegankelijkheid -> Gezichtsvermogen/Scherm weergeven

UX-richtlijnen

Naarmate de grootte van tekst wordt gewijzigd, moeten besturingselementen en containers ook het formaat aanpassen en herindelen om de tekst en de nieuwe indeling te kunnen herbergen. Zoals eerder vermeld, wordt veel van dit werk voor u uitgevoerd, afhankelijk van de app, het framework en het platform. In de volgende UX-richtlijnen worden de gevallen behandeld waarin dit niet het geval is.

Gebruik de bedieningselementen van het platform

Hebben we dit al gezegd? Het is de moeite waard om dit te herhalen: gebruik, indien mogelijk, altijd de ingebouwde besturingselementen die worden geleverd met de verschillende Windows-app-frameworks om de meest uitgebreide gebruikerservaring mogelijk te maken voor de minste hoeveelheid inspanning.

Zo ondersteunen alle BESTURINGSelementen voor UWP-tekst de volledige ervaring voor het schalen van tekst zonder aanpassingen of sjablonen.

Hier volgt een fragment uit een eenvoudige UWP-app met een aantal standaardtekstbesturingselementen:

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

Tekst met animatie schalen

Automatisch aanpassen gebruiken

Geef geen absolute grootten op voor uw besturingselementen. Laat waar mogelijk het platform de grootte van uw besturingselementen automatisch wijzigen op basis van gebruikers- en apparaatinstellingen.

In dit fragment uit het vorige voorbeeld gebruiken we de Auto waarden en * breedtewaarden voor een set rasterkolommen en laten we het platform de app-indeling aanpassen op basis van de grootte van de elementen in het raster.

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

Gebruik tekstterugloop

U kunt ervoor zorgen dat de indeling van uw app zo flexibel en aanpasbaar mogelijk is door tekstterugloop in te schakelen in elk besturingselement dat tekst bevat (veel besturingselementen bieden standaard geen ondersteuning voor tekstterugloop).

Als u geen tekstomloop opgeeft, gebruikt het platform andere methoden om de indeling aan te passen, waaronder afknippen (zie het vorige voorbeeld).

Hier gebruiken we de AcceptsReturn eigenschappen en TextWrapping tekstvakeigenschappen om ervoor te zorgen dat onze indeling zo flexibel mogelijk is.

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

Geanimeerde tekstschaal met tekstomloop

Gedrag voor het bijsnijden van tekst opgeven

Als tekstomloop niet het voorkeursgedrag is, kunt u met de meeste tekstbesturingselementen de tekst knippen of beletseltekens opgeven voor het bijsnijdgedrag. Clipping heeft de voorkeur boven ellipsen, omdat weglatingstekens zelf ruimte innemen.

In dit voorbeeld laten we zien hoe u tekst in een TextBlock kunt knippen met behulp van de eigenschap TextTrimming .

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

Tekst schalen met tekstopname

Gebruik een tooltip

Als u tekst uitknipt, gebruikt u knopinfo om de volledige tekst aan uw gebruikers te geven.

Hier voegen we knopinfo toe aan een TextBlock die geen ondersteuning biedt voor tekstterugloop:

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

Pictogrammen of symbolen op basis van lettertypen niet schalen

Wanneer u pictogrammen op basis van lettertypen gebruikt voor nadruk of decoratie, schakelt u schalen voor deze tekens uit.

Stel de eigenschap false op de meeste XAML-besturingselementen.

Ondersteuning voor het schalen van tekst op systeemeigen wijze

Behandel de TextScaleFactorChanged UISettings-systeemgebeurtenis in uw aangepaste framework en besturingselementen. Deze gebeurtenis wordt elke keer gegenereerd wanneer de gebruiker de tekstschaalfactor op hun systeem instelt.

Samenvatting

Dit onderwerp bevat een overzicht van ondersteuning voor tekstschalen in Windows en bevat UX- en ontwikkelaarsrichtlijnen voor het aanpassen van de gebruikerservaring.

Verwante artikelen

API-referentie

• IsTextScaleFactorEnabled
• TekstschaalfactorGewijzigd