fbpx
Kategorie
Publicystyka

Emotikonki, Unicode, kodowanie znaków, bezpieczeństwo, 😷🦠

Dziś temat lżejszy, bo cięższe i tak wrócą same. Na tapetę bierzemy małe obrazeczki wstawiane do wypowiedzi pisemnych, nazywane emoji (są z Japończykami od roku 1999) albo emotikonkami (w formie graficznej są z całą resztą świata od… około 1996 roku, licząc od premiery komunikatora ICQ). Puryści oburzą się, że to przecież co innego bo etymologia, tradycja i nie o take ikone walczyliśmy, ale cóż, dziś emotka to emotka.

Otóż, jak informuje serwis emojipedia.org, światową karierę robią teraz ikonki 😷 (twarz w maseczce ochronnej) oraz 🦠 (mikrob) – wywołane oczywiście epidemią koronawirusa wywołującego chorobę COVID-19. Poniżej wykres oglądalności stron 😷, 🦠 oraz 🤕 w Emojipedii.

Uwaga!

Na niektórych urządzeniach (zwłaszcza starszych telefonach) możesz doświadczyć problemów w czytaniu tego tekstu, wynikających z braku obsługi nowszych emotikonek. W takiej sytuacji przesiądź się na komputer z aktualnym Firefoksem lub Chrome

O popularności emotikonek/emoji nie trzeba nikogo przekonywać – ociekają nimi Twitter, Instagram i reszta sieci społecznościowych. Ba, nawet babcie 👵, które kilka(naście) lat temu uczyły się obsługi SMS-ów 📱📜, teraz bez wahania uzupełniają je okolicznościowym ikonkami uśmieszków 🥰 czy zwierzątek 🐈.

Nie będę rozpisywał się o socjologicznym aspekcie przekazywania emocji kanałami tekstowymi, to w końcu blog technologiczny. Zastanówmy się raczej, ile mamy różnych emoji. Otóż w świeżutkim (marzec 2020) standardzie Emoji 13, nieprzypadkowo skorelowanym z Unicode 13, mamy aż 3304 unikalne obrazki. Tak duża liczba wynika po części z faktu, że wiele ikonek występuje w sześciu kopiach.

Oczywiście znaczna większość to nadal unikalne obrazeczki a każdy inny

Wiele osób może być zaskoczonych, że w różnych programach i systemach operacyjnych mamy dostęp do różnych zestawów ikonek, wyglądających inaczej lecz bazujących na tym samym tekstowym opisie. Liczba zestawów powoli maleje, bo nie wszyscy twórcy dodają nowe cechy i obrazki z kolejnych edycji standardu. Wciąż jednak można spotkać kilkanaście zestawów, oto przykłady naszych dzisiejszych emoji w siedmiu najpopularniejszych ujęciach:

A tak prezentuje się przykładowy zestaw ikonek z Whatsappa (tutaj duża wersja, uwaga bo ma 10 MB)

Bardzo duża swoboda w kreacji obrazków prowadzi czasem do zaskakujących obserwacji, na przykład w poniższym przezabawnym wątku na Twitterze planetolog z NASA ocenia zgodność emoji Saturna z prawdziwym wizerunkiem tej planety (wygrał Whatsapp)

Skąd taka popularność emoji?

W średniowieczu ozdobne inicjały na początku karty lub rozdziału wymagały znacznie większego nakładu pracy, niż tekst kaligrafowany wokół nich. Podobnie jest z mieszaniem tekstu i grafiki w oprogramowaniu. Do końca poprzedniej dekady w graficznych interfejsach użytkownika blok tekstu musiał być jednorodny i składać się ze znaków tego samego rozmiaru pochodzących z jednego kroju.

Gdy jakiś czas później możliwe stało się mieszanie różnych rozmiarów i krojów, często wplatano w tekst czarno-białe piktogramy z fontu Windings.

