Miksi jotkin erikoismerkit muuttuvat webbisivuilla pieniksi kuviksi?

Kirjoitin︎︎ WordPress-sivustolle artikkelin, johon laitoin kaksipäisen nuolen eli kirjoitus­merkin ↔︎, jonka koodi on U+2194 (nimi ”left right arrow”). Kirjoitin artikkelin MS Windows -tieto­koneella, jossa käytän AutoHotkey-nimistä ohjelmaa. Ohjelman avulla voi luoda erilaisia makroja, ja niinpä minulla on makro, joka näppäillessäni <.> korvaa nuo tuolla kaksi­päisellä nuolella. Kaikki näytti hienolta, joten julkaisin artikkelin.

Myöhemmin kävin katsomassa artikkelia kännykän Safari-selaimella, jolloin huomasi, että nuolen sijasta artikkelissa näkyi pieni kuvake. Kuvake oli harmaan­sininen pyöreä­kulmainen suora­kaide, jossa oli lihavoitu valkoinen kaksi­päinen nuoli. Selvää oli, että kirjoitus­merkki oli korvautunut mutta miksi.

Koska olin aluksi käytänyt vain MS Windows -tieto­koneella selaimia, ajattelin, että tämä on jokin kännykän Safari-selaimen omituisuus, mutta sitten näin saman ilmiön Android-puhelimen Google Chrome -selaimella. Mielen­kiintoista olisi ollut katsoa, mitä tieto­koneen Safari-selain olisi näyttänyt, mutta se jäi nyt tekemättä.

Ensiksi tuumin, että kirjoitus­merkissä on jotain vikaa, joten makron sijasta laitoin sen artikkeliin kopioimalla kirjasinkartta­sovelluksesta. Ei auttanut. Sitten syötin sivulle kirjasimen html-koodin ↔ – sekään ei auttanut. Googlasin, mutten ilmeisesti osannut muotoilla ongelmaani oikein, koska en löytänyt apua. Laitoin kyselyn StackOverflowhun.

Seuraavana päivä menin tietysti uteliaana katsomaan, olinko saanut mitään vinkkiä. En ollut. Sitten löysin StackOverflowsta jonkun toisen esittämän kysymyksen, joka oli samasta aiheesta. Kävi ilmi, että kännykän Safarissa ja nähtävästi Androidin Google Chromessa on ominaisuus, joka muuttaa tietyt kirjain­merkit tai niiden yhdistelmät emojeiksi. Yksi tällainen merkki on nimen­omaan tuo kaksi­päinen nuoli. Nyt vain on niin, että tuon emojin html-koodi on sama kuin kirjoitusmerkin!

Sain selville, että teknisesti tämä toimii siten, että koodi

• ↔ jättää selaimelle valittavaksi, näytetäänkö merkin teksti­muoto vai emoji
• ↔︎ kertoo selaimelle, että näkyviin halutaan tekstimuoto
• ↔️ kertoo selaimelle, että näkyviin halutaan emoji

Nuo lisäkoodit &#xfeof; ja &#xfeof; ovat nimeltään

• variation selector-15 (VS-15) text variation selector
• variation selector-16 (VS-16) emoji variation selector

Kumpikin on näkymätön merkki eli selaimet, jotka eivät ymmärrä niitä, eivät tee niiden kohdalla mitään. Mobiili­selaimet uusina ja ”viileinä” näkyvät valitsevan emojin. Työpöytä­selaimet näyttävät valitsevan teksti­muodon, jos edes ymmärtävät valitsimet. Tarkemmin ajatellen tämä on ihan käypä ratkaisu yhteen­sopivuuden säilyttämiseksi taaksepäin.

Mitä sinun selaimesi näyttää?

• selaimen oma valinta: ↔
• suositeltu tekstimuotoa: ↔︎
• suositeltu emojia: ↔️