Jak wymusić (lub wyłączyć) zamianę encji na emoji?

Jeżeli macie słabość do korzystania z encji dostępnych w HTML jako alternatywy dla niektórych ikon to być może zauważyliście, że ich wygląd jest czasem niespójny – w przeglądarce na komputerze wszystko wygląda normalnie, podczas gdy Safari na iOS namiętnie zamienia Wasze encje na emoji. Warto wiedzieć, że można sprawić by uspójnić wygląd encji, a wszystko dzięki możliwościom oferowanym przez Unicode.

Skąd w ogóle bierze się ten problem?

Odpowiedź krótka: od używania sprzętu z logiem nadgryzionego jabłka 😉

Odpowiedź dłuższa: Otóż niektóre znaki mają dwie reprezentacje – tekstową oraz emoji. W zależności od tego z jakiej reprezentacji domyślnie korzysta dana przeglądarka, widzimy efekty w postaci normalnego symbolu lub emoji.

Rozwiązanie problemu

Na szczęście Unicode w wersji 6.1 wprowadził specjalne symbole, które są selektorami reprezentacji – jest to grupa 16 symboli od U+FE00 do U+FE0F. Umieszczając jeden z tych symboli po naszej encji uzyskujemy konkretną reprezentację symbolu. Z tych 16 selektorów reprezentacji nas najbardziej interesują dwa:

  1. U+FE0E – selektor reprezentacji tekstowej,
  2. U+FE0F – selektor reprezentacji emoji

Pierwszy wymusi pokazywanie normalnego symbolu, a drugi wymusi pokazywanie symbolu w postaci emoji (o ile takowe jest dostępne).

Przykłady

Zatem jeżeli korzystamy z encji ♥ to pojawi się ona zależnie od używanej przeglądarki albo w formie serca albo jako emoji. Aby wymusić pokazywanie zawsze ikonki serca nie będącej emoji musimy zastosować zapis:

♥︎ // ♥︎

Natomiast gdy będziemy chcieli zawsze pokazywać emoji o kształcie serca, należy zastosować zapis:

♥️ // ♥️

 

Uważaj na rozmiar

W niektórych przypadkach emoji nie mogą być zbyt duże – np. na Chrome maksymalny rozmiar emoji daje font-size ustawiony na 128px – powyżej tego rozmiaru emoji w ogóle znikają, natomiast gdy jest mało miejsca w kontenerze, może nastąpić konwersja emoji do zwykłego znaku nawet przy mniejszych rozmiarach.

Share on Facebook0Tweet about this on TwitterShare on Google+0Email this to someonePrint this page