Autorzy takich komunikatorów, jak ICQ czy rodzime Gadu-Gadu, musieli pokonać sporo przeszkód, by wstawić w tekst kolorowe obrazki (często animowane). Jeszcze więcej problemów mieli autorzy multikomunikatorów, wymarłej gałęzi programów obsługujących kilka protokołów naraz, bo musieli znaleźć sposób na tłumaczenie autorskich oznaczeń emotek między różnymi standardami i sensownie obsłużyć brak bezpośrednich odpowiedników. W dzisiejszych czasach, gdy interfejsy programów użytkowych często wyświetlane są z użyciem technologii wywodzących się z przeglądarek WWW, wyświetlanie emotikonek stało się jednak śmiesznie proste. Zawdzięczamy to standardowi Unicode.

Strony kodowe a Unicode

Pierwsze komputery wczytywały dane i programy z taśm perforowanych lub dziurkowanych kartoników. Wyniki były wypisywane na drukarkach wywodzących się z dalekopisów. Przypisanie liczb – wartości bajtów – do liter i cyfr mogło być dowolne, dopóki zgadzało się w obu urządzeniach. Obowiązujący do dziś standard ASCII (na obrazku powyżej) jest w użyciu od wczesnych lat ‘60 ubiegłego wieku i uwzględnia wszystkie litery alfabetu łacińskiego, jednak brakuje w nim literek ze znakami diakrytycznymi, czyli w wariantach z ogonkami, kropkami, kreskami i tak dalej.

Pominę tu opis metod radzenia sobie z tym problemem, niektóre były proste, inne bardziej zaawansowane, jednak dopiero pełne wdrożenie standardu Unicode w systemach operacyjnych i programach użytkowych ostatecznie wyzwoliło programistów i użytkowników z troski o to, czy jakiś napis da się przedstawić na ekranie.

Dygresja – jeśli siedzisz w IT i czujesz, że ta wiedza będzie ci potrzebna (a będzie!), to możesz zacząć od tego artykułu z roku 2003, napisanego przez Joela Spolsky’ego, blogera bardzo popularnego w początkach tysiąclecia. Zapamiętaj to nazwisko, bo po pierwsze gdy umiesz zacytować Spolsky’ego to trochę tak, jakbyś umiał(a) zacytować Bułhakowa, a po drugie Joel to współzałożyciel StackOverflow, więc w odpowiednim towarzystwie zabłyśniesz jeszcze bardziej. A po trzecie, hehe, Joel z Polski, nie? Koniec dygresji.

Unicode (Unikod) to taki sposób zapisu znaków, w którym zmieści się ponad milion znaków. Do dziś zdefiniowano przypisania dla 154 współczesnych i historycznych alfabetów, wśród nich m.in. koptyjski, mongolski, khmerski czy hieroglificzny.

Mamy tam też wiele innych symboli i piktogramów, m.in. nuty, symbole matematyczne, symbole walut oraz… emotikonki. Mimo to liczba zdefiniowanych znaków to dopiero 143 tysiące, więc rezerw starczy nam jeszcze na długo.

Jak wcześniej wspomniałem, liczba emotikonek urosła znacząco z powodu postaci i buziek powielanych z różnymi kolorami skóry. Poszanowanie dla odmienności ma znaczenie, ale czy nie żal marnować numeracji dziś, gdy może zabraknąć jej pojutrze?

Chytrą sztuczką czyli a+◌̨

A jednak niczego nie marnujemy! Najpierw małe wyjaśnienie, opisujące mechanizm kompozycji grafemów. Przyjrzyjmy się małej literce “ą” zdefiniowanej w tablicach Unicode pod numerem 261 (szesnastkowo 0x105) jako “Latin Small Letter A with Ogonek”.

Zauważamy, że jest ona zdefiniowana jako połączenie znaków “a” (nr 97, Latin Small Letter A) oraz “◌̨” (nr 808, Combining Ogonek). W Unicode możemy więc zapisać “ą” jako jeden znak 261 lub parę znaków 97 i 808, zaś na ekranie i wydruku oba te warianty będą równoważne.

