Justified Text dan Hyphenation

Sebagaimana yang mungkin Anda tahu, blog saya (untuk saat ini) sudah “melanggar” setidaknya dua anjuran keterbacaan (readability) untuk sebuah situs web. Pertama adalah penggunaan teks imbangan  (justified text), yang bisa mengganggu pembaca dengan disabilitas/hendaya kognitif sebagaimana yang ditulis secara singkat di “Konten Web Sebaiknya Tidak Menggunakan Justified Text”. Dan yang kedua adalah penggunaan latar gelap untuk sebuah situs web yang bisa mengganggu, bukan hanya untuk mereka dengan disleksi, namun juga pembaca secara umumnya, merujuk kembali pada tulisan “Web Readability on Dark Background” dan sumber-sumber yang disitasikan.

Saya bukannya tidak menyukai teks imbangan dibandingkan dengan standar teks rata kanan yang banyak digunakan dipelbagai situs formal – bahkan juga digunakan dalam penulisan laporan formal. Yang banyak diteliti, jika saya tidak keliru, adalah penggunaan justified text pada latar terang/cerah, bagaimana dengan justified text pada latar gelap? Apakah efek rivers of white yang ada di latar terang/cerah akan menjadi rivers of black? Ah…, apakah bisa dua sisi negatif ini bertemu dan menjadi sisi yang positif seperti dalam perkalian matematika? Entahlah, namun rasanya saya tidak ingin berkompromi atau pun tidak ingin berasumsi tanpa dasar.

Untuk isu dengan teks imbangan, saya mencoba cara lama yang saya gunakan ketika saya masih bergelut bersama mesin tik (mesin ketik/typewriter) di saat saya masih SMP dan SMA dulu. Efek rivers of white terjadi karena ruang/spasi antar kata melebar sesuka hati pada penggunaan teks imbangan di latar terang. Sedangkan pada teks rata kanan, rata kiri dan tengah tidak memiliki efek ini karena relatif spasi antar kata memiliki jarak monoton.

Juga karena saya belum menemukan cara paling akurat untuk menghadirkan jarak monoton pada spasi antar kata, maka saya memutuskan cara klasik penggunaan tanda sambung “ – “ atau yang disebut hyphenation. Beberapa kata diakhir baris yang terlalu panjang akan dipenggal dengan tanda sembung sesuai dengan suku katanya.

Misalnya kata “sambungan” bisa dipenggal menjadi “sam-bungan” penggelan pertama akan berada di akhir baris di mana kata itu aslinya berada, dan penggalan kedua akan berada di awal baris berikutnya. Cara ini mungkin tidak sempurna, namun setidaknya dapat mengurangi lebar spasi antar kata di barisnya.

Hal ini tidak saya lakukan secara manual, karena akan terjadi banyak pemenggalan yang tidak sesuai jika dibaca dengan peramban atau pun sistem yang berbeda, baik di teks asli, peramban ponsel, atau pun di pemasok RSS. Jadi untuk di blog ini, saya menggunakan bantuan pengaya “Wp-Typography” untuk melakukan hyphenation.

Adapun setelan yang saya gunakan untuk penempatan hyphenation adalah tidak memenggal kata yang kurang dari 5 huruf, sediakan setidaknya 3 huruf di awal penggalan atau setidaknya 2 huruf di akhir penggalan dengan mengacu pada ejaan Bahasa Indonesia. Saya tidak melakukan pemenggalan pada eleman <hx>heading</hx>, tidak juga untuk kata (termasuk singkatan) yang menggunakan huruf kapital seluruhnya, walau saya memberikan pemenggalan kata yang diawali huruf kapital.

Saya tidak menjamin hyphenation menyelesaikan permasalahan dengan teks imbangan, namun ini yang sementara dapat saya kerjakan. Jika Anda memiliki masukkan, silakan disampaikan 🙂 – hyphenation juga bisa digunakan pada teks rata kanan ataupun kiri, namun rasanya kurang cocok untuk teks tengah.

Untuk latar gelap saya belum memiliki solusi yang baik. Well, ini masalah selera bukan? Mungkin pembaca bisa menggunakan Safari Reader atau RSS Reader pun RSS Mail untuk membaca blog ini di latar putih, pengguna peramban Firefox dapat memanfaatkan ekstensi Readability untuk fungsi serupa.

Iklan

