Det Hele Startet Med Emoji: Farge Typografi på Web

0
31

“Typografi på web er i én farge: tegn er enten svart eller rødt, aldri svart og rød …Så emoji hit scenen, ble en del av Unicode, og dermed kunne komme til uttrykk ved andre tegn — eller “tegn” i skrift terminologi. Smiley, som svever forretningsmann og den beryktede haug av poo ble sanne søsken til tall, bokstaver og skilletegn.”

— Roel Nieskens

Ved hjelp av emojis i koden er enkel. Head over til emojipedia og kopiere og lime inn.

I HTML:

Eller i CSS:

Og JavaScript, også:

(Alternativt kan du angi en emoji-tegn med en Unicode codepoint.)

Imidlertid, kan du kjøre inn i et problem…

Lost in translation: Emoji er konsistens problem

Mangfoldet av emoji på tvers av plattformer høres kanskje ikke et stort problem. Imidlertid, disse noen ganger radikale inkonsekvenser forlate rommet for drastisk misforståelser. Infamously, “smilende ansikt med smilende øyne” emoji ender opp som en smertet grimase på eldre Apple-systemer.

Dette var en så big deal at selv Washington Post dekket det.

En ufarlig og leken watergun emoji kan dukke opp som et dødelig våpen.

Gjengitt med tillatelse av Emojipedia.

Og hvem vet hvor mange romanser ble slått av Google er helt bisarre hårete hjertet emoji?

🤮Dette har siden blitt rettet av Google

Unicode standardiserer hva hver emoji skal representere med korte beskrivelse, men den visuelle utformingen er ned til de ulike plattformene.

Farge skrifter til unnsetning!

Løsningen? Bruk en emoji skrift. Adobe har lansert en font som heter EmojiOne og åpen kildekode Twemoji. Mer sannsynlig å følge.

@font-face {
font-family: ’emoji-tegn’;
kilde: url(’emojione-svg.woff2′)
format(‘woff2’);
}

Hvis en bruker skriver inn en HTML-inngang eller textarea, de vil se din fancy tilpasset emoji-tegn. ❤️

Et innspill i Firefox.

Emoji-skrifter har også fordelen av å unngå pikselering sett i skalert opp raster emoji-tegn. Hvis du tilfeldigvis ønsker virkelig store emoji, en SVG-i-Opentype font som er klart overlegen valg.

På venstre side, en standard Apple dogface emoji ser kornete. På høyre, glatt SVG-i-Opentype emoji-tegn fra Emojione og Twemoji, henholdsvis. Unicode (til høyre) har åpenbart ikke angi et rasen!

Nettleserstøtte

Forveksling, farge skrifter ikke er en standard, men snarere fire 🙄. OpenType er skriften-format som brukes på internett. Når emoji ble lagt til unicode, de store aktørene innså at multi-farge støtte som trengs for å bli lagt til OpenType på noen måte. Forskjellige selskaper kom opp med et mangfold av løsninger. Skriftene er fremdeles .ttf, .woff eller .woff2 — men internt de er litt forskjellige. Jeg satt sammen denne støtten tabell ved hjelp av et verktøy som heter Chromacheck:

Chrome
Safari
Kant
Firefox

SVG-i-Opentype

COLR/CPAL

SBIX

CBDT/CBLC

Vi har lært hvorfor color skrifter ble oppfunnet. Men det er ikke alt om emoji…

Flerfarget alfabeter

Gilbert skrift

Farge skrifter er en ny teknologi, slik at du ikke vil finne at mange skrifttyper å velge mellom som av ennå. Hvis du ønsker å prøve ut en som er gratis og åpen kildekode, Strikk av David Jonathan Ross er et godt valg.

Mens noen skrifter gi full emoji-støtte og andre som tilbyr en flerfarget alfabetet, Ti Mincho — en kommersiell skrift fra Adobe — tar en annen tack. I ordene til sin markedsføring, skriften har “en liten overraskelse gjemt bort i typene.” Av 2,666 emoji-tegn i Unicode-Standarden, Ti Mincho har et meget begrenset utvalg i en særegen Japansk stil.

Den bedårende tilpasset emoji-satt av Ti Mincho

Emoji-har blitt en dominerende modus for menneskelig kommunikasjon. Over 60 millioner emoji er brukt på hver eneste dag. På Messenger, antallet er enda mer oppsiktsvekkende, på fem milliarder kroner per dag. Hvis du bygger noen form for meldinger-appen, får emoji rett som virkelig betyr noe.