Przy okazji – słowo “znak” może oznaczać różne rzeczy w zależności od kontekstu, jednak pełna terminologia (code point, code unit, grafem, glif) jest nieco uciążliwa a niniejszy tekst i tak oparty jest na pewnych uproszczeniach więc zostawiam jak jest.

inny przykład kompozycji znaku
źródło: https://blog.emojipedia.org/unicode-behind-the-curtain/

Trik z łączeniem wielu kodów wykorzystano w licznych emoji, także tych z wariantami koloru skóry. Emotka 👨🏽 (mężczyzna z jasnobrązową skórą) to sekwencja kodów 👨 (mężczyzna) z następującym bezpośrednio po nim kodem 🏽 (jasnobrązowa skóra). W edytorze Google Docs można przekonać się o tym, wklejając znak 👨🏽 i wciskając klawisz usuwania znaku. Pierwsze wciśnięcie klawisza skasuje niewidoczny kod 🏽, więc ikonka zmieni się w 👨. Tę usunie dopiero drugie użycie klawisza.

Nie ma więc mowy o żadnym marnotrawstwie – gdy kolejna wersja standardu Emoji wprowadza warianty skóry dla istniejącej ikonki, nie potrzebujemy nowych znaków Unicode, wystarczą nam te już zdefiniowane. Zachowujemy jednocześnie zgodność wsteczną – gdy na taką sekwencję trafi program, który wyświetla Unicode 8 ale nie zna definicji standardu Emoji 2.0, zamiast “👨🏽” wyświetli “👨 🏽”.

ZWJ – niewidoczny bohater

Szczególne znaczenie dla standardu Emoji ma znak o kodzie 0x200d – ZERO WIDTH JOINER czyli łącznik zerowej szerokości. Jest to niewidoczny znak sterujący, który występuje w wielu definicjach emotikonek kompozytowych. Przykład: 👨‍👩‍👦‍👦 czyli rodzina z dwójką chłopców. Składa się z ikonek 👨👩👦👦 pomiędzy którymi umieszczono trzy znaki ZWJ.

Słabo? To teraz uważajcie – “rodzina” w emoji może się składać z jednego lub dwóch rodziców (także tej samej płci) i jednego lub dwójki dzieci 👩🏼‍👨🏼‍👧🏼‍👧🏼 (z których jedno może być bezpłciowym oseskiem). Na tym etapie mamy 54 warianty w których pojawia się 178 postaci, co uwzględniając dowolność kolorów skóry u członków rodziny daje ponad 1000 kombinacji

Kolory skóry to modyfikator niemal 300 emoji i w wielu sytuacjach zwielokrotnia inne kombinacje, np. parę trzymającą się za ręce lub postacie wykonujące różne zawody (w wariantach mężczyzna / kobieta / osoba).

Design systems

Microsoft już w roku 2016 informował, że wprowadził do Windows 10 wsparcie wszystkich możliwych zestawów modyfikatorów, wskutek czego liczba możliwych do obsłużenia emotek sięgnęła aż 52 tysięcy.

Tak wielka liczba ilustracji wyklucza możliwość ich ręcznego przygotowania. Zespoły grafików pracujących nad emoji zaczęły korzystać z tzw. design systemów, czyli (w uproszczeniu) zestawu wytycznych, wzorców i szablonów, dzięki którym zmiany i korekty mogą być nanoszone jednocześnie na setki i tysiące obrazków, zaś nowo tworzone obrazki zachowują spójność stylistyczną z poprzednikami.

Przykłady takiego design systemu można znaleźć na blogu Google, oto np. te same elementy mimiki używane są w różnych emotkach, nawet pochodzących z różnych grup:

Projektowanie ikonek nie jest proste, bo i liczba wymagań przed nimi stawianych jest długa. Muszą być przede wszystkim estetyczne, ładnie wyglądać po powiększeniu. Jednocześnie powinny dać się rozróżniać także wtedy, gdy będą rysowane w kwadracie o boku kilkunastu pikseli. Krawędź musi zapewnić odpowiednią widoczność na tle o każdym kolorze, co jest wyzwaniem, bo jak pokazać na czarnym tle czarnego kota albo czarne serce?

