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 ...
💘🙄 👀
ResponderEliminar