Usar Emojis en HTML, CSS y JavaScript.
Desde sus humildes comienzos en 1999, los Emojis est谩n de moda. Ya no es algo que solo las personas de la mitad de nuestra edad usan para comunicarse. T煤 y yo los utilizamos todo el tiempo, y casi todas las aplicaciones relacionadas con chat o mensajes bajo el sol ofrecen una gran ayuda.
Para los usuarios de todos los d铆as, los emojis son geniales. Son divertidos y f谩ciles de usar. Para nosotros los desarrolladores web que deseen utilizar emojis en nuestro HTML, CSS y JavaScript, la historia es un poco diferente. Hay algunos obst谩culos que necesitamos para aprender a pasar, pero no te preocupes. ¡Este tutorial te ayudar谩 a dominar todo este aro saltando como un profesional!
¡Adelante!
¿Qu茅 son los Emojis Exactamente?
Ya sabemos que los emojis son estos peque帽os iconos coloridos. Si bien esto puede darle la impresi贸n de que son im谩genes en el sentido tradicional, no lo son. Se parecen m谩s a las letras, los n煤meros, los signos de puntuaci贸n y los s铆mbolos extra帽os que tendemos a usar como texto.
Solo son personajes.
Puede seleccionarlos, copiarlos, pegarlos, ajustar su tama帽o, etc.
Tienen una representaci贸n num茅rica m谩s primitiva que puede usar para que se muestren.
Emojis en HTML
Para usar emojis en HTML, lo primero que debemos hacer es configurar la codificaci贸n de caracteres del documento en UTF-8. Esto garantiza que nuestros emojis se muestren de forma consistente a trav茅s de la variedad de navegadores y dispositivos que sus usuarios pueden estar ejecutando. Hacer esto es simple. Dentro de la etiqueta de la cabeza , aseg煤rese de especificar la siguiente meta etiqueta :
<meta charset="UTF-8">
Una vez que haya hecho esto, ahora viene la parte divertida de obtener un emoji para mostrar. Tienes dos maneras de poder hacer esto, cada una con un grado variable de diversi贸n.
Una forma es usando el emoji directamente en tu HTML. La otra forma es especificando el emoji a trav茅s de su representaci贸n num茅rica primitiva . Veremos ambos casos.
Usando el Emoji Directamente
La forma m谩s sencilla de mostrar un emoji consiste simplemente en copiar y pegar. Solo necesita una aplicaci贸n o sitio web que le permita copiar emojis en su forma original de personaje.
Un gran lugar para hacerlo es
Emojipedia. Puedes usar Emojipedia para buscar cualquier emoji que est茅s buscando. Una vez que haya encontrado su emoji, hay una secci贸n donde puede ver y copiar f谩cilmente los emoji.
Una vez que lo haya copiado, simplemente p茅guelo en su destino previsto en su marcado:
<p>馃榾</p>
Como los emojis se tratan como contenido basado en texto, puede pegarlos en casi cualquier lugar del documento donde se admite el texto.
Ahora, si esta es la primera vez que ves emojis aparecer aleatoriamente dentro de tu c贸digo de texto o tu editor de c贸digo, se ver谩 un poco extra帽o:
Su entorno tradicional de solo texto, donde ha escrito su marcado todos estos a帽os, repentinamente tendr谩 algo visual en 茅l. No te preocupes, es genial. Cuando obtenga una vista previa de su documento HTML en su navegador, todo seguir谩 funcionando.
Especificando el punto de c贸digo Emoji
Si especificar el emoji directamente no funciona, hay un camino menos divertido que puede tomar. Puede usar la representaci贸n num茅rica del emoji y especificarla en su marcado. Si te desplazas hacia abajo en
Emojipedia para ver cualquier emoji, ver谩s la representaci贸n num茅rica (m谩s formalmente conocida como punto de c贸digo ) que se muestra:
Para los emoji de cara sonriendo, el punto de c贸digo es U+1F600 . Para especificar este emoji en HTML usando el punto de c贸digo, tenemos que modificar el valor un poco.
Agregue los caracteres &#x , elimine el U+1 del comienzo del punto de c贸digo y simplemente agregue los d铆gitos restantes del punto de c贸digo como parte de cualquier elemento de texto.
Aqu铆 est谩 nuestro emoji de cara sonriendo en forma de c贸digo: <p>😀</p>
Cuando obtenga una vista previa de su documento en su navegador, a煤n ver谩 el emoji de cara sonriendo mostrado correctamente ... a pesar de que se ve extra帽o en nuestro marcado en comparaci贸n con la soluci贸n de copiar / pegar que vimos anteriormente.
Emojis en CSS
Puedes usar emojis totalmente en CSS. Los mismos trucos que vimos para los emojis en HTML funcionar谩n con solo algunas peque帽as modificaciones. Puede especificar los emoji directamente:
h1::before { content: "馃榾"; }
Tambi茅n puede especificar los emoji configurando el punto de c贸digo:
h1::before { content: "\01F600"; }
La forma de especificar el punto de c贸digo es un poco diferente de lo que vimos para HTML. Todo lo que tiene que hacer es eliminar el U+ del punto final Unicode y agregar los caracteres \ 0 (barra cero) justo antes de 茅l.
Emojis en JavaScript
Lo 煤ltimo que veremos es c贸mo usar emojis en JavaScript. El enfoque de usarlo directamente tambi茅n funcionar谩 aqu铆. Solo aseg煤rate de tratar el emoji como texto:
document.body.innerText = "馃榾";
Para usar un emoji a trav茅s de su valor de punto de c贸digo, tenemos que pasarlos a trav茅s del m茅todo String.fromCodePoint . Este m茅todo toma un valor de punto de c贸digo como su argumento:
document.body.innerText = String.fromCodePoint(0x1F600);
Lo que se devuelve es el personaje en esa ubicaci贸n de punto de c贸digo. La forma de especificar el punto de c贸digo es diferente de HTML y CSS. Si el punto de c贸digo es U+1F600 , reemplace el U+ con 0x (cero yx) antes de pasarlo.
Eso es todo. Si desea ir m谩s all谩, ya que est谩 en JavaScript, puede hacer todo tipo de cosas JavaScript. Puede tener una matriz de emojis, puede generarlos din谩micamente, y as铆 sucesivamente:
var emojis = [0x1F600, 0x1F604, 0x1F34A, 0x1F344, 0x1F37F, 0x1F363, 0x1F370, 0x1F355,
0x1F354, 0x1F35F, 0x1F6C0, 0x1F48E, 0x1F5FA, 0x23F0, 0x1F579, 0x1F4DA,
0x1F431, 0x1F42A, 0x1F439, 0x1F424];
Algunos detalles de Emoji
Hemos pasado por alto qu茅 son realmente los emojis y qu茅 prop贸sito tienen los puntos de c贸digo. Para comenzar con lo que dijimos antes, los emojis son solo caracteres como todo el texto que escribimos.
Eso a menudo es algo confuso de entender. Una parte de la raz贸n de esta confusi贸n es porque tendemos a pensar en los personajes como justo lo que nuestros teclados admiten. Este es el problema, lo que nuestros teclados nos permiten representar es un porcentaje muy peque帽o del conjunto general de caracteres que est谩 disponible para nosotros.
Si quieres ver esto por ti mismo, puedes ver todos los caracteres que admite tu sistema operativo usando el Mapa de caracteres en Windows o el Visor de caracteres en Mac:
Tenga en cuenta que tiene muchas categor铆as de personajes que van m谩s all谩 de las cosas habituales que vemos en un teclado t铆pico. Si tuvi茅ramos que tener un teclado para admitir cada car谩cter que nuestro sistema operativo admite, necesitar铆a ser al menos ... tres veces m谩s grande que el teclado habitual.
¡De acuerdo! Vamos un nivel m谩s profundo. Vimos que los emojis que quer铆amos usar ten铆an una representaci贸n num茅rica extra帽a. Como resultado, TODOS los personajes que usamos tienen la misma representaci贸n extra帽a bajo las s谩banas tambi茅n.
En nuestras pantallas, podemos ver como caracteres de letras A , B , C , D , E , F , G . Debajo de las car谩tulas, estos personajes se parecen a los siguientes: U+0041 , U+0042 , U+0043 , U+0044 , U+0045 , U+0046 y U+0047.
Ya dijimos que esta representaci贸n se conoce como punto de c贸digo, pero el t茅rmino m谩s preciso es el punto de c贸digo Unicode .
Es importante conocer este detalle, ya que Unicode es un est谩ndar de la industria para garantizar que el texto que ve en la pantalla sea el mismo en otra pantalla, independientemente del idioma, la configuraci贸n regional, las capacidades del sistema, el sistema operativo, etc. Un punto de c贸digo es la unidad m谩s b谩sica para representar informaci贸n en Unicode.
Una serie de puntos de c贸digo representa caracteres y texto. ¡Uf!
Conclusi贸n
Si puede salirse con la suya, copiar y pegar emojis es lo m谩s f谩cil que puede hacer en HTML, CSS y JavaScript. Habr谩 situaciones en las que no puede hacer eso, por lo que tendr谩 un enfoque alternativo con puntos de c贸digo.
Hay una 煤ltima cosa que puede ser importante para ti. Debido a que los emojis son nativos de la aplicaci贸n o plataforma en la que se encuentra, los emojis pueden verse diferentes para diferentes usuarios.
El est谩ndar Unicode asegura que los puntos de c贸digo apropiados representen, en este caso, una cara. Cada implementador tiene plena libertad creativa para interpretarlo como lo deseen.
Para algunos desarrolladores, esta inconsistencia no es deseable. Lo que han hecho en su lugar es volver a crear los emojis en formato SVG o PNG para que puedan garantizar la coherencia.
Un ejemplo de alguien que hace eso es Twitter, es del proyecto Twemoji, realmente impresionant. Hay muchas librer铆as de emojis que puedes usar, as铆 que utiliza la que quieras si el soporte nativo de emoji no es lo que est谩s buscando.
馃榾 馃憗️ 馃摟 ❤️
Copia y Pega ...