Czy spełnienie takich wymagać jest w ogóle możliwe? Różnie bywa. Na poniższym obrazku widzimy studentkę o kremowej skórze, po lewej stronie obrazki Apple, Google i Microsoftu, po prawej czterokrotnie powiększone przykłady użycia z systemu Windows: nagłówek strony z Emojipedii (26 pikseli szerokości), nagłówek karty w Firefoksie (12 pikseli) oraz tytuł strony w pasku zadań (9 pikseli, czerń i biel). Dwa ostatnie przykłady są już całkowicie nieczytelne – a i tak mówimy o emotkach Microsoftu, które dzięki prostej geometrii i kontrastowym kolorom bardzo dobrze znoszą pomniejszanie.

Bezpieczeństwo emotikonek (i Unicode)

Do tej pory mowa była o nowych, fajnych i zaskakujących możliwościach, jakie przyniosło ustandaryzowanie Emoji na bazie kolejnych edycji zestawu znaków Unicode. Od strony programistycznej nie wszystko wygląda różowo.

Pierwsze problemy pojawiają się w przypadku starszych języków programowania, które często powstały kilkadziesiąt lat temu a są używane do dziś (jak C i C++) – tam obsługa napisów uwzględniających Emoji/Unicode wymaga użycia dodatkowych bibliotek, zaś większość funkcji operujących na łańcuchach znaków traci zastosowanie.

Także edytory kodu źródłowego i fonty tam używane często renderują tylko niewielki podzbiór najczęściej używanych znaków Unicode. To na szczęście mniejszy problem, bo napisy z emotkami rzadko pojawiają się w kodzie źródłowym – zazwyczaj są umieszczone w osobnych plikach z zasobami. Gorzej, gdy przy okazji kopiowania i wklejania do kodu źródłowego załapią się jakieś niewidoczne znaki sterujące – mogą być one przyczyną egzotycznych, trudnych do naprawienia błędów.

Znaczącym problemem może być rozmiar reprezentacji tekstów Unicode w pamięci komputera. Przyjmijmy, że ktoś w formularzu na stronie WWW wstawi w nazwie użytkownika znaki 👨🏻‍👩🏻‍👧🏻‍👧🏻 (rodzina z dwiema dziewczynkami, jasny kolor skóry). Zależnie od tego, jakiej funkcji użyjemy, długość takiego tekstu może być zdefiniowana jako 1 (jeden znak graficzny), 4 (cztery postacie składowe), 7 (cztery postacie plus trzy łączniki zerowej szerokości), 11 znaków (jak wyżej ale każda postać dodatkowo z kolorem skóry) lub… 38 (liczba bajtów do zapisania tej sekwencji w UTF-16). Bez problemu możemy jednak skonstruować równoważne sekwencje kodujące symbol 👨🏻‍👩🏻‍👧🏻‍👧🏻 o długości 40, 42 albo 44 bajtów.

Jeśli teraz tekst “👨🏻‍👩🏻‍👧🏻‍👧🏻👨🏻‍👩🏻‍👧🏻‍👧🏻👨🏻‍👩🏻‍👧🏻‍👧🏻👨🏻‍👩🏻‍👧🏻‍👧🏻” zostanie zapisany w bazie danych, w której na login przewidziano stałą liczbę bajtów (a funkcja weryfikująca długość tekstu mierzyła znaki graficzne zamiast bajtów), mamy sporą szansę na to, że zapis zostanie ucięty w losowym miejscu. Skończymy z nazwą użytkownika, w której niekompletna będzie albo sekwencja, albo wręcz któryś ze znaków składowych. Zależnie od języka, frameworka, środowiska, bazy danych i przeglądarki, efektem może być kosmetyczna niedogodność jak i załamanie pracy systemu.

