Salin-Tempel Aksara Arab

Minggu, 9 Oktober 2005M
05 Ramadhan 1426H

Cak Amal protes pada tulisan saya tentang Zaitun karena aksara Arabnya susah dibaca. Memang susah karena kita terbiasa membaca aksara Arab berharakat pada Quran yang sangat rapi dicetak, baik kualitas kertasnya maupun gaya dan bentuk-bentuk aksaranya. Jadi saya mencari-cari bagaimana aksara Arab ditampilkan di browser supaya enak dibaca. Penjelasan berikut ini bukan berisi bagaimana cara menulis aksara Arab dengan keyboard Latin ataupun emulasi keyboard Arabic, tapi hanya tip menampilkan aksara Arab yang dikutip dari dokumen lain ke dalam halaman web/blog.

Petikan Quran yang saya pakai adalah hasil salin-tempel atau copy-paste dari libquran buatan MDAMT atau dari situs Holy Quran buatan Ismail Fahmi.

Sebagai kutipan, secara semantik saya format kutipan dalam tag HTML <blockquote>.

Mengikuti format blockquote menghasilkan aksara Arab yang terlalu kecil ukurannya, jadi saya format secara visual dengan menggunakan tag HTML <big>. Format akhir menjadi:

<blockquote>
<big>aksara Arab hasil salin-tempel</big>
Terjemahan dan keterangan
</blockquote>

Format lain yang memungkinkan, bahkan lebih tepat adalah dengan span dan :lang pseudo-selector, tapi tidak saya pakai sebab selain tak banyak melakukan salin-tempel aksara Arab (apalagi inline dalam paragraf) juga karena menulis tag <big> lebih sederhana dibandingkan dengan menulis <span lang="ar" xml:lang="ar">.

Masalah setepatnya adalah saat penampilan di browser, yaitu font mana yang cocok dan bagus supaya enak dibaca seperlunya. Dari hasil pencarian pada koleksi font-font yang ada didapatkan font-font TTF berikut memiliki kandungan glyph Arab, yaitu Andalus, Arial, Courier New, Lucida Bright, Lucida Sans, Tahoma dan Times New Roman.

Dengan menggunakan OpenOffice 1.1.5 saya cobakan kutipkan aksara Arab dengan beberapa font tersebut. Dari pengamatan pribadi yang bagus adalah dengan menggunakan Arial dan Times New Roman, sedangkan font lain terlihat kurang elegan dibandingkan dengan cetakan aksara Arab yang biasa kita lihat di Quran.

Aksara Arab dengan font Arial
Aksara Arab dengan font Times New Roman

Selain dari font-font di atas saya coba menggunakan font berlisensi GPL dari proyek Arabeyes, ada beberapa jenis font namun kurang elegan di mata saya dan terlalu dekoratif. Font lain yang bagus saya temukan dari SIL International berlisensi Freeware, ada dua font bernama Scheherazade dan Lateef (Scheherazade adalah penulisan Syahrazad menurut orang Barat, seorang tokoh inti dalam cerita klasik 1001 Malam).

Aksara Arab dengan font Scheherazade
Aksara Arab dengan font Lateef

Jadi CSS untuk aksara Arab tersebut menjadi:

blockquote big {
        font-family: Scheherazade, Lateef, Arial, 'Times New Roman', serif;
        font-size: 1.5em;
        line-height: 1.5em;
        }

Contoh tangkapan OpenOffice di atas (Ayat Kursi, Al-Baqarah 2:255) akan tampil di web dengan menggunakan Firefox 1.0.7 terlihat sebagai berikut:

1. Hasil tangkapan layar Firefox
Arabic font Scheherazade dalam Firefox

2. Hasil di browser anda


اللّهُ لاَ إِلَهَ إِلاَّ هُوَ الْحَيُّ الْقَيُّومُ لاَ تَأْخُذُهُ سِنَةٌ وَلاَ نَوْمٌ لَّهُ مَا فِي السَّمَاوَاتِ وَمَا فِي الأَرْضِ مَن ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلاَّ بِإِذْنِهِ يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ وَلاَ يُحِيطُونَ بِشَيْءٍ مِّنْ عِلْمِهِ إِلاَّ بِمَا شَاء وَسِعَ كُرْسِيُّهُ السَّمَاوَاتِ وَالأَرْضَ وَلاَ يَؤُودُهُ حِفْظُهُمَا وَهُوَ الْعَلِيُّ الْعَظِيمُ

Komentar

