Cara Membuat Postingan Di Blog Dengan Huruf Arab

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/13/2018

Ada sahabat Kompi yang menanyakan bagaimana cara membuat tulisan hutuf Arab menjadi bagus dan rapih serta valid AMP.

Jika Anda adalah blogger yang menyajikan konten keagamaan, khususnya agama Islam, tentu saja sesekali Anda akan menyertakan tulisan Arab pada konten yang Anda buat, bisa berupa cuplikan ayat Al-Qur'an atapun dalil-dalil yang mendukung konten.

Atau mungkin Anda juga menyajikan konten do'a-do'a harian beserta terjema'ahannya.

Tentu saja tulisan Arab ini harus tampil rapih dan mudah dibaca. Sebagai contoh pada widget JSFiddle di bawah ini saya menuliskan Q.S. Al-Fatihah.


Nah jika Anda adalah blogger yang menyajikan konten agama Islam, silahkan ikuti langkah di bawah ini agar tulisan Arab di konten Anda menjadi rapih dan mudah dibaca.

Silahkan simpan CSS berikut ini di style blog Anda, jika Anda menggunakan blog AMP silahkan simpan di style amp-custom blog Anda (ini bisa digunakan di blog AMP dan Non AMP).

@font-face {

  font-family: 'me_quran';

  src: url('https://cdn.statically.io/gh/KompiAjaib/font/master/me_quran.eot');

  src: url('https://cdn.statically.io/gh/KompiAjaib/font/master/me_quran.eot?#iefix') format('embedded-opentype'), url('https://cdn.statically.io/gh/KompiAjaib/font/master/me_quran.woff') format('woff'), url('https://cdn.statically.io/gh/KompiAjaib/font/master/me_quran.ttf') format('truetype'), url('https://cdn.statically.io/gh/KompiAjaib/font/master/me_quran.svg#me_quran') format('svg');

  font-weight: normal;

  font-weight: 400;

  font-style: normal;

}

.text-arab {

  font-size: 22px;

  line-height: 2.2;

  font-family: me_quran, sans-serif;

  font-weight: normal;

  text-align: right;

  direction: rtl;

}

Kemudian di dalam postingan (jika Anda menambahkan tulisan Arab) silahkan gunakan kode seperti ini.

<div class="text-arab">

Tulisan Arab di sini

</div>

Tulis kode itu pada mode HTML.

Jadi saran saya, tulis dulu semua postingan yang menggunakan huruf latin sampai selesai dengan mode Compose. Setelah selesai kemudian alihkan ke mode HTML, barulah tuliskan huruf Arab-nya dengan kode di atas. Untuk setiap baris ayat tambahkan kode <br /> untuk baris baru.

Contoh penulisannya seperti di bawah ini (dalam mode HTML), Q.S. Al-Fatihah.

<div class="text-arab">

بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ<br />

اَلۡحَمۡدُ لِلّٰهِ رَبِّ الۡعٰلَمِيۡنَۙ<br />

الرَّحۡمٰنِ الرَّحِيۡمِۙ<br />

مٰلِكِ يَوۡمِ الدِّيۡنِؕ<br />

اِيَّاكَ نَعۡبُدُ وَاِيَّاكَ نَسۡتَعِيۡنُؕ<br />

اِهۡدِنَا الصِّرَاطَ الۡمُسۡتَقِيۡمَۙ<br />

صِرَاطَ الَّذِيۡنَ اَنۡعَمۡتَ عَلَيۡهِمۡ ۙ<br />

غَيۡرِ الۡمَغۡضُوۡبِ عَلَيۡهِمۡ وَلَا الضَّآلِّيۡنَ

</div>

Semoga bermanfaat.