Cara Menulis Huruf Bahasa Arab pada Blog Valid AMP

Malu bertanya, sesat dijalan. Peribahasa tersebut mengingatkan saya ketika hendak ingin mempelejari tentang dunia blog. Setiap orang pasti mempunyai karakter tersendiri. Hal negatif seperti malu bertanya adalah sesuatu yang lumrah yang sampai sekarang masih melekat dan menempel dalam jiwa saya.

Minggu-minggu ini entah kenapa saya ingin sekali untuk menguasai AMP HTML. Meskipun saya tidak bisa membuat sebuah template valid AMP, tapi setidaknya saya bisa memodifikasi template orang menjadi valid AMP. Contohnya pada blog saya yang beralamatkan di www.dimasyudha.net, saya berinisiatif untuk membuat template Kompi Indy milik Kang Adhy menjadi valid AMP. Meskipun masih banyak yang belum beres pada template tersebut, Alhamdulillah berkat bantuan kang Ismet, saya selalu mendapatkan ilmu baru dari beliau.

Kang Ismet adalah tipe orang yang senang berbagi dan membantu orang yang sedang kesusahan. Buktinya saya, ketika saya sudah dipusingkan dengan struktur kode AMP HTML, kang Ismet pun bersedia hadir untuk membantu saya dalam memecahkan tiap masalah yang saya hadapi ketika oprek-oprek template supaya bisa valid AMP. Dan kang Ismet sendiri selalu memberikan kesempatan saya untuk belajar oprek-oprek sendiri (tanpa melibatkan beliau), supaya tantangan tersebut bisa membuat saya menjadi lebih ahli dalam mengenal struktur kode AMP HTML.

Kang Ismet pun juga sering memberikan beberapa saran terkait blog saya, contohnya tulisan bahasa Arab pada blog saya. Karena saya sendiri tidak terlalu mengerti tentang struktur kode AMP HTML, maka saya pun cuek ketika menulis bahasa arab pada artikel saya yang membahas tentang agama Islam. Karena pada template valid AMP kalau kita menulis dengan menggunakan style="text-align: right;", maka akan menghasilkan eror. Maka dari itu, pada kesempatan kali ini saya akan memberikan rahasia terkait cara menulis huruf bahasa arab supaya bisa valid AMP. Di sini saya akan membagi class-nya menjadi dua bagian. Check it out, guys~

Untuk demo penulisan huruf arab pada blog valid AMP, klik tombol demo di bawah ini 😁

Demo

Opsi pertama (valid me quran).

Langkah pertama.

Tambahkan class di bawah;

.arab {
    font-size: 22px;
    line-height: 48px;
    font-family: me_quran,"KFGQPC Uthman Taha Naskh",KFGQPC_Naskh,"Traditional Arabic",Tahoma,sans-serif;
    font-weight: normal;
    text-align: right;
    direction: rtl;
}

Dan tempel pada style amp-custom.

Notes: Simpan CSS di atas pada template sobat, terserah Anda ingin memberikan nama class apa. Seusaikan font-size di atas sesuai kebutuhan Anda.

Langkah kedua.

Tambahkan CSS @font-face di bawah;

@font-face{
font-family:'me_quran';
src:url('https://kangismet.github.io/fonts/me_quran.eot');
src:url('https://kangismet.github.io/fonts/me_quran.eot?#iefix') format('embedded-opentype'),
url('https://kangismet.github.io/fonts/me_quran.ttf') format('truetype');
font-weight:normal;
font-style:normal
}

Dan tempel pada style amp-custom.

Langkah terakhir.

Untuk menulis huruf bahasa arab pada halaman postingan, ubah mode compose menjadi HTML dan tulis kode pemanggilnya seperti di bawah ini;

<div class="arab">
TULISKAN HURUF BAHASA ARAB ANDA DI SINI!</div>

Opsi kedua (ivalid me quran).

Langkah pertama.

Tambahkan class di bawah;

.arab {
    font-size: 22px;
    line-height: 48px;
    font-family: "KFGQPC Uthman Taha Naskh",KFGQPC_Naskh,"Traditional Arabic",Tahoma,sans-serif;
    font-weight: normal;
    text-align: right;
    direction: rtl;
}

<div class="arab">
TULISKAN HURUF BAHASA ARAB ANDA DI SINI!</div>

Kesimpulannya, kalau kita menggunakan class yang valid me quran, tulisan pun terlihat rapi diberbagai device termasuk smartphone smartphone.

That's all~