“👨🏻‍👩🏻‍👧🏻‍👧🏻” może być i tak łatwiejszy do obsłużenia, niż t̶̙̺̕e̸̫͌ǩ̵̰̃ś̴̱̩̚t̶͇̦͌͗ ̶͓͊h̶̰̬̽͊ȯ̷̜͎j̶̩͒̏n̶̝͂͠i̷̫̰͘ȇ̶͕̘ ̶͕͆o̴̡̜̊̒p̷͖͇̓á̷̙̭́t̵͍̺̃ŕ̷̩̗z̴̹̔o̵̺̕n̵̹̗͐͠ŷ̷̜͋ ̷̂͜ͅà̸̔ͅk̸̥̈́͜c̸̗͆̕ē̵̠̿n̸̢̤̈́̎t̷̰̊á̷̗m̴̢̘̈ȉ̵͔̿ (tekst hojnie opatrzony akcentami, wygenerowany tym narzędziem), który zamiast 32 znaków ma ich łącznie aż 160. Narzędzie wspomagające liczenie znajdziesz tutaj zaś tutaj jest fajny opis, dlaczego emotka 🤦‍♂️ ma w różnych reprezentacjach i metodach pomiaru rozmiary 1, 2, 3, 5, 7, 14, 17 oraz 20.

O wielu innych ciekawostkach można poczytać tutaj – na dole strony znajdują się slajdy prezentujące wiele niespodziewanych sytuacji, na jakie może natrafić programista (a i tak opisano tylko przygody z jednym językiem programowania).

Prawdziwe problemy z bezpieczeństwem pojawiają się jednak wtedy, gdy atakujący doprowadzi atakowany system do nieprzewidzianego stanu a potem wykorzysta ujawnione w ten sposób usterki.

Przykład z życia w tym tweecie:

Dzięki temu, że pewien znak Unicode był przez atakowany system zamieniany na “�” zaś ten – na “?”, atakujący zyskał możliwość przekierowania użytkowników systemu do podstawionej witryny na swoim serwerze.

Inna sztuczka z Unicode to mieszanie tekstów czytanych od lewej do prawej (LTR) z tekstami czytanymi od prawej do lewej (RTL) – dzięki temu atakujący może przekonać użytkownika, że podlinkowany dokument o nazwie EXE.TEST.DOC to plik Worda, gdy tymczasem plik nosi rzeczywistą nazwę COD.TSET.EXE i zawiera złośliwy program wykonywalny.

Jeśli atakowany system sprawdza lub filtruje cyfry lub liczby, to przemycenie wartości numerycznych może nam się udać przy użyciu jednej z sześciuset dwudziestu alternatywnych cyferek, np. , , czy .

Temat bezpieczeństwa i Unicode wypełniłby niejedną książkę, więc tu przerwę i zachęcę cię do własnoręcznego szukania informacji na ten temat – możesz zacząć od opisu niedawno odkrytego błędu, wskutek którego GitHub wysyłał mail z linkiem do resetowania hasła na niewłaściwy adres.

Emotikonki i polityka

Temat sprzed kilku miesięcy: jeśli w swoim iPhone przestawisz ustawienia regionalne na chińskie, iOS przestanie wyświetlać flagę Tajwanu. Jeśli zmienisz ustawienia na Hongkong, flagę tę będzie się dało wyświetlić ale na liście Emoji jej nie znajdziesz.

To tylko jeden z przykładów, gdy wielkie korporacje podlizują się mocarstwom – Google i Apple pokazują Krym jako terytorium Rosji, jeśli używasz map Google/Apple w Rosji. Dla użytkowników łączących się z reszty świata Krym jest raczej ukraiński, ale też tak nie do końca, bo z wyświetlaniem granic bywa różnie.

Ciekawostki i inne michałki

Z powodu koronawirusa przełożono prace nad standardem Unicode 14, więc nowe emotikonki zatwierdzone w 2021 trafią do urządzeń dopiero w roku 2022.

Dzień po ogłoszeniu opóźnienia witryna unicode.org padła na ponad dobę. Przypadek?

