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


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

Popularity: 7% [?]

none. Catatan ini ditulis Minggu, 9 Oktober 2005 pada pukul 4:59 dalam Tag:. Anda dapat mengikuti respon semua catatan melalui RSS 2.0 feed. Anda dapat menulis komentar atau menulis trackback di situs anda sendiri.

Catatan Yang Mungkin Terkait

Tidak ada isian yang terkait |

Komentar

33 komentar untuk catatan 'Salin-Tempel Aksara Arab'

  1. #1
    gravatar adi wahyu
    Minggu, 9 Oktober 2005 @ 8:03
    Mozilla Firefox 1.0.7 Windows XP
    Mozilla Firefox 1.0.7 Windows XP

    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 achedy
    Minggu, 9 Oktober 2005 @ 8:49
    Mozilla Firefox 1.0 Windows 2000
    Mozilla Firefox 1.0 Windows 2000

    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 rendy
    Minggu, 9 Oktober 2005 @ 10:18
    Mozilla Firefox 1.0.6 Windows XP
    Mozilla Firefox 1.0.6 Windows XP

    oooo… ngerti.. ngerti…

  4. #4
    gravatar Priyadi
    Minggu, 9 Oktober 2005 @ 10:40
    Opera 6.32 SonyEricsson P910
    Opera 6.32 SonyEricsson P910

    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 jay
    Minggu, 9 Oktober 2005 @ 17:32
    Mozilla Firefox 1.0.7 Gentoo Linux
    Mozilla Firefox 1.0.7 Gentoo Linux

    #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 Jauhari
    Minggu, 9 Oktober 2005 @ 19:17
    Mozilla Firefox 1.0.7 Windows XP
    Mozilla Firefox 1.0.7 Windows XP

    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 abe poetra
    Minggu, 9 Oktober 2005 @ 19:31
    Mozilla Firefox 1.0.6 Windows 2000
    Mozilla Firefox 1.0.6 Windows 2000

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

  8. #8
    gravatar madyasiwi
    Minggu, 9 Oktober 2005 @ 22:03
    Mozilla Firefox 0.10.1 Linux
    Mozilla Firefox 0.10.1 Linux

    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 doeljoni
    Senin, 10 Oktober 2005 @ 8:09
    Safari 412 Mac OS X
    Safari 412 Mac OS X

    nice tips Jay

  10. #10
    gravatar ncus
    Senin, 10 Oktober 2005 @ 10:54
    Mozilla Firefox 1.0.6 Ubuntu Linux
    Mozilla Firefox 1.0.6 Ubuntu Linux

    EH sekarang font arabnya gak putus-putus lagi.

  11. #11
    gravatar jay
    Senin, 10 Oktober 2005 @ 10:57
    Mozilla Firefox 1.0.7 Gentoo Linux
    Mozilla Firefox 1.0.7 Gentoo Linux

    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 dedenf
    Senin, 10 Oktober 2005 @ 11:18
    Mozilla Firefox 1.0.1 Linux
    Mozilla Firefox 1.0.1 Linux

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

  13. #13
    gravatar tuxkeren
    Jumat, 14 Oktober 2005 @ 18:12
    Mozilla Firefox 1.0.7 Ubuntu Linux
    Mozilla Firefox 1.0.7 Ubuntu Linux

    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 Aqiel
    Selasa, 18 Oktober 2005 @ 13:43
    Internet Explorer 6.0 Windows XP
    Internet Explorer 6.0 Windows XP

    #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
    Sabtu, 22 Oktober 2005 @ 10:52
    Mozilla Firefox 1.0.7 Windows XP
    Mozilla Firefox 1.0.7 Windows XP

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

    :)

  16. #16
    gravatar ARS
    Sabtu, 10 Desember 2005 @ 3:33
    Mozilla Firefox 1.0.7 Windows XP
    Mozilla Firefox 1.0.7 Windows XP

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

    Btw, thx atas koreksiannya di blog saya:)

  17. #17
    gravatar Dadan Adrian Y. - دَدَنْ أَدْرِيْأَنْ يُوْنِيَرْ » Blog Archive » Menulis Arab
    Sabtu, 21 Januari 2006 @ 16:51
    WordPress 2.0
    WordPress 2.0

    [...] 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 DaiGa
    Sabtu, 11 Maret 2006 @ 20:42
    Internet Explorer 6.0 Windows 98
    Internet Explorer 6.0 Windows 98

    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 Ness
    Kamis, 13 April 2006 @ 18:50
    Opera 8.50 Windows XP
    Opera 8.50 Windows XP

    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 mus/Abu Abdirrahman
    Selasa, 9 Mei 2006 @ 4:07
    Internet Explorer 6.0 Windows XP
    Internet Explorer 6.0 Windows XP

    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 Aman
    Rabu, 21 Juni 2006 @ 15:01
    Mozilla Firefox 1.5.0.4 Linux
    Mozilla Firefox 1.5.0.4 Linux

    Fonts Arab untuk Linux

  22. #22
    gravatar Romo
    Kamis, 6 Juli 2006 @ 5:21
    Mozilla Firefox 1.0.7 Windows XP
    Mozilla Firefox 1.0.7 Windows XP

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

  23. #23
    gravatar baitussalam.com » Blog Archive » Salin-Tempel Aksara Arab
    Kamis, 13 Juli 2006 @ 10:42
    WordPress 2.0.3
    WordPress 2.0.3

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

  24. #24
    gravatar Nanda Firdausi
    Minggu, 23 Juli 2006 @ 17:04
    Mozilla Firefox 1.5.0.4 Ubuntu Linux
    Mozilla Firefox 1.5.0.4 Ubuntu Linux

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

  25. #25
    gravatar dyon
    Selasa, 7 November 2006 @ 11:52
    Internet Explorer 6.0 Windows XP
    Internet Explorer 6.0 Windows XP

    gimana kalau huruf arab itu dipaskan di keyboard
    soalnya biar mudah

  26. #26
    gravatar aa
    Rabu, 21 Maret 2007 @ 15:30
    Mozilla Firefox 1.5.0.10 Windows XP
    Mozilla Firefox 1.5.0.10 Windows XP

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

  27. #27
    gravatar zainal
    Senin, 2 April 2007 @ 10:17
    Mozilla Firefox 0.10.1 Linux
    Mozilla Firefox 0.10.1 Linux

    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 newali
    Senin, 1 Oktober 2007 @ 15:57
    Mozilla Firefox 2.0.0.2 Windows XP
    Mozilla Firefox 2.0.0.2 Windows XP

    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 Danang Cipto Wahyuhono
    Selasa, 11 Desember 2007 @ 8:29
    Internet Explorer 6.0 Windows XP
    Internet Explorer 6.0 Windows XP

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

  30. #30
    gravatar Ali Santoso
    Rabu, 3 September 2008 @ 7:09
    Mozilla Firefox 2.0.0.2 Windows XP
    Mozilla Firefox 2.0.0.2 Windows XP

    Saya butuh font andalus arabic. Bisa tolong.

  31. #31
    gravatar Menulis Arab | Dadan Adrian Y.
    Jumat, 12 September 2008 @ 9:30
    WordPress 2.6.2
    WordPress 2.6.2

    [...] 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 aagun2006
    Jumat, 27 Maret 2009 @ 16:45
    Mozilla Firefox 3.0.7 Windows XP
    Mozilla Firefox 3.0.7 Windows XP

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

  33. #33
    gravatar mr. imron
    Kamis, 1 Juli 2010 @ 9:18
    Mozilla Firefox 3.5.5 Windows XP
    Mozilla Firefox 3.5.5 Windows XP

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

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.