Wyświetlanie symboli Unicode w HTML

89

Chcę po prostu wyświetlić symbole zaznaczenia (✔) i krzyżyka (✘) na stronie HTML, ale pojawia się jako ramka lub goop - - oczywiście ma to związek z kodowaniem.

Ustawiłem metatag tak, aby pokazywał utf-8, ale oczywiście czegoś mi brakuje.

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

Edycja / rozwiązanie: Na podstawie komentarzy, używając FireBug, stwierdziłem, że nagłówki przekazywane przez moją stronę to w rzeczywistości „Content-Type: text / html”, a nie UTF-8. Patrząc na format pliku za pomocą Notepad ++, pokazałem, że mój plik został sformatowany jako „UTF-8 bez BOM”. Zmieniając to tylko na UTF-8, symbole są teraz wyświetlane poprawnie ... ale firebug nadal wydaje się wskazywać ten sam typ zawartości.

Peter Craig
źródło

Odpowiedzi:

56

Powinieneś upewnić się, że nagłówki serwera HTTP są poprawne.

W szczególności nagłówek:

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

powinien być obecny.

Metatag jest ignorowany przez przeglądarki, jeśli obecny jest nagłówek HTTP.

Upewnij się również, że plik jest rzeczywiście zakodowany jako UTF-8 przed wyświetleniem, sprawdź / wypróbuj następujące rozwiązania:

  • Upewnij się, że Twój edytor zapisuje go jako UTF-8.
  • Upewnij się, że serwer FTP lub inny program do przesyłania plików nie psuje pliku.
  • Spróbuj z encjami zakodowanymi w HTML, takimi jak &#uuu;.
  • Aby być naprawdę pewnym, wykonaj zrzut heksowy pliku i wyglądaj jak znak, dla ✔ powinien to być E2 9C 94.

Uwaga: jeśli używasz znaku Unicode, dla którego twój system nie może znaleźć glifu (bez czcionki z tym znakiem), twoja przeglądarka powinna wyświetlić znak zapytania lub jakiś blok podobny do symbolu. Ale jeśli widzisz wiele znaków łacińskich, tak jak widzisz, oznacza to problem z kodowaniem.


źródło
Właściwie metatag nie jest ignorowany, ale pierwszeństwo ma nagłówek HTTP. Dzięki Konradowi za tę precyzję.
8
Zauważ, że aby użyć znaku Unicode we contentwłaściwości ::beforeselektora CSS , należałoby użyć notacji z ukośnikiem odwrotnym. np .: „\ 2713” zamiast „& # 2713”.
Fabien Snauwaert
18

Wiem, że odpowiedź została już zaakceptowana, ale chciałem zwrócić uwagę na kilka rzeczy.

Ustawienie content-typei charsetjest oczywiście dobrą praktyką, robienie tego na serwerze jest znacznie lepsze, ponieważ zapewnia spójność w całej aplikacji.

Jednak użyłbym UTF-8tylko wtedy, gdy język mojej aplikacji używa wielu znaków, które są dostępne tylko w zestawie UTF-8znaków. Jeśli chcesz wyświetlić znak lub symbol Unicode w jednym z przypadków, możesz to zrobić bez zmiany charsetstrony.

HTMLrenderery zawsze były w stanie wyświetlać symbole, które nie są częścią zestawu znaków kodowania strony, o ile wspominasz o symbolu w jego numeric character reference (NCR). Brzmi dziwnie, ale to prawda.

Tak więc, nawet jeśli Twój htmlma nagłówek stwierdzający, że ma kodowanie ansilub którykolwiek z isozestawów znaków, możesz wyświetlić znacznik wyboru, używając odwołania do znaku HTML, w systemie dziesiętnym - & # 10003; lub szesnastkowo - & # x2713;

Dlatego trochę trudno jest zrozumieć, dlaczego napotykasz ten problem na swoich stronach. Czy możesz sprawdzić, czy wartość NCR jest poprawna, to jest dobre odniesienie http://www.fileformat.info/info/unicode/char/2713/index.htm

