Cara Menciptakan Postingan Di Blog Dengan Aksara Arab

Ada sahabat Kompi yang menanyakan bagaimana cara menciptakan goresan pena hutuf Arab menjadi anggun dan rapih serta valid AMP.

Jika Anda ialah blogger yang menyajikan konten keagamaan, khususnya agama Islam, tentu saja sesekali Anda akan menyertakan goresan pena Arab pada konten yang Anda buat, dapat 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 goresan pena Arab ini harus tampil rapih dan gampang dibaca. Sebagai teladan pada widget JSFiddle di bawah ini aku menuliskan Q.S. Al-Fatihah.


Nah jikalau Anda ialah blogger yang menyajikan konten agama Islam, silahkan ikuti langkah di bawah ini semoga goresan pena Arab di konten Anda menjadi rapih dan gampang dibaca.

Silahkan simpan CSS berikut ini di style blog Anda, jikalau Anda memakai blog AMP silahkan simpan di style amp-custom blog Anda (ini dapat dipakai di blog AMP dan Non AMP).

 @font-face {
   font-family: 'me_quran';
   src: url('https://cdn.rawgit.com/KompiAjaib/font/master/me_quran.eot');
   src: url('https://cdn.rawgit.com/KompiAjaib/font/master/me_quran.eot?#iefix') format('embedded-opentype'), url('https://cdn.rawgit.com/KompiAjaib/font/master/me_quran.woff') format('woff'), url('https://cdn.rawgit.com/KompiAjaib/font/master/me_quran.ttf') format('truetype'), url('https://cdn.rawgit.com/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 goresan pena Arab) silahkan gunakan isyarat menyerupai ini.

 <div class="text-arab">
 Tulisan Arab di sini
 </div>

Tulis isyarat itu pada mode HTML.

Makara saran saya, tulis dulu semua postingan yang memakai karakter latin hingga final dengan mode Compose. Setelah final lalu alihkan ke mode HTML, barulah tuliskan karakter Arab-nya dengan isyarat di atas. Untuk setiap baris ayat tambahkan isyarat <br /> untuk baris baru.

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

 <div class="text-arab">
 بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ<br />
 اَلۡحَمۡدُ لِلّٰهِ رَبِّ الۡعٰلَمِيۡنَۙ<br />
 الرَّحۡمٰنِ الرَّحِيۡمِۙ<br />
 مٰلِكِ يَوۡمِ الدِّيۡنِؕ<br />
 اِيَّاكَ نَعۡبُدُ وَاِيَّاكَ نَسۡتَعِيۡنُؕ<br />
 اِهۡدِنَا الصِّرَاطَ الۡمُسۡتَقِيۡمَۙ<br />
 صِرَاطَ الَّذِيۡنَ اَنۡعَمۡتَ عَلَيۡهِمۡ ۙ<br />
 غَيۡرِ الۡمَغۡضُوۡبِ عَلَيۡهِمۡ وَلَا الضَّآلِّيۡنَ
 </div>

Semoga bermanfaat.


Sumber https://www.kompiajaib.com/

Share this post