Menyesuaikan tata letak dan font, dan mendukung RTL

  • Artikel

Desain aplikasi Anda untuk mendukung tata letak dan font dari beberapa bahasa, termasuk arah alur RTL (kanan-ke-kiri). Arah alur adalah arah di mana skrip ditulis dan ditampilkan, dan elemen UI pada halaman dipindai oleh mata.

Panduan tata letak

Bahasa seperti Jerman dan Finlandia biasanya menggunakan lebih banyak karakter daripada bahasa Inggris. Font Asia Timur biasanya membutuhkan lebih banyak tinggi. Dan bahasa seperti Arab dan Ibrani mengharuskan panel tata letak dan elemen teks ditata dalam urutan baca kanan-ke-kiri (RTL).

Karena variasi ini dalam metrik teks yang diterjemahkan, kami sarankan Anda tidak memanggang posisi absolut, lebar tetap, atau tinggi tetap ke antarmuka pengguna (UI) Anda. Sebagai gantinya, manfaatkan mekanisme tata letak dinamis yang dibangun ke dalam elemen UI Windows. Misalnya, kontrol konten (seperti tombol), kontrol item (seperti tampilan kisi dan tampilan daftar), dan panel tata letak (seperti kisi dan stackpanel) secara otomatis mengubah ukuran dan aliran ulang secara default agar pas dengan kontennya. Pseudo-localize aplikasi Anda untuk mengungkap kasus tepi bermasalah di mana elemen UI Anda tidak berukuran untuk konten dengan benar.

Tata letak dinamis adalah teknik yang direkomendasikan, dan Anda akan dapat menggunakannya dalam sebagian besar kasus. Kurang disukai, tetapi masih lebih baik daripada memanggang ukuran ke markup UI Anda, adalah mengatur nilai tata letak sebagai fungsi bahasa. Berikut adalah contoh bagaimana Anda dapat mengekspos properti Lebar di aplikasi Anda sebagai sumber daya yang dapat diatur oleh pelokal dengan tepat per bahasa. Pertama, di File Sumber Daya (.resw) aplikasi Anda, tambahkan pengidentifikasi properti dengan nama "TitleText.Width" (bukan "TitleText", Anda dapat menggunakan nama apa pun yang Anda suka). Kemudian, gunakan x:Uid untuk mengaitkan satu atau beberapa elemen UI dengan pengidentifikasi properti ini.

<TextBlock x:Uid="TitleText">

Untuk informasi selengkapnya tentang File Sumber Daya (.resw), pengidentifikasi properti, dan x:Uid, lihat Melokalkan string di manifes paket UI dan aplikasi Anda.

Font

Gunakan kelas pemetaan font LanguageFont untuk akses terprogram ke keluarga font, ukuran, berat, dan gaya yang direkomendasikan untuk bahasa tertentu. Kelas LanguageFont menyediakan akses ke info font yang benar untuk berbagai kategori konten termasuk header UI, pemberitahuan, teks isi, dan font isi dokumen yang dapat diedit pengguna.

Mencerminkan gambar

Jika aplikasi Anda memiliki gambar yang harus dicerminkan (yaitu, gambar yang sama dapat dibalik) untuk RTL, maka Anda dapat menggunakan FlowDirection.

<!-- en-US\localized.xaml -->
<Image ... FlowDirection="LeftToRight" />

<!-- ar-SA\localized.xaml -->
<Image ... FlowDirection="RightToLeft" />

Jika aplikasi Anda memerlukan gambar yang berbeda untuk membalik gambar dengan benar, maka Anda dapat menggunakan sistem manajemen sumber daya dengan LayoutDirection kualifikasi (lihat bagian LayoutDirection dari Menyesuaikan sumber daya Anda untuk bahasa, skala, dan kualifikasi lainnya). Sistem memilih gambar file.layoutdir-rtl.png bernama saat bahasa runtime aplikasi (lihat Memahami bahasa profil pengguna dan bahasa manifes aplikasi) diatur ke bahasa RTL. Pendekatan ini mungkin diperlukan ketika beberapa bagian gambar dibalik, tetapi bagian lain tidak.