Akshay
źródło
6
„Jednakże użyłbym UTF-8 tylko wtedy, gdy język mojej aplikacji używa wielu znaków, które są dostępne tylko w zestawie znaków UTF-8” Dlaczego? Jaka jest wada zmiany?
dumbledad
3
@dumbledad: Bardzo dobre pytanie, wydaje mi się, że moje własne nastawienie przesłaniało moją odpowiedź. Chodziło mi o to, że jeśli cała Twoja aplikacja jest już inna niż UTF-8, zmiana jej obrazu aplikacji dla jednej strony może być zbyt dużym nakładem pracy. Ponadto, jeśli twój język programowania i zawartość nie potrzebują znaków utf-8, możesz przypadkowo skopiować i wkleić niepotrzebny znak, z którym twój edytor będzie w porządku (ponieważ jest w trybie utf-8), ale kod zawiedzie podczas wykonywania. Powiedziawszy to, jeśli możesz, zaktualizuj kodowanie i zestaw znaków
Akshay
6

Upewnij się, że faktycznie zapisujesz plik jako UTF-8, alternatywnie użyj encji HTML ( &#nnn;) dla znaków specjalnych.

Guffa
źródło
Wygląda na to, że nie ma elementu HTML dla ✔ lub czy go przegapiłem? Jak "właściwie" zapisujesz plik jako UTF-8 i jak możesz to sprawdzić?
Peter Craig
@Peter: używając przyzwoitego edytora. Większość edytorów tekstu ma opcję w oknie dialogowym „Zapisz jako”, aby określić kodowanie pliku, lub ma inną opcję ukrytą gdzieś w swoim menu. Vim używa tego fileencodingustawienia.
Konrad Rudolph
8
@Peter, możesz odwołać się do dowolnego znaku za pomocą jego kodu. Wypróbuj & # x2714; za kleszcza.
Dan Dyer
zapisz jako utf-8. ciekawa koncepcja. działa dobrze, jeśli tworzysz statyczne strony HTML. ale ... co z dynamicznymi stronami internetowymi? te unicode / utf-8 / wide character są dla mnie naprawdę dość zagmatwane. mój kod zaplecza to perl. nagłówek http jest prawidłowo ustawiony, podobnie jak nagłówek html. W3C Internationalization Checker potwierdza, że ​​mam dokument ustawiony na utf-8. czy CaSinG ma znaczenie? wreszcie, co z polami do wprowadzania tekstu? nadal dostaję goop! :(
Jarett Lloyd,
uzupełnienie do poprzedniego komentarza: moja baza danych pokazuje, że dane zostały wprowadzone poprawnie, a znaki są wyświetlane poprawnie. więc nie problem z bazą danych. mój skrypt perla (a raczej edytor) jest ustawiony na zapisywanie skryptów jako utf-8. mój serwer, apache2, jestem całkiem pewien, że nie przeszkadza lub jest ustawiony prawidłowo. wszystko to powiedziawszy, nadal nie jestem pewien, dlaczego znaki są goop. ugh. musi być lepszy sposób
Jarett Lloyd
5

W przeciwieństwie do propozycji Nicolasa, metatag nie jest ignorowany przez przeglądarki. Jednak Content-Typenagłówek HTTP ma zawsze pierwszeństwo przed obecnością metaznacznika w dokumencie.

Dlatego upewnij się, że wysyłasz poprawne kodowanie przez nagłówek HTTP lub w ogóle nie wysyłasz tego nagłówka HTTP (niezalecane). metaTag jest głównie awaryjna opcja dla lokalnych dokumentów, które nie są przesyłane za pośrednictwem ruchu HTTP.

Używanie encji HTML również powinno być traktowane jako obejście - to obejście prawdziwego problemu na palcach. Prawidłowa konfiguracja serwera WWW zapobiega wielu niedogodnościom.

Konrad Rudolph
źródło
0

Myślę, że jest to problem z plikiem, po prostu zapisałeś plik w kodowaniu 1-bajtowym, takim jak latin-1. Wygoogluj swój edytor i jak ustawić pliki na utf-8.

Zastanawiam się, dlaczego istnieją edytory, które nie domyślnie używają utf-8.

Kugel
źródło