Share
Geloof het of niet, er is een beeldformaat dat direct in je browser is ingebouwd. Hiermee kunnen afbeeldingen worden gedownload voordat ze nodig zijn, worden ze perfect weergegeven op Retina-schermen en kunnen CSS-kleuren en -effecten op hen worden toegepast. Ok, ik ben daar niet helemaal eerlijk. Het is geen beeldformaat als zodanig - maar de rest is nog steeds van toepassing. Gebruik makend van Unicode u kunt pictogrammen maken die resolutie-onafhankelijk zijn, vrijwel geen downloadtijd hebben en ook kunnen worden gestyled met CSS.
In dit artikel bespreek ik de basisprincipes en enkele interessante dingen die u met Unicode kunt doen.
Unicode is een manier om letters en leestekens uit verschillende talen correct in één document weer te geven. Dit is ongelooflijk handig; het betekent dat uw site wereldwijd kan worden gebruikt en precies laat zien wat u wilde delen - of dat nu Franse tekens met accenten bevat of volledig in Kanji is geschreven.
Unicode wordt ook continu toegevoegd aan; momenteel staat deze op versie 6.3, die iets minder dan 110.000 tekens bevat. Versie 7 zal later dit jaar verschijnen en zal bijna 3.000 nieuwe karakters toevoegen.
Naast letters en cijfers geeft Unicode ook enkele symbolen en pictogrammen op. Meer recent zijn deze uitgebreid met de Emoji-pictogrammen die je mogelijk op iOS-berichten hebt gezien:
HTML-pagina's bestaan uit reeksen Unicode-tekens en wanneer ze over een netwerk worden verzonden, worden ze geconverteerd naar bytes. Elke letter of teken voor elke taal krijgt een unieke code, en deze kan worden gecodeerd wanneer het document wordt opgeslagen of gedeeld.
Idealiter gebruikt deze codering een systeem dat bekend staat als UTF-8, omdat dit een Unicode-teken kan coderen, maar zelfs als dat niet het geval is, kan elk teken worden gedefinieerd door een numerieke karakterreferentie. Gebruik bijvoorbeeld ♥ zal een hart produceren, en je kunt gewoon die code rechtstreeks in je html ♥ typen.
Dat aantal kan een standaardnummer zijn of het hexadecimale equivalent ervan. Als het hexadecimaal is, heeft het nummer een X ervoor, dus & # X2665; zal hetzelfde hart geven (2665 is hex voor 9829).
Als u het Unicode-teken met CSS toevoegt, moet u de hexadecimale waarde gebruiken.
Sommige van de meest gebruikte Unicode-symbolen hebben een gedenkwaardige naam of afkorting die kan worden gebruikt in plaats van die cijfercodes - u hebt waarschijnlijk gebruikt & (ampersand) of < (minder dan) bijvoorbeeld.
Goede vraag, maar er zijn verschillende redenen die ik kan bedenken:
Accentsconagua
@ Font-face icoonDe eerste van deze redenen zou geen extra werk vereisen. Als uw HTML-bestand wordt opgeslagen als UTF-8 en gecodeerd is wanneer het via een netwerk wordt verzonden als UTF-8, dan zou alles er geweldig uit moeten zien.
Zou moeten. Helaas ondersteunen niet alle browsers of apparaten alle Unicode-tekens even (u had niet verwacht dat iets op het web zo eenvoudig was?) Tekens zoals de Emoji-symbolen worden niet op alle apparaten ondersteund, maar deze 'benoemde' tekens zijn veel betrouwbaarder.
Gebruik om toe te voegen dat u UTF-8 op een HTML5-pagina gebruikt naar de van uw webpagina's. Als u HTML5 niet gebruikt, heeft u dit nodig in plaats daarvan.
De tweede reden is omdat er veel zeer nuttige Unicode-tekens zijn die als pictogrammen op een webpagina kunnen worden gebruikt. Bijvoorbeeld: ▶, ≡ en ♥.
Wat wel leuk is, is dat waar ondersteund, er geen extra bestanden te downloaden zijn om deze pictogrammen te tonen, wat betekent dat uw site net iets sneller is. Je kunt er ook kleur of een slagschaduw aan toevoegen met CSS. Als u creatiever wordt, kunt u een overgang toevoegen om de kleur soepel te wijzigen wanneer iemand over het pictogram zweeft - en dat kunt u niet doen met afbeeldingen.
Laten we bijvoorbeeld zeggen dat ik een kleine sterbeoordelingsindicator op mijn webpagina wilde opnemen. Ik zou zoiets als dit kunnen doen:
& # X2605; & # X2605; & # X2605; & # X2606; & # X2606; Dit zou ons iets geven als de afbeelding hieronder:
Een voorbeeldbeoordelingsindicator bekeken in Firefox Wat je echter af en toe wel ziet, is zoiets als dit:
Het beoordelingsvoorbeeld bekeken op een BlackBerry 9000 Dit is wat er gebeurt als deze tekens niet werken op het apparaat of de browser die wordt gebruikt. (Gelukkig zijn deze stervormen zeer goed ondersteund en ik heb alleen oudere BlackBerry-telefoons tegengekomen die problemen met ze hebben).
Het teken dat u ziet als het vereiste Unicode-teken niet wordt ondersteund, varieert; je ziet mogelijk een lege rechthoek of een ruit met een vraagteken.
Dus hoe kunt u het Unicode-teken vinden dat u wilt gebruiken? Welnu, je zou door een site zoals Unicodinator kunnen scrollen om te zien wat er beschikbaar is, maar ik ben dol op het gebruik van Shapecatcher - deze ongelooflijke site stelt je in staat om het pictogram te tekenen, en het suggereert de Unicode-personages die het kan vinden om uit te kiezen.
Als u een gebruikt @ Font-face pictogram, dan kunt u overwegen om een vergelijkbaar Unicode-teken als terugval te gebruiken. Op deze manier in een browser of apparaat dat geen ondersteuning biedt @ Font-face (zoals Opera Mini of Windows Phone 7) zou de gebruiker op zijn minst een vergelijkbaar karakter zien:
Lettertype Awesome-pictogrammen in Chrome aan de linkerkant, en aan de rechterkant worden de onderliggende Unicode-tekens weergegeven in Opera Mini Veel @ Font-face gereedschappen standaard ingesteld op het gebruik van een reeks Unicode-tekens die bewust geen betekenis of een vooraf bepaalde vorm hebben (vaak aangeduid als de privégebruik of PUA-karakters). De val van deze aanpak is dat waar @ Font-face wordt niet ondersteund, de gebruiker blijft achter met een vorm die helemaal geen betekenis heeft.
Als u de PUA-tekens gebruikt, kan Internet Explorer 8 ook worden gebruikt Compatibiliteitsmodus, en donkere dingen liggen op dat pad - zie Jeremy Keith's artikel voor meer informatie over dit onderwerp.
IcoMoon is geweldig om te maken @ Font-face pictogramsets en kunt u elk Unicode-teken kiezen als basis voor een pictogram.
Wees echter voorzichtig: sommige browsers en apparaten houden niet van bepaalde Unicode-tekens die worden gebruikt @ Font-face, en zal het pictogram niet weergeven. Het is misschien de moeite waard om het voorgestelde Unicode-teken uit te voeren via Unify - dit geeft u een indicatie van hoe veilig het is om dat karakter in een @ Font-face icon set.
Een probleem met het gebruik van Unicode-tekens als terugval van lettertypen, is dat ze vaak slecht worden ondersteund voor schermlezers (Unify heeft hier ook enige gegevens over), dus je moet goed nadenken over hoe het pictogram wordt gebruikt.
Als je pictogram puur decoratie naast een tekstlabel is dat door een schermlezer zou worden gelezen, zou ik me niet al te veel zorgen maken. Als uw pictogram echter op zichzelf staat, wilt u mogelijk een verborgen tekstlabel toevoegen om gebruikers van schermlezers te helpen. Zelfs als het Unicode-teken wordt uitgelezen door de schermlezer, is de kans groot dat het niet iets zal zijn waar je het voor gebruikt. Bijvoorbeeld als u gebruikt & # X2261; voor het navigatiepictogram 'Burger' met drie horizontale lijnen, zal VoiceOver op iOS het lezen als 'Identiek aan'.
Zeer weinig lettertypen hebben tekens voor het volledige Unicode-bereik, dus als u een lettertype kiest, probeer dan een paar tekens die u waarschijnlijk nodig hebt.
Proberen Segoe UI-symbool of Arial Unicode MS voor geïsoleerde pictogrammen. Het is waarschijnlijk dat deze lettertypen op een pc staan en op een Mac, Lucida Grande heeft een groot aantal Unicode-tekens. Als je deze wilt gebruiken, voeg je ze gewoon toe aan de relevante font-family CSS-invoer zodat de gebruiker het Unicode-teken in deze lettertypen ziet als deze zijn geïnstalleerd.
Het zou handig zijn als er een manier was om te detecteren of een Unicode-teken al dan niet werd ondersteund voordat je het gebruikte, maar er is geen gegarandeerde manier om dit te doen.
Modernizr heeft een beetje JavaScript om te proberen en te testen voor Emoji-ondersteuning - maar dit werkt door een enkele pixel te controleren om te zien of er iets is. Dus als het karakter dat u wilt testen die ruimte niet dekt, zelfs als het wordt weergegeven, geeft de test u het verkeerde resultaat. En alleen omdat een Unicode-teken correct wordt weergegeven, betekent dit niet dat de andere 109.999 dat wel zijn.
Kortom, test het. En zorg ervoor dat, als het personage niet wordt ondersteund, de gebruiker nog steeds kan begrijpen wat er aan de hand is.
Het zijn niet alleen webpagina's waar u Unicode op kunt gebruiken - ook e-mails kunnen ermee worden verbeterd.
Dit is echter hetzelfde verhaal; sommige e-mailclients en apparaten ondersteunen deze, andere niet. Campagnemonitor heeft enkele tests uitgevoerd die u kunnen helpen bij het beslissen of u ze moet gebruiken.
Wanneer zij zijn ondersteund, kunnen ze zeer effectief zijn. Als een Emoji-teken bijvoorbeeld in een onderwerpregel wordt gebruikt, kan dat gekleurde pictogram mooi opvallen in een inbox.
Dat komt zo ongeveer terug op deze introductie van Unicode. Ik hoop dat dit nuttig is geweest en u heeft geholpen meer inzicht te krijgen in de manier waarop Unicode werkt en hoe u het kunt gebruiken.
Als u vragen heeft, kunt u dit gewoon in de comments vragen.