Prawdopodobnie najbardziej złożony pojedynczy znak unicode to ﷽ – jest to często używane arabskie zapożyczenie w języku Urdu, którego nie dałoby się łatwo wpisać z klawiatury w układzie Urdu.

Ponieważ Unicode zawiera tysiące znaków z naprawdę wielu alfabetów, można znaleźć symbole wyglądające jak lustrzane odbicia alfabetu łacińskiego i nie tylko: lnsʇɹzɐuǝ opqᴉɔᴉɐ 𝔦 𝔴𝔦𝔢𝔩𝔢 𝔦𝔫𝔫𝔶𝔠𝔥 เ ๒คг๔չ๏ ฬเєɭє เภภץςђ. Zabawki do generowania rozmaitości tutaj oraz tutaj.

Jeśli chcesz dodać do Unicode swoje własne znaki, możesz to zrobić już dziś – standard przewiduje ponad 137 tysięcy indeksów znaków zarezerwowanych do prywatnego użytku, nigdy nie zostaną użyte w oficjalnej specyfikacji.

Jeśli brakuje Ci zwariowanych emotek, zajrzyj do klawiatury Gboard i bloga Google – Kuchnia Emoji pozwala mieszać różne emotki i używać wynikowego obrazka jako stickera w popularnych komunikatorach.

Na stronie emojitracker.com możesz śledzić licznik użycia różnych emoji w Twitterze. Gdy piszę te słowa, numer jeden (😂) ma 2.785.586.369 wystąpień.


Drogi czytelniku/czytelniczko – mam prośbę. Jeśli podobał Ci się niniejszy artykuł, prześlij go kilku innym osobom którym też może się spodobać. Przygotowanie tekstów o takiej długości i różnorodności trwa wiele godzin rozłożonych na wiele wieczorów, więc nie pojawiają się one jakoś strasznie często. Mam jednak nadzieję, że – podobnie jak ja – lubisz długie teksty pełne odnośników do różnych zasobów dodatkowych. Daj znać w komentarzu, jeśli udało ci się dotrzeć aż tu.

Dla chętnych jest też Twitter, Facebook i Linkedin, gdzie anonsuję każdy kolejny artykuł i czasem dorzucam dodatkowe informacje czy linki, w zamian przyjmując skromne ilości lajków. Poniżej możesz zapisać się na newsletter, tam NIE daję znać o nowych tekstach. Dostaniesz jednego maila na wiele tygodni ale o tym, o czym koniecznie będę chciał poinformować. Na razie!



O autorze: zawodowy programista od 2003 roku, pasjonat bezpieczeństwa informatycznego. Rozwijał systemy finansowe dla NBP, tworzył i weryfikował zabezpieczenia bankowych aplikacji mobilnych, brał udział w pracach nad grą Angry Birds i wyszukiwarką internetową Microsoft Bing.


6 odpowiedzi na “Emotikonki, Unicode, kodowanie znaków, bezpieczeństwo, 😷🦠”

+1 za odniesienie do Joela. Jak pierwszy raz trafiłem na jego blog te wszystkie lata temu (a SO jeszcze wtedy nie było), to była to dawka skondensowanej wiedzy i doświadczenia… Zresztą wciąż tam wracam po konkretne odniesienia i artykuły dla znajomych, którzy dopiero w ten świat wkraczają.

Trafiłem tutaj z podsumowania roku 2020. Fajny artykuł.
Ja wyrosłem na emotkach z czasów IRC lat 90tych, kiedy to występowały w formie tekstowej – 🙂 lub 🙂 – ciekawe, czy zamieni na obrazek. Wersja graficzna pozostała tylko przedłużeniem tamtego czasu i prawdę powiedziawszy mój mózg ignoruje wszystko, co wykracza poza cztery/pięć podstawowych buziek, podobnie ignoruje kolor.
Wobec tego jestem zaskoczony jak skomplikowana mechanika stoi za tymi obrazkami. Po tym artykule moja ciekawość jest zaspokojona. Nie muszę szukać dalej.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *