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:
- U+FE0E – selektor reprezentacji tekstowej,
- 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.