Text Enhancement in WPF 4.0 – Text Clarity

WPF 4.0 di VS2010 menawarkan banyak perbaikan disana-sini, baik dari sisi GRAFIK maupun TEKS. Hah? Teks? Teks bukannya gitu-gitu aja yah perasaan? Kalo ngga baca2 secara indepth sepertinya saya sendiri juga kurang begitu sadar kalo ternyata banyak lho improvements yang terjadi di WPF 4 ini :)  Fitur-fitur terbaru yang udah saya cobain diantaranya Text Clarity (Text Formatting & Text Rendering),  Bindable Run, Caret & Selection Brush, Layout Rounding, dan Custom Dictionaries. Karena banyak jadi sepertinya akan saya bagi ke dalam beberapa postingan yah. Biar gak males bacanya :)

A. Text Clarity

Sebagai seorang pecinta UI (user interface, bukan universitas indonesia, haha..), saya memang cukup memperhatikan segala detail mulai dari layout sampai ke kualitas grafik/tulisan yang pixel-perfect. Nah yang cukup jadi “selebritis” di WPF 4 mendatang adalah masalah Text-Rendering Clarity, alias seberapa jelas tulisan yang bisa terlihat oleh mata kita. Dan di WPF 4, kita diberi beragam pilihan dalam hal rendering & formatting, melalui 2 buah properti baru berikut:

  1. Text Formatting Mode, ada 2 value properti yang bisa dipilih yaitu:
    • Ideal – ini tampilan default a.k.a WPF yang jadul. Disini glyph dari tulisan sebisa mungkin akan dijaga kemiripannya dibandingkan file font aslinya, sehingga kalo diutak-atik positioning/bitmap dari tulisan tersebut pasti hasilnya jadi kurang bagus.
    • Display – nah yang baru ini sudah menggunakan metriks kompatibel Win32-GDI (Graphics Device Interface). Bagi yg belum pernah dengar, GDI ini adalah semacam API dari windows yg bertanggung jawab terhadap hasil output pixel per pixel ke monitor / printer kita. Jadi dengan memilih opsi yang ini, hasilnya teks bakal lebih tajam & pixel perfect! :)
    <StackPanel>
        <TextBlock>
            Text Lebih Jelas di WPF
        </TextBlock>
        <TextBlock TextOptions.TextFormattingMode="Display">
            Text Lebih Jelas di WPF
        </TextBlock>
    </StackPanel>
    
    image  

    image

    See the difference? :) Tapi jangan salah, TextFormatting mode Ideal pada beberapa skenario justru terlihat lebih bagus dibandingkan yang udah support GDI! Pada kesempatan lain akan saya coba jelaskan.

  2. Text Rendering Mode, ada 4 pilihan value properti:
    • Auto : defaultnya, sistem akan me-render teks dalam ClearType, kecuali dalam sistem tersebut jenis rendering ClearType nya di-set disabled.
    • ClearType : dalam proses rendering text, digunakan anti-aliasing jenis ClearType
    • GrayScale : dalam proses rendering text, digunakan anti-aliasing jenis Grayscale
    • Aliased : rendering teks tidak akan menggunakan anti-aliasing jenis apapun.
<StackPanel TextOptions.TextFormattingMode="Display">
    <TextBlock>
        Contoh Rendering Teks ... ClearType </TextBlock>

    <TextBlock TextOptions.TextRenderingMode="Grayscale">
        Contoh Rendering Teks ... Grayscale </TextBlock>

    <TextBlock TextOptions.TextRenderingMode="Aliased">
        Contoh Rendering Teks ... Aliased </TextBlock>
</StackPanel>

image 

Mungkin rada bingung yah, apaan sih ALIAS? ANTI-ALIAS? Saya coba berbagi sedikit ilmu desain tipografi yaa.. :)

Anti-aliasing adalah terobosan baru seiring dengan berkembangnya resolusi monitor layar menjadi semakin tinggi.  Pada prinsipnya Anti-aliasing itu tuh cuman nambahin semi-transparan pixel sepanjang ujung-ujung/edge dari suatu huruf, untuk memberi kesan ‘smooth’ pada tampilan keseluruhan huruf. Jadi sangat berkebalikan dari Alias, dimana tiap huruf digambarkan pixel-per-pixel, jadi sampe terkenal istilah efek “anak-tangga” :D

 aliased-vs-anti

Lebih jelasnya mungkin bisa dipelajari dari situs referensi utama favorit saya. Yang jelas, untuk pilihan mode Rendering, paling bagus ya memang “ClearType”, walaupun jenis ClearType ini justru terkadang terasa kurang eye-friendly bagi pemilik monitor yang masih CRT :p Makanya ganti jadi LCD aja..

Hmm.. sepertinya sekian dulu postingan kali ini. Nantikan seri berikutnya yang menarik mengenai Text improvements di WPF 4!

Cheers…

Share this post: | | | |
Published Thursday, March 25, 2010 10:19 PM by Umi Fadilah
Filed under: , ,

Comments

# Text Enhancement in WPF 4.0 – Caret & Selection Brush

Friday, March 26, 2010 1:15 PM by Umi Fadilah

Menyambung postingan sebelumnya mengenai improvement pada WPF 4.0 dari sisi teks, kali ini saya akan

# Text Enhancement in WPF 4.0 – Bindable Run

Friday, March 26, 2010 1:21 PM by Umi Fadilah

Melengkapi rangkaian postingan mengenai fitur Teks di WPF 4.0, kali ini saya ingin memberikan gambaran

Powered by Community Server (Commercial Edition), by Telligent Systems