Un sitio bajo en kilobytes y casi sin dependencias (únicamente normalize.css) que permite crear sellos ad libitum.
La idea es poder generar etiquetados —como los que aparecen en los alimentos—
con el uso de estándares web.
Para funcionar de forma correcta, este sitio necesita un navegador relativamente moderno.
Sin embargo, cualquier web browser que entienda SVG 1.1
debería cumplir con esta tarea.
Por ejemplo, la última versión de Mozilla Firefox o Google Chrome será más que suficiente.
🦊
Mucho gusto. Así es, con un poco de imaginación, los zorros podemos hablar.
Por supuesto, estás invitado a hacer clic en mi seguro, libre y fantástico pelaje.
Es posible, además, crear sellos con el
query string;
en efecto, basta con agregar ?input=<texto> al final del URL.
Por ejemplo, https://nebil.github.io/alto-en-x/?input=ejemplo
nos generará un sello que dirá “alto en ejemplo”.
El sello está escrito en SVG,
con el propósito de representar un octágono* regular de múltiples bordes.
Lamentablemente, no es posible definir este tipo de bordes a partir de
la actual especificación de SVG,
pero es altamente probable que sí estén disponibles
en la siguiente versión 😀
—que quizá nunca veremos. 🙄
Por lo tanto, el workaround consiste en elaborar cuatro <polygon> superpuestos,
con bordes de distinto ancho.
El manual elaborado por el Ministerio de Salud establece que
La familia Arial es la tipografía utilizada en la iconografía,
específicamente su presentación bold para la mayor legibilidad de los textos.
Sin embargo, debemos recordar que Arial es una familia
comercial. 💰
Algunos navegadores cuentan con ella,
otros con Helvetica,
y las personas libres disfrutan de
Liberation Sans.
Pero, lamentablemente, existen dispositivos que no conocen ninguna de ellas.
¿Qué podemos hacer ante esto?
Introducing Arimo: one family to rule them all.
O en otras palabras, Arimo
—que es idéntico a Liberation Sans— es el nuevo typeface estándar,
con el objetivo de ofrecer un mismo sello, visualmente consistente,
en todos los navegadores**.
Además, por temas de seguridad,
las imágenes generadas desde SVG no aceptan tipofaces externas.
Para resolver este problema, Arimo fue transformada a
base64,
para luego ser insertada en el octágono.
Desde acá, aprovecharé de agradecer
- al Ministerio de Salud por el diseño de los etiquetados
- a Steve Matteson por el refrescante diseño de Arimo
- a Google Fonts por ofrecer dos elegantes tipofaces
- a @necolas por normalize.css
- a @mrpatiwi por la idea.
Copyright © 2017, Nebil Kawas García
El código de este repositorio está bajo el Mozilla Public License v2.0.
*
también conocido como octógono, pero mantendremos las raíces helénicas.
**
donde “ todos los navegadores” quiere decir “ojalá, todos los navegadores”.