Menampilkan simbol unicode dalam HTML

89

Saya hanya ingin menampilkan tanda centang (✔) dan tanda silang (✘) di halaman HTML tetapi muncul sebagai kotak atau goop ✠”- jelas ada hubungannya dengan pengkodean.

Saya telah menyetel tag meta untuk menampilkan utf-8 tetapi jelas saya melewatkan sesuatu.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Edit / Solusi: Dari komentar yang dibuat, menggunakan FireBug saya menemukan header yang dilewatkan oleh halaman saya sebenarnya adalah "Content-Type: text / html" dan bukan UTF-8. Melihat format file menggunakan Notepad ++ menunjukkan file saya diformat sebagai "UTF-8 tanpa BOM". Mengubah ini menjadi UTF-8 saja, simbol sekarang ditampilkan dengan benar ... tetapi firebug tampaknya masih menunjukkan jenis konten yang sama.

html  unicode 
— Peter Craig
sumber

Jawaban:

56

Anda harus memastikan header server HTTP sudah benar.

Secara khusus, tajuk:

Content-Type: text/html; charset=utf-8

harus hadir.

Tag meta diabaikan oleh browser jika ada header HTTP.

Pastikan juga bahwa file Anda benar-benar dienkode sebagai UTF-8 sebelum menyajikannya, periksa / coba hal berikut:

  • Pastikan editor Anda menyimpannya sebagai UTF-8.
  • Pastikan FTP Anda atau program transfer file apa pun tidak mengacaukan file tersebut.
  • Coba dengan entitas yang dikodekan HTML, seperti &#uuu;.
  • Untuk benar-benar yakin, hexdump file tersebut dan lihat sebagai karakter, untuk ✔, itu harus E2 9C 94.

Catatan: Jika Anda menggunakan karakter unicode yang tidak dapat ditemukan mesin terbangnya oleh sistem Anda (tidak ada font dengan karakter itu), browser Anda akan menampilkan tanda tanya atau simbol seperti blok. Tetapi jika Anda melihat beberapa karakter romawi seperti yang Anda lakukan, ini menandakan masalah pengkodean.

Sebenarnya, tag meta tidak diabaikan, tetapi header HTTP lebih diutamakan. Terima kasih Konrad untuk ketepatannya.
8
Perhatikan bahwa untuk menggunakan karakter unicode dalam contentproperti ::beforepemilih CSS , seseorang perlu menggunakan notasi garis miring terbalik. misal: '\ 2713' bukannya '& # 2713'.
— Fabien Snauwaert
18

Saya tahu sebuah jawaban telah diterima, tetapi ingin menunjukkan beberapa hal.

Menyetel content-typedan charsetjelas merupakan praktik yang baik, melakukannya di server jauh lebih baik, karena ini memastikan konsistensi di seluruh aplikasi Anda.

Namun, saya UTF-8hanya akan menggunakan jika bahasa aplikasi saya menggunakan banyak karakter yang hanya tersedia di UTF-8charset. Jika Anda ingin menampilkan karakter atau simbol unicode dalam salah satu kasus, Anda dapat melakukannya tanpa mengubah charsethalaman Anda.

HTMLpenyaji selalu dapat menampilkan simbol yang bukan bagian dari kumpulan karakter encoding halaman, selama Anda menyebutkan simbol di dalamnya numeric character reference (NCR). Kedengarannya aneh tapi itu benar.

Jadi, meskipun Anda htmlmemiliki tajuk yang menyatakan memiliki pengkodean ansiatau salah satu isorangkaian karakter, Anda dapat menampilkan tanda centang dengan menggunakan referensi karakter html, dalam desimal - & # 10003; atau dalam hex - & # x2713;

Jadi agak sulit untuk memahami mengapa Anda menghadapi masalah ini di halaman Anda. Dapatkah Anda memeriksa apakah nilai NCR sudah benar, ini adalah referensi yang baik http://www.fileformat.info/info/unicode/char/2713/index.htm