28 Comments

  1. Ah, WP-Typography. Plugin favorit saya untuk wordpress 🙂

    Saya jadi teringat pada javaScript hyphenator. Tetapi sepertinya untuk WP-Typography menggunakan PHP ya, jadi lebih kompatibel pada semua browser.

    Ah ya, tipografi berperan penting pada aksesibilitas, tidak hanya pada keterbacaan tetapi juga desain antarmuka. Kita tidak harus memaksaka menggunakan sans-serif dari font generik untuk menunjang keterbacaan. Penggunaan font serif dan modern juga bisa.

    Biar saya tebak (tanpa mengintip source hehe) saya melihat Constantia disini, Ah font yag sangat bagus, sayang sekali hanya terdapat pada Microsoft Windows keluaran terbaru, entah pada macintosh dan untuk pengguna linux semoga puas dengan DejaVu, Nimbus, atau Georgia :p

    Suka

    Balas

  2. @Bli Dani,
    Itulah yang sebenarnya saya khawatirkan :(.

    @Orangefloat,
    Iya, makanya teknologi pengaya readibility sangat membantu bahkan untuk orang normal sekali-pun untuk menghadapi blog yang pemilikinya keras kepala seperti saya :D.

    @Mas Hanif,
    Terus terang saya juga bukan ahli masalah desain web untuk menilai keterbacaannya.

    @Kikakirana,
    WordPress.com asal tidak diutak-atik terlalu banyak biasanya juga sudah mendukung konsep keterbacaan yang baik 🙂

    Suka

    Balas

  3. wah maz cahya ini sampai detail sekali ya…
    belajar banyak dari sini… 😉
    soalnya klo QK sich nggak terlalu tahu aturan” itu,, yg Qk tau waktu ngeblog sebenernya cuman nitip tulisan aja di dunia maya :mrgreen:

    klo soal yang lain”nya biarlah seperti apa adanya :mrgreen:

    HIDUP!!! ^_^

    Suka

    Balas

  4. selera tiap orang kan beda, blog sendiri kelola sendiri. sebelumnya saya jg pernah nemu blog dgn latar hitam, butuh waktu agak lama saya membaca tulisannya 🙂

    Suka

    Balas

  5. Cahya,

    logikanya, jika pengguna normal saja merasa kurang nyaman dengan penggalan kata, apalagi penyandang disabilitas.

    Penyandang disabilitas bisa memakai peramban Web 'desktop/mobile' yang sama dengan punya kita. Hanya saja, diintegrasikan dengan 'screen reader', 'voice browser', atau menyetel fitur khusus aksesibilitas di tiap perambannya. Misal, mematikan CSS, memakai 'style sheet' (pilihan warna, huruf, kolom) sendiri. Di Firefox juga ada ekstensi khusus untuk itu, selain pengaya Readability. 🙂

    Suka

    Balas

  6. @Mas Pandu,

    Saya hanya menggunakan yang sudah disediakan oleh para pakar pengembangan web, jadi tidak ada yang baru di blog saya kalau masalah web 🙂

    Ya, tapi kan jangan sampai selera saya mengganggu publik kan Mas Pandu, sama halnya dengan pemilik motor jangan sampai bikin suara motornya super "keren" eh malah mengundang polusi suara 😀

    @Mas Is,

    Saya tidak menyertakan memang pranalanya, karena bisa dengan mudah ditemukan di koleksi pengaya WordPress, kan tinggal panggil via Googling (meminjang kebiasaan Bli Dani), he he…

    Align left memang tidak perlu hyphenation kan Mas Is, tapi bisa diisi, sehingga menyerupai justified text nanti hasilnya.

    Tentang latar pekat saya belum sempat ngecek, Opera Dragonfly-nya agak lemot saat mau dibuka 😆

    @Fiya,

    Terima kasih Fiya, saya hanya memikirkan beberapa aspek "kemanusiaan" yang mungkin sudah saya abaikan 🙂

    @Mas Agung,

    Itu ditampilkan dengan arsitektur Carrington yang otomatis mendeteksi peramban ponsel yang sudah didaftarkan. Memang menggunakan latar cerah, walau tidak putih sepenuhnya. Arsitektur serupa diterapkan pada WordPress.com dan Blogspot untuk diakses via peramban ponsel. Sepertinya memang sudah standarnya demikian.

    Opera Mobile 10 rasanya juga sia-sia ditambahkan, hanya cocok kalau ponsel kita mendukung jaringan WiFi atau punya akses 3G unlimited 🙂 – Jika tidak ya seperti yang Mas Agung bilang, pulsanya bisa terancam 😀

    @Pak Aldy,

    Penggalannya memang otomatis, menyesuaikan dengan pola imbuhan, kata dasar, dan tentu saja suku kata. Tapi mungkin mesinnya belum sempurna, sehingga ada beberapa penggalan yang kurng tepat.

    @Bli Dani,

    Ya, kita kan pengguna normal Bli. Btw, apa tidak ada peramban khusus untuk para penyandang disabilitas sehingga mereka tidak perlu melakukan konversi pada sebuah web page yang tidak asesibel dan usabel bagi mereka secara manual?

    Jadi saat ditampilkan akan langsung tampak seperti yang menggunakan pengaya Readability itu?

    Ah, kecuali daniiswara.com memang tidak bisa dikonversi lagi 😆 – kalau bisa dikonversi ke bentuk yang bisa diakses dan digunakan oleh penyandang disabilitas dengan platform yang ramah bagi mereka, saya rasa itu bisa menjadi titik temu antara dua dunia, dan tidak memaksakan satu ke arah yang lainnya.

    @TuSuda,

    Terima kasih Dok, asal tampil beda tidak berarti menyulitkan orang lain 🙂

    @Ismi,

    Salam kenal Bu 🙂

    @Zee,

    Pada akhirnya justified text akan menuju sisi estetika ya Mbak 🙂

    @Mas Pushandaka,

    Rivers of white bukan keluhan umum pada para pembaca normal Bli Gung, tapi para penyandang disabilitas, biasanya muncul pada situs yang mengusung typography dengan justified text/full text justification dan monospaced fonts.

    Tapi mungkin kalau parah sekali, orang normal pun bisa merasa terganggu (terdistraksi) saat membaca konten.

    @Pak Huang,

    Sudah disunting Pak, terima kasih sudah diingatkan dan dikoreksi 🙂

    Suka

    Balas

  7. Wah, setelah membaca tulisan anda, saya jadi malah mencari-cari river di blog saya, bukannya membaca tulisannya. Hehe!

    Tapi menurut saya, kalau kita memperhatikan tulisannya, saya rasa rivers of white itu ndak "muncul".

    Saya memilih rata kanan-kiri karena lebih rapi saja. Saya baru tau tentang penelitian ini. Thanks infonya.

    Suka

    Balas

  8. wah2, sangat tekhnis sekali mas… jujur kalau saya sih bukan masalah tulisan atau textnya, tapi lebih kepada backgroundnya dominan ke warna abu2 gelap yg menyulitkan saya membaca terlalu lama… hehe,

    Suka

    Balas

  9. Memang justified text itu harus sesuai juga dengan theme webnya ya. Kalau lebar kolom pas alias gak lebar2 amat, rasanya masih aman pake justified.
    Kalau saya jelas suka pake justified. Saya suka dgn yg teratur dan rapi, sehingga saat dilihat sepintas ataupun saat dibaca, msh ada estetikanya… itu menurut saya sih.

    Suka

    Balas

  10. Komentar pertama saya diatas menggunakan default-nya peramban ponsel Sony Ericsson saya, jika menggunakan Opera Mini yang terbaca <code>Opera Mini 5.0.19693 on J2ME/MIDP Device</code> dan menyetel tidak full site kayaknya latar masih terasa putih.

    Kalau menggunakan setelan full site (situs penuh) dan fitur gambar di aktifkan, semua akan terbaca seperti menggunakan layar monitor komputer tapi sayang pulsa Simpati saya pasti akan boros 🙂

    Saya ndak tahu Opera Mobile versi 10 bisa dipasang di ponsel jadul saya ini 🙂

    Suka

    Balas

  11. Penggalannya nggak bisa auto Mas Cahya ? biasanya dengan justify, penggalan tidak terputus ditengah kata, umumnya antar kata, terkecuali kata bersambung dink 😀

    Suka

    Balas

  12. Wah, kenapa tautan menuju plugin (pengayanya) tidak disertakan saja mas? Tapi saya tentu saja tidak membutuhkan pengaya untuk memberi penggalan tersebut. Wong perataan blog saya pakai left align kok 🙂

    Soal latar gelap konten blog ini, saya sama sekali tidak merasa bermasalah kok. Malah sangat nyaman ketika saya buka via ubuntu. So, ga ada masalah dengan latar gelap di blog ini. Lagian, warna latarnya tidak hitam pekat kan? Jadi kontrasnya sudah pas nih. Sebab teks putih di atas latar hitam pekat (#000) itu terlalu kontras 🙂

    Suka

    Balas

  13. Pak dr. saya tidak komentar dengan tampilan jenis blognya bagaimana, itu kan sesuai selera yang mempunyai rumah, yang penting saya merasa nyaman untuk bertamu.

    Mengenai penggalan, tidak terpikir sama sekali kalau pak dr. bisa menciptakannya walau menggunakan "justify", itu merupakan sebuah maha karya, salut!!

    Suka

    Balas

  14. @Bli Dani,

    Penggalan memang ada yang kurang tepat, saya sebenarnya agak khawatir dengan penggunaan penggalan untuk penyandang disabilitas kognitif. Kira-kira ada pengaruhnya ndak ya Bli?

    Yah, untuk itu sudah ada banyak narablog lain yang memberikan edukasi, saya sih tinggal lempar bola panas saja nanti kalau ada yang tanya 😆 (siap-siap ya Bli).

    @Bli Wira,

    Kalau sudah pakai rata kiri (align: left) biasanya sih ndak akan timbul masalah seperti ini 🙂

    @Mas Agung,

    Coba diganti dengan Opera Mobile versi 10 🙂

    @Pak Aldy,

    Wah, saya ndak bisa olahraga yang satu itu Pak (re: bela diri) 😀

    Saya biasanya baca via RSS reader Pak, kalau mau memberi tanggapan baru saya kunjungi blognya 🙂

    Alasan saya memberi hyphenation ya seperti tertulis di atas, tidak tahu kalau yang lain ya…

    @Satu Kata,

    Opera Mini akan membuka blog ini via tema Carrington Mobile, saya belum mencoba melihatnya, sedangkan kalau pakai Opera Mobile akan dibuka dengan tema The Erudite – terlihat sama dengan peramban Opera untuk PC. Saya belum lihat bagaimana efeknya untuk tema Carrington.

    @Asepsaiba,

    Yah, saya belum mengecek sampai dengan IEMobile, apa akan memperlihatkan Carrington atau The Erudite, karena lebih baik dilihat di Carrington jika menggunakan ponsel.

    Terima kasih untuk masukkannya Mas 🙂

    @Mbak Isnuansa,

    Ya sebagian besar memang masalah selera. Kalau di internet disebut sebagai "dark lovers" – para pecinta kegelapan 😆

    Saya tidak memiliki argumentasi seperti Mas Is, tapi saya suka memang latar hitam. Coba nanti saya buat tulisan khusus untuk itu ya Mbak 🙂

    Suka

    Balas

  15. wah sepertiY ini hak penulis bos, tapi menurut'q baik2 aja seperti blog yang lain

    Mungkin karna aku ol pake hp ya bos

    Oh ya salam kenal

    Suka

    Balas

  16. Bela diri ceritanya nih ?

    Nggak apa-apa, terserah yang punya saja, yang penting kaca mata tua ini masih sanggup membantu penglihatan yang lebih baik untuk membaca konten diblog ini.

    Mengenai hyphen (-), saya juga menemukan blog yang memenggal kata tetapi tidak pas dan saya bingung kenapa harus dipenggal ? biarkan mesin blog yang mengaturnya 😀

    Suka

    Balas

  17. Yang latar gelap kan memang bisa dibuat jadi ‘usable’. Jadi, masih bisa disetel agar menjadi lebih nyaman digunakan. Apalagi jika kebanyakan pengguna (normal) tidak mempermasalahkannya. Itu juga kalau masih memperhitungkan kebergunaan bagi pengunjung tertarget.

    Banyak konsep aksesibilitas Web yang masih belum bisa diterima kebanyakan pengguna (normal). Karena kembali ke ‘selera’ pengguna (normal). Belum memperhitungkan penyandang disabilitas yang juga punya hak akses informasi di Web yang luas ini. 🙂

    Suka

    Balas

  18. Ya, masalah selera ini yang ungkin jadi kendala utama, karena saya paling nggak suka blog berlatar hitam 😦

    Barusaja saya malah komentar di blognya Iskandaria, menanyakan kenapa Vli Cahya memutuskan memakai latar hitam. Hanya soal selerakah?

    Suka

    Balas

  19. Duh, maap sy smbaca lewat hape. apakah karena itu, tuilsan bayak terdapat tanda “-“.. pantesan.. Terus terang bikin bingung juga bli..

    Tapi, semuanya berpulang ke masalah ‘selera’ ya bli…

    Suka

    Balas

  20. Kali ini kok ndak disinggung di peramban ponsel ya? Peramban ini mengatakan, text tidak rata kanan dan latar menjadi putih 😀
    “Acung jempol”, saya suka latar putih :p

    Suka

    Balas

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.