38 komentar untuk catatan 'Salin-Tempel Aksara Arab'

  1. #1
    gravatar

    Kenapa huruf-hurufnya terpisah ya? Di Firefox huruf ‘ha’ dengan ‘lam’ pada tulisan Allah dan Ilaah terpisah. Dan terjadi juga pada kata-kata lain dimana hurufnya terpisah. Seharusnya dengan adanya font times new roman dan arial, aksara arab tersebut dapat terlihat dengan baik.

    Salah dimana ya?

  2. #2
    gravatar

    Saya pernah juga memmbuat tulisan arab, baik yang unicode, maupun yang font seperti dalam databasenya mas Ismail Fahmi – nggak tahu namanya -.

    Firefox tidak bisa membedakan mana huruf dan mana tanda baca, sehingga ketika huruf dikasih tanda baca maka ia nampak menjadi terpisah denagn huruf di depannya. Tetapi jika kita tidak menyertakan tanda baca, maka sambungan huruf akan menyambung denagn normal.

    Pengalaman saya, tulisan arab dengan tanda baca akan tampil secara sempurna di browser IE (demikian juga dengan font-font arab bertanda baca yang ditulis mas Jay diatas). Di konqueror, juga terbaca dengan baik, tapi saya sering mendapati huruf terakhirnya selalu berpindah ke sebelah kanan.

  3. #3
    gravatar

    oooo… ngerti.. ngerti…

  4. #4
    gravatar

    gimana kalo pake [blockquote xml:lang='ar']…[/blockquote]?

    kecuali kalau di dalam blockquote ada bahasa lain, maka pakai [span xml:lang='ar'] itu redundant

    btw, atribut lang itu kalo gak salah ilegal di XHTML

  5. #5
    gravatar

    #4: bisa juga seperti itu, berarti harus membuat CSS blockquote:lang(ar) {}. dari FAQ W3C tentang i18n pseudo selector lang ini tidak disupport oleh Internet Explorer.

  6. #6
    gravatar

    Di tempat saya juga, beberapa huruf terpisah, padahal kita menggunakan Firefox juga dan mengenai versi FF bisa dilihat di plugins Browser Detector saya:)

    so what’s wrong?

  7. #7
    gravatar

    Om Jay..
    padahal Abe pake firefox jugak, kok hurufnyah putus-putus yah Om?

  8. #8
    gravatar

    Jadi solusinya barangkali:

    - Gunakan FireFox terakhir (dengan catatan kalau sudah di-fix bug-nya), atau pasang penanda “best viewed with IE“:P

    - Hilangkan fata, kasra, dan doma-nya. Lebih sesuai dengan aslinya, tapi jadi sulit dibaca oleh yang tidak biasa berbahasa arab.

    - Fallback to PNG. Ngomong-ngomong, screen-capture-nya masih bisa di optimasi lagi. Gunakan format PNG paletted/indexed (instead of RGB/RGBA) untuk mengurangi ukuran jadi sepertiganya (25kb jadi 8kb). Bisa gunakan code berikut (Fu-Script) untuk GIMP.

    (define (script-fu-opt-idx-gray-web image drawable)
    	(gimp-image-undo-group-start image)
    
    	(if (> (car (gimp-image-get-layers image)) 1)
    		(gimp-image-flatten image)
    	)
    	
    	(gimp-image-convert-grayscale image)
    	(gimp-image-convert-indexed
    		image
    		NO-DITHER
    		WEB-PALETTE
    		0 ; Ignored. Number of colors.
    		0 ; No dither
    		1 ; Remove unused colors from palette
    		"" ; Ignored. Custom palette name.
    	)
    	(gimp-displays-flush)
    	
    	(gimp-image-undo-group-end image)
    )
    
    (script-fu-register
    	"script-fu-opt-idx-gray-web"
    	_"/Script-Fu/Utils/Convert to Indexed Gray"
    	"Convert image to indexed gray format using web palette"
    	"madyasiwi"
    	"madyasiwi"
    	"2005/10/09"
    	"RGBA RGB"
    	SF-IMAGE "Image" 0
    	SF-DRAWABLE "drawable" 0
    )
    
    
  9. #9
    gravatar

    nice tips Jay

  10. #10
    gravatar

    EH sekarang font arabnya gak putus-putus lagi.

  11. #11
    gravatar

    soal tulisan terputus-putus kurang tahu juga nih, soalnya dengan font yang sama (Arial dan Times New Roman) penampakannya berbeda antara Firefox dengan OpenOffice. mungkin firefoxnya masih ada bug

    #8: weh, sampe bikin script-fu buat GIMP. thanks, nanti dicoba scriptnya.

  12. #12
    gravatar

    thx for the infos jay
    #8 tengkyu juga script GIMPnya mungkin bisa diaplikasikan buat yang lain.

  13. #13
    gravatar

    Wah saya perlu belajar lagi tentang cara menulis arab di komputer. Masak orang muslim nggak bisa menulis arab di komputer. kan Barabe jadinya….

  14. #14
    gravatar

    #8 Makaci ya sekripnyah..
    #13 Hiks.. lebih lumayan dikaw

    Wah saya perlu belajar lagi tentang cara menulis arab di komputer. Masak orang muslim nggak bisa menulis arab di komputer. kan Barabe jadinya….

  15. #15
    gravatar

    :)
    lilis jadi pengen dech bisa nulis seperti itu juga….

    :)

  16. #16
    gravatar

    Yang bagus, tetep aja Traditional Arabic. Kalau Times New Roman/Arial masih terkesan kaku ;)

    Btw, thx atas koreksiannya di blog saya:)

  17. #17
    gravatar

    [...] Kategori: Diriku | Setelah saya membaca tulisan Jay tentang Salin-Tempel Aksara Arab, saya iseng coba-coba menulis nama saya dalam huruf Arab yang hasilnya bisa dilihat di title blog saya ini. Tulisan nama saya itu saya dapatkan dari hasil mengcopy-paste huruf-huruf Arab yang sesuai dan hasilnya jadi seperti ini: دَدَنْ أَدْرِيْأَنْ يُوْنِيَرْ [...]

  18. #18
    gravatar

    gmn cara bikinnya sih?blm ngerti, plis bantu, mo bikin skripsi tapi buat nampilin ato nulis arab biar muncul di browser gimana?pake software khusus ga?

  19. #19
    gravatar

    wah bagus jg nih topik ttg bhs arabnya
    jadi tertarik nih, ..hihihi

    btw, ada gak kawan2 yg punya file/doc yg dlm bhs arabnya
    berikut terjemahan dlm bhs indoensianya

    buat ngetes n belajar terjemahan
    hehehe

    tq

  20. #20
    gravatar

    ana pingin juga ni! gimana ya caranya biar tulisan bisa tampil lebih rapi? sudah ada ga sih key board khusus arab yang dijual khususnya di jogja?

  21. #21
    gravatar

    Fonts Arab untuk Linux

  22. #22
    gravatar

    bagi yang punya koleksi font-font arab, tolong dong kirimin aku di:
    myr_73137@yahoo.co.id
    tuengkyu syukron

  23. #23
    gravatar

    [...] http://yulian.firdaus.or.id/2005/10/09/salin-tempel-aksara-arab/ [...]

  24. #24
    gravatar

    #1 #6 #7 coba install language-support-ar supaya tampilan di firefox ga putus2

  25. #25
    gravatar

    gimana kalau huruf arab itu dipaskan di keyboard
    soalnya biar mudah

  26. #26
    gravatar

    Kalau memang belum ada unicode silahkan berkunjung ke web http://www.ikhwan-interaktif.com disitu ada virtual arabic keyboard

  27. #27
    gravatar

    Ass.mas, gmn cara buat lafadz bismillah buat blogku.(yg HTML) biar bisa bisa langsung aku copy buat blogku nnti.
    terima kasih atas bantuannya
    wassalam

  28. #28
    gravatar

    tolong kirimi saya artikel atau makalah yang berbahasa arab lengkap dengan alamat situsnya atau bagaimana caranya membuka situs yang berbahasa arab . atas perhatiannya terimah kasih

  29. #29
    gravatar

    teman-teman ada yang tau program virtual keyboard utk win xp gak?, jadi tampilannya bisa ada di layar? jazakallahu khoir

  30. #30
    gravatar

    Saya butuh font andalus arabic. Bisa tolong.

  31. #31
    gravatar

    [...] saya membaca tulisan Jay tentang Salin-Tempel Aksara Arab, saya iseng coba-coba menulis nama saya dalam huruf Arab yang hasilnya bisa dilihat di title blog [...]

  32. #32
    gravatar

    aku kok masih bingung kak udah ngikutin yang di tutorkan. pas copas hurup arab kok jadina tanda tanya ?????????

  33. #33
    gravatar

    pada teman2 virtual yang terhormat, saya amat membutuhkan font arab yang putus2. barang kali ada yamg punya informasinya

  34. #34
    gravatar

    Alhamdulillah…… akhirnya masih ada juga blog yang seperti ini. sangat bermanfaat

  35. #35
    gravatar

    mas brow tabrani,, bleh minta source kode bwat nyisipin tulisn arab d php atw html gk??
    kalaw ad n bleh di mnta… tolng kirm ke email in ya. makasih….

    a09d09@gmail.com

  36. #36
    gravatar

    asslmkm,sy ingin bisa mengetik tulisan arab putus-putus …barangkali ada yg bs caranya…trims

  37. #37
    gravatar

    kpd teman2 yang terhormat, saya amat membutuhkan font arab yang putus2. barang kali ada yamg punya informasinya

  38. #38
    gravatar

    assalamualaikum wr.wb
    ana udah tau bagaimana cara nulis arab di html , permasalahannya adalah ketika gaya tulisan arabnya ane rubah ke gaya yang lain , do firefox g berubah,,,tulisan arabnya masih tetep aja ky gitu,,,kalo ada yang tau tolong jawab ya….

    assalamualaikum wr.wb

Tulis komentar

XHTML: Anda dapat menggunakan tag-tag berikut: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Untuk menampilkan gambar/icon avatar anda silakan daftarkan alamat email di Gravatar.