— Akshay
sumber
6
"Namun, saya akan menggunakan UTF-8 hanya jika bahasa aplikasi saya menggunakan banyak karakter yang hanya tersedia dalam rangkaian karakter UTF-8" Mengapa? Apa kerugiannya dalam beralih?
— dumbledad
3
@dumbledad: Pertanyaan yang sangat bagus, saya rasa saya membiarkan bias saya sendiri mengaburkan jawaban saya. Yang ingin saya katakan adalah jika seluruh aplikasi Anda sudah non utf-8, mengubahnya menjadi vide aplikasi untuk satu halaman mungkin terlalu banyak pekerjaan. Selain itu, jika bahasa pemrograman dan konten Anda tidak memerlukan karakter utf-8, Anda dapat secara tidak sengaja menyalin dan menempelkan karakter sampah yang editor Anda akan baik-baik saja (karena dalam mode utf-8), tetapi kode akan gagal selama eksekusi. Karena itu, bila Anda bisa, perbarui encoding dan karakter Anda
— Akshay
6

Pastikan Anda benar-benar menyimpan file sebagai UTF-8, atau gunakan entitas HTML ( &#nnn;) untuk karakter khusus.

— Guffa
sumber
Tampaknya tidak ada entitas HTML untuk ✔ atau saya melewatkannya? Bagaimana Anda "sebenarnya" menyimpan file sebagai UTF-8 dan bagaimana Anda bisa memeriksanya?
— Peter Craig
@ Peter: dengan menggunakan editor yang layak. Sebagian besar editor teks memiliki opsi dalam dialog "simpan sebagai" untuk menentukan pengkodean file, atau mereka memiliki opsi lain yang tersembunyi di suatu tempat di menu mereka. Vim menggunakan fileencodingpengaturan tersebut.
— Konrad Rudolph
8
@Peter, Anda dapat merujuk ke karakter apa pun dengan kodenya. Coba & # x2714; untuk centang.
— Dan Dyer
simpan sebagai utf-8. konsep yang menarik. berfungsi dengan baik jika Anda membuat halaman HTML statis. tapi ... bagaimana dengan halaman web dinamis? hal-hal dengan karakter unicode / utf-8 / wide ini benar-benar cukup membingungkan saya. kode backend saya adalah perl. header http diatur dengan benar dan begitu juga header html. Pemeriksa Internasionalisasi W3C mengonfirmasi bahwa saya telah menyetel dokumen ke utf-8. apakah CaSinG penting? akhirnya, bagaimana dengan kotak input teks? saya masih goop! :(
— Jarett Lloyd
tambahan untuk komentar sebelumnya: database saya menunjukkan data telah dimasukkan dengan benar, dan karakter ditampilkan dengan benar. jadi, bukan masalah database. skrip perl saya (atau lebih tepatnya, editor) diatur untuk menyimpan skrip sebagai utf-8. server saya, apache2, saya cukup yakin tidak mengganggu, atau disetel dengan benar. semua ini dikatakan, masih tidak yakin mengapa karakter itu goop. ugh. harus ada cara yang lebih baik
— Jarett Lloyd
5

Tidak seperti yang diusulkan oleh Nicolas, metatag sebenarnya tidak diabaikan oleh browser. Namun, Content-Typeheader HTTP selalu diutamakan daripada keberadaan metatag di dokumen.

Jadi, pastikan Anda mengirim enkode yang benar melalui header HTTP, atau jangan mengirim header HTTP ini sama sekali (tidak disarankan). Itumeta tag terutama pilihan fallback untuk dokumen lokal yang tidak dikirim melalui lalu lintas HTTP.

Menggunakan entitas HTML juga harus dianggap sebagai solusi - yaitu mengatasi masalah sebenarnya. Mengonfigurasi server web dengan benar mencegah banyak gangguan.

— Konrad Rudolph
sumber
0

Saya pikir ini adalah masalah file, Anda cukup menyimpan file Anda dalam pengkodean 1-byte seperti latin-1. Google up editor Anda dan cara mengatur file ke utf-8.

Saya bertanya-tanya mengapa ada editor yang tidak menggunakan utf-8 secara default.

— Kugel
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.