Mempercantik Tulisan Arab Pada Website

Apakah Anda sedang atau pernah bingung dengan cara menampilkan tulisan Arab dalam website/situs atau blog Anda?. Jika Anda tidak pernah mengalami hal tersebut, atau jika Anda tidak sedang mencari bagaimana cara menampilkan tulisan Arab pada website dengan benar dan baik, serta cantik dipandang mata, maka tulisan pada halaman ini mungkin tidak akan begitu berguna bagi Anda. Tapi bagi orang seperti saya yang pernah bingung dengan cara menulis tulisan Arab seperti ayat Al-Quran pada website (tepatnya blog), maka tulisan ini sangat tepat bagi Anda.

Saya sendiri sempat mencari WordPress plugin hanya untuk menulis dan menampilkan ayat Al-Quran dalam tulisan-tulisan arab pada baca situs dot com ini, seperti pada tulisan Benarkah Pohon Zaqqum Ada Di Dunia ini misalnya. Ketika menulis tulisan tersebut, saya memerlukan beberapa hal berikut:

1. Bagaimana caranya agar tulisan Arab yang ditampilkan memiliki tampilan huruf yang menarik bahkan cantik/indah dilihat
2. Bagaimana caranya agar setiap saya menulis tulisan Arab, maka akan tampil rata kanan dengan tampilan yang cukup jelas dan jarak antar tulisan Arab dengan tulisan disekitarnya cukup memadai (tidak terlalu rapat tetapi tidak terlalu lebar juga)

Tapi karena saya merasa permasalahan tersebut masih dapat diatasi dengan menggunakan CSS, maka saya pun memutuskan untuk mengatasi masalah tersebut dengan cara menambahkan styling saja, dengan kata lain saya hanya perlu menambahkan sebuah class CSS saja kedalam file style theme yang saya pergunakan

Berikut ini adalah langkah-langkah yang saya lakukan untuk mempercantik tulisan Arab pada situs ini:

1. Unduh font KFGQPC Uthman Taha Naskh, dari sini (download kfc_naskh-webfont.ttf juga otf, eot, svg). Disini juga Anda dapat mengunduh beberapa font-font quran lainnya
2. Upload font ke direktori public_html atau htdocs, atau ke direktori lain yang terbaca via web. Misal, di http://bacasitus.com/font-quran/
3. Edit file CSS (file style theme Anda, biasanya style.css), tambahkan code berikut:

   .arab {
   font-size: 2em;
   font-family: 'KFGQPC Uthman Taha Naskh', KFGQPC_Naskh, 'traditional arabic';
   font-weight: normal;
   line-height: 46px;
   direction: rtl;
   }
   
   @font-face {
   font-family: 'KFGQPC Uthman Taha Naskh';
   src: url('/font-quran/kfc_naskh-webfont.eot');
   src: url('/font-quran/kfc_naskh-webfont.eot?#iefix') format('embedded-opentype'),
   url('/font-quran/kfc_naskh-webfont.woff') format('woff'),
   url('/font-quran/kfc_naskh-webfont.ttf') format('truetype'),
   url('/font-quran/kfc_naskh-webfont.svg#KFGQPCUthmanTahaNaskhRegular') format('svg');
   font-weight: normal;
   font-style: normal;
   }

   Pada baris ke-6, kode direction: rtl disertakan untuk mengubah arah konten dari kiri ke kanan (standar arah konten) menjadi dari kanan ke kiri sesuai dengan arah tulisan Arab. RTL berarti right to left. Sedangkan jenis font (KFGQPC Uthman Taha Naskh) yang dipergunakan ditentukan oleh baris ke-3, sedangkan pendefinisian fontnya sendiri (karena bukan font standar yang telah dimengerti oleh kode standar web) ditulisakan dengan kode mulai baris ke-9 sampai baris ke-18 pada kode CSS diatas. Silahkan kode ini disesuaikan dengan kebutuhan Anda

4. Simpan file CSS/Style theme Anda dan selesai, sekarang Anda tinggal menulis tulisan Arab, dalam paragraf atau div dengan menggunakan class arab

Hasilnya akan terlihat seperti contoh berikut

نَحْنُ خَلَقْنَاكُمْ فَلَوْلَا تُصَدِّقُونَ

Terlihat lebih cantik dibanding format standar berikut ini
نَحْنُ خَلَقْنَاكُمْ فَلَوْلَا تُصَدِّقُونَ