Penskalan teks

Contoh penskalaan teks dalam Windows 11 (100% hingga 225%)

Gambaran Umum

Membaca teks di layar komputer (dari perangkat seluler ke laptop ke monitor desktop ke layar raksasa Surface Hub) bisa menjadi tantangan bagi banyak orang. Sebaliknya, beberapa pengguna menemukan ukuran font yang digunakan dalam aplikasi dan situs web agar lebih besar dari yang diperlukan.

Untuk memastikan teks sebagus mungkin untuk rentang pengguna terluas, Windows menyediakan kemampuan bagi pengguna untuk mengubah ukuran font relatif di seluruh OS dan aplikasi individual. Alih-alih menggunakan aplikasi pembesar (yang biasanya hanya memperbesar segala sesuatu dalam area layar dan memperkenalkan masalah kegunaannya sendiri), mengubah resolusi tampilan, atau mengandalkan penskalaan DPI (yang mengubah ukuran semuanya berdasarkan tampilan dan jarak pandang umum), pengguna dapat dengan cepat mengakses pengaturan untuk mengubah ukuran hanya teks, mulai dari 100% (ukuran default) hingga 225%.

Dukungan

Aplikasi Universal Windows (baik standar maupun PWA), mendukung penskalakan teks secara default.

Jika aplikasi Windows Anda menyertakan kontrol kustom, permukaan teks kustom, tinggi kontrol yang dikodekan secara permanen, kerangka kerja yang lebih lama, atau kerangka kerja pihak ketiga, Anda mungkin harus membuat beberapa pembaruan untuk memastikan pengalaman yang konsisten dan berguna bagi pengguna Anda.

DirectWrite, GDI, dan XAML SwapChainPanels tidak secara asli mendukung penskalaan teks, sementara dukungan Win32 terbatas pada menu, ikon, dan toolbar.

Pengalaman pengguna

Pengguna dapat menyesuaikan skala teks dengan penggeser Buat teks lebih besar di layar Pengaturan -> Kemudahan Akses -> Visi/Tampilan.

Pengaturan skala teks dari Pengaturan -> Kemudahan Akses -> Layar Visi/Tampilan

Panduan UX

Saat teks diubah ukurannya, kontrol dan kontainer juga harus mengubah ukuran dan me-reflow untuk mengakomodasi teks dan tata letak barunya. Seperti disebutkan sebelumnya, tergantung pada aplikasi, kerangka kerja, dan platform, sebagian besar pekerjaan ini dilakukan untuk Anda. Panduan UX berikut mencakup kasus-kasus di mana tidak.

Menggunakan kontrol platform

Apakah kita sudah mengatakan ini? Perlu diulang: Jika memungkinkan, selalu gunakan kontrol bawaan yang disediakan dengan berbagai kerangka kerja aplikasi Windows untuk mendapatkan pengalaman pengguna yang paling komprehensif yang mungkin untuk sedikit upaya.

Misalnya, semua kontrol teks UWP mendukung pengalaman penskalaan teks lengkap tanpa kustomisasi atau templat apa pun.

Berikut adalah cuplikan dari aplikasi UWP dasar yang menyertakan beberapa kontrol teks standar:

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

Penskalan teks animasi

Menggunakan ukuran otomatis

Jangan tentukan ukuran absolut untuk kontrol Anda. Jika memungkinkan, biarkan platform mengubah ukuran kontrol Anda secara otomatis berdasarkan pengaturan pengguna dan perangkat.

Dalam cuplikan ini dari contoh sebelumnya, kita menggunakan Auto nilai lebar dan * untuk sekumpulan kolom kisi dan membiarkan platform menyesuaikan tata letak aplikasi berdasarkan ukuran elemen yang terkandung dalam kisi.

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

Menggunakan pembungkusan teks

Untuk memastikan tata letak aplikasi Anda fleksibel dan dapat disesuaikan, aktifkan pembungkusan teks dalam kontrol apa pun yang berisi teks (banyak kontrol tidak mendukung pembungkusan teks secara default).

Jika Anda tidak menentukan pembungkusan teks, platform menggunakan metode lain untuk menyesuaikan tata letak, termasuk kliping (lihat contoh sebelumnya).

Di sini, kami menggunakan AcceptsReturn properti textbox dan TextWrapping untuk memastikan tata letak kami fleksibel mungkin.

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

Penskalaan teks animasi dengan pembungkusan teks

Menentukan perilaku pemangkasan teks

Jika pembungkusan teks bukan perilaku yang disukai, sebagian besar kontrol teks memungkinkan Anda mengklip teks atau menentukan elipsis untuk perilaku pemangkasan teks. Kliping lebih disukai untuk elipsis karena elipsis mengambil ruang sendiri.

Catatan

Jika Anda perlu mengklip teks Anda, klip akhir string, bukan awalnya.

Dalam contoh ini, kami menunjukkan cara mengklip teks dalam TextBlock menggunakan properti TextTrimming .

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

Penskalaan teks dengan kliping teks

Menggunakan tipsalat

Jika Anda mengklip teks, gunakan tipsalat untuk memberikan teks lengkap kepada pengguna Anda.

Di sini, kami menambahkan tipsalat ke TextBlock yang tidak mendukung pembungkusan teks:

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

Jangan skalakan ikon atau simbol berbasis font

Saat menggunakan ikon berbasis font untuk penekanan atau dekorasi, nonaktifkan penskalaan pada karakter ini.

Atur properti IsTextScaleFactorEnabled ke false untuk sebagian besar kontrol XAML.

Mendukung penskalakan teks secara asli

Tangani peristiwa sistem TextScaleFactorChanged UISettings dalam kerangka kerja dan kontrol kustom Anda. Kejadian ini dimunculkan setiap kali pengguna mengatur faktor penskalakan teks pada sistem mereka.

Ringkasan

Topik ini memberikan gambaran umum tentang dukungan penskalaan teks di Windows dan menyertakan panduan UX dan pengembang tentang cara menyesuaikan pengalaman pengguna.

Artikel terkait

Referensi API

• IsTextScaleFactorEnabled
• TextScaleFactorChanged