Skip to content

emka.web.id

Menu
  • Home
  • Indeks Artikel
  • Tutorial
  • Tentang Kami
Menu

Belajar CSS: Mempercantik Tulisan Arab dalam Web

Posted on February 04, 2012 by Syauqi Wiryahasana
Untuk beberapa kali dalam blog ini pernah ditampilkan tulisan-tulisan arab yang cukup sulit ditulis dan ditampilkan, ya cukup sulit bagi saya menulis arab dengan keyboard dan menampilkan tulisan arab dengan baik dari segi keterbacaanya. Font arabic tidak semuanya didukung dan ada dimasing-masing komputer pembaca blog. Tapi berkat CSS3 dan web-font, kita bisa lebih mempercantik tampilan aksara arab di website kita. Untuk font yang digunakan adalah font KFGQPC Uthman Taha Naskh yang bisa anda unduh dari sini, atau gunakan font arabic lain Langkah-langkah yang bisa anda ikuti: 1. Unduh font KFGQPC Uthman Taha Naskh, dari sini atau cari versi terbaru. 2. Upload font ke direktori public_html atau htdocs, atau ke direktori lain yang terbaca via web. Misal, di https://cms.emka.web.idfont/ 3. Edit file CSS, tambahkan code berikut: [sourcecode language="css"] div#content p.ArabLeft, div#content p.ArabCenter, div#content p.ArabRight { background-image:url(/img/line2.gif); font-size: 2em; font-family: 'KFGQPC Uthman Taha Naskh', KFGQPC_Naskh, 'traditional arabic'; font-weight: normal; line-height: 46px; direction: rtl; } div#content p.ArabRight { text-align: right; } div#content p.ArabCenter { text-align: center; } div#content p.ArabLeft { text-align: left; } [/sourcecode] *Silakan sesuaikan CSS tersebut dengan kondisi tag pada template anda. 4. Tambahkan style webfont pada bagian header html anda: [sourcecode language="html"] <style type="text/css"> @font-face {font-family: 'KFGQPC_Naskh'; src: url('/font/KFC_naskh.eot'); src: local('KFGQPC Uthman Taha Naskh'), url('/font/KFC_naskh.otf') format('opentype');} </style> [/sourcecode] 5. Coba tulis aksara arab anda pada area dengan class ArabicCenter, ArabicLeft atau ArabicRight dan lihat pada browser. Bisa khan? seperti contohnya:
Seedbacklink

Recent Posts

TENTANG EMKA.WEB>ID

EMKA.WEB.ID adalah blog seputar teknologi informasi, edukasi dan ke-NU-an yang hadir sejak tahun 2011. Kontak: kontak@emka.web.id.

©2024 emka.web.id Proudly powered by wpStatically