Menangani bahasa kanan-ke-kiri (RTL)

Saat aplikasi Anda dilokalkan untuk bahasa kanan-ke-kiri (RTL), gunakan properti FrameworkElement.FlowDirection , dan atur padding dan margin simetris. Panel tata letak seperti skala Grid dan balikkan secara otomatis dengan nilai FlowDirection yang Anda tetapkan.

Atur FlowDirection pada panel tata letak akar (atau bingkai) Halaman Anda, atau di Halaman itu sendiri. Ini menyebabkan semua kontrol yang terkandung dalam untuk mewarisi properti tersebut.

Penting

Namun, FlowDirectiontidak diatur secara otomatis berdasarkan bahasa tampilan yang dipilih pengguna di pengaturan Windows; juga tidak berubah secara dinamis sebagai respons terhadap bahasa tampilan peralihan pengguna. Jika pengguna mengalihkan pengaturan Windows dari bahasa Inggris ke Arab, misalnya, maka properti FlowDirection tidak akan berubah secara otomatis dari kiri-ke-kanan ke kanan-ke-kiri. Sebagai pengembang aplikasi, Anda harus mengatur FlowDirection dengan tepat untuk bahasa yang saat ini Anda tampilkan.

Teknik terprogram adalah menggunakan LayoutDirection properti bahasa tampilan pengguna pilihan untuk mengatur properti FlowDirection (lihat contoh kode di bawah). Sebagian besar kontrol yang disertakan dalam Windows sudah menggunakan FlowDirection . Jika Anda menerapkan kontrol kustom, kontrol kustom harus menggunakan FlowDirection untuk membuat perubahan tata letak yang sesuai untuk bahasa RTL dan LTR.

this.languageTag = Windows.Globalization.ApplicationLanguages.Languages[0];

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

var flowDirectionSetting = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues["LayoutDirection"];
if (flowDirectionSetting == "LTR")
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.LeftToRight;
}
else
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.RightToLeft;
}

#include <winrt/Windows.ApplicationModel.Resources.Core.h>
#include <winrt/Windows.Globalization.h>
...

m_languageTag = Windows::Globalization::ApplicationLanguages::Languages().GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView().QualifierValues().Lookup(L"LayoutDirection");
if (flowDirectionSetting == L"LTR")
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::LeftToRight);
}
else
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::RightToLeft);
}

this->languageTag = Windows::Globalization::ApplicationLanguages::Languages->GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView()->QualifierValues->Lookup("LayoutDirection");
if (flowDirectionSetting == "LTR")
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::LeftToRight;
}
else
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::RightToLeft;
}

Teknik di atas menjadikan FlowDirection sebagai fungsi dari LayoutDirection properti bahasa tampilan pengguna pilihan. Jika karena alasan apa pun Anda tidak menginginkan logika tersebut, maka Anda dapat mengekspos properti FlowDirection di aplikasi Anda sebagai sumber daya yang dapat diatur pelokalan dengan tepat untuk setiap bahasa yang mereka terjemahkan.

Pertama, di File Sumber Daya (.resw) aplikasi Anda, tambahkan pengidentifikasi properti dengan nama "MainPage.FlowDirection" (bukan "MainPage", Anda dapat menggunakan nama apa pun yang Anda suka). Kemudian, gunakan x:Uid untuk mengaitkan elemen Halaman utama Anda (atau panel tata letak akar atau bingkainya) dengan pengidentifikasi properti ini.

<Page x:Uid="MainPage">

Alih-alih satu baris kode untuk semua bahasa, ini tergantung pada penerjemah "menerjemahkan" sumber daya properti ini dengan benar untuk setiap bahasa yang diterjemahkan; jadi ketahuilah bahwa ada peluang tambahan untuk kesalahan manusia ketika Anda menggunakan teknik ini.

API penting