La creación (y los beneficios potenciales) de una fuente CSS

Al menos no es uno típico. Cada carácter es un elemento HTML, construido con CSS. ¡Una verdadera fuente web!

Déjame explicarte. Esta es una forma de representar texto sin utilizar ninguna fuente. El texto aleatorio se divide con PHP en palabras y letras y luego se representa como elementos HTML con clases. Cada elemento tiene un estilo con CSS para crear los personajes. Esto es “simplemente” HTML controlado con CSS, pero aún así, es software y transmite el mensaje. Tiene todas las propiedades que tiene una fuente convencional, por eso la llamaremos fuente. Una fuente sin formato.

Descargo de responsabilidad: no soy un experto en HTML, CSS o PHP. Estoy dispuesto a apostar que hay un atajo o una solución más fácil para lograr lo que he hecho aquí, pero como estoy contento con los resultados, presentaré el proceso y mi experiencia. La presentación no es un tutorial; Es un experimento basado en mis habilidades limitadas y debe ser tratado como tal.

La idea

El proyecto nunca estuvo destinado a durar cinco meses, ¡pero eso fue lo que hizo falta! Todo comenzó jugando con un ícono CSS, usando pseudoelementos para crear formas . Una vez terminada la primera letra S, el resto fue relativamente fácil. Revisé si había otros proyectos similares pero no encontré mucho, así que me motivé a ver hasta dónde podía llegar.

Inicialmente, una fuente SVG controlada con CSS parecía una buena idea. Haría esta tarea mucho más fácil (SVG está hecho para dibujar) y podría centrarse en efectos específicos del diseño, pero no tiene la flexibilidad de un elemento HTML sin formato. Un SVG no se puede modificar según el contexto y el proceso vuelve al diseño de fuente convencional, donde cada carácter tiene una forma y un código fijos.

Cómo funciona

Este es un híbrido de diseño web y de fuentes. Cada carácter se construye como cualquier elemento web y se usa en línea para comportarse como una fuente. Las métricas, los pesos, las características OpenType y todas las demás propiedades de fuente se controlan exclusivamente con el archivo CSS.

El diseño de la fuente se basa en el ancho de los bordes de los elementos, lo que la hace extremadamente versátil. Con la excepción de las fuentes script, pueden resultar varios estilos y pesos simplemente a partir de variaciones de bordes, utilizando la misma forma. En personajes más complejos, la ruta del clip y el fondo se utilizan para crear el efecto de recorte.

Los elementos anidados se generan cuando el pseudoelemento ::beforey no es suficiente para formar un carácter. ::afterEl uso de valores em para ancho, alto y ancho de borde ayudará más adelante a controlar el tamaño de fuente. Ésta es una de las reglas de oro.

Un carácter (izquierda) se construye como cualquier ícono CSS (derecha). No hay grandes diferencias. A veces es más fácil construir una letra, como un muñeco de palitos, a base de círculos y líneas. Pero aquí es cuando realmente se puede apreciar el papel de la border-radiuspropiedad. Personalmente, nunca fui fanático de los bordes redondeados, pero esta experiencia me hizo cambiar de opinión. Básicamente, no hay límite para lo que puede hacer un radio.

A continuación se muestran los dos únicos ejemplos “reales” de la fuente CSS en este artículo; el resto de las figuras de ejemplo se convierten a SVG para facilitar su visualización en una publicación de blog.

La vista previa serif presenta una situación más compleja, pero como es habitual, una fuente sans tendrá menos elementos con los que lidiar, lo que hará que el archivo sea más pequeño y se cargue más rápido. Esto no es realmente un problema y es lógico: el CSS se lee antes que una fuente incrustada con la @font-faceregla.

El reto

La parte más difícil es superar la proporción de píxeles o alinear los pseudoelementos con la forma base. Las fórmulas matemáticas elaboradas fallaron cuando se cambió el tamaño del personaje. Un navegador tratará cada elemento por separado y los desplazará al valor entero más cercano.

Una solución a esto fue crear tantos pseudoelementos como fuera posible (incluso incluyendo elementos adicionales) y usar una única referencia para un par de formas principales ::beforey no relacionadas con ellas. ::after,En este caso, el navegador mostrará los elementos más o menos en la misma posición.

Un personaje sin un punto de referencia se ilustra con la letra S a continuación. Las secciones superior e inferior de la letra son dos pseudoelementos, sin una forma base en la que confiar (por ejemplo, el área gris en el serif de arriba o aquí en el dígito dos).

Después de crear unos cientos de caracteres, te das cuenta de que un personaje no puede soportar la transformación en línea (es decir skew(), rotate()y similares) porque no se alineará con sus hermanos. Esto se vuelve más obvio visualmente al seleccionar el texto. Por eso, un pseudoelemento tiene mucho sentido. Diría esencial: la segunda regla de oro.

Propiedades personalizadas de CSS

Parece más fácil crear un estilo en CSS que en softwares de fuentes. Tienes la opción de controlar las formas y tamaños de varios personajes a la vez. En CSS, se agrupan más caracteres en el mismo conjunto de reglas.

Las propiedades personalizadas de CSS son extremadamente útiles en esta situación, especialmente para controlar bordes, anchos y posiciones. Los diferentes pesos son resultado de cambios en la variable, con ajustes posteriores. El ajuste fino es inevitable porque las formas y tamaños de los caracteres tienen en cuenta el ancho del borde y es posible que no se muestren proporcionalmente con diferentes bordes, especialmente en formas asimétricas.

El efecto de recorte se crea agregando el mismo color de fondo al elemento superpuesto y luego usando una combinación de colores y efectos usando mix-blend-mode.

Se requiere una variable de color global en CSS para crear un efecto de recorte para elementos anidados que de otro modo seguirían el color principal (los elementos superpuestos coinciden con el fondo).

La background-imagepropiedad no funcionará en personajes creados exclusivamente con bordes y el fondo se cambia si el elemento tiene transformaciones de tamaño o posición (escalar, rotar u otras).

Cuando no se puede utilizar un fondo, la solución está mix-blend-mode: lighten;en fondos oscuros y mix-blend-mode: darken;en fondos claros.

Efectos secundarios

La desventaja es que algunos efectos pueden tener resultados inesperados o incluso opuestos en elementos con propiedades variables. Por lo general, a filterleerá elementos como objetos completos. Para evitar conflictos, los bordes y los efectos de transformación están reservados para el diseño de la fuente.

Fuente a texto

Una fuente no formará un texto. La idea en primer lugar era crear un texto que se cargara junto con el CSS, sin dependencias. Para eso la mejor opción es PHP (mi opinión de novato). Además de representar HTML con funciones en línea, puede realizar casi cualquier tarea imaginable. Sin PHP este proyecto no sería posible.

Naturalmente, la primera tarea con PHP fue dividir un texto aleatorio, eliminar espacios adicionales y crear grupos coincidentes para cada palabra y letra, cada uno con su propia clase. Hasta ahora, todo bien. No insistiré en la parte que salió bien, es una función básica, que utiliza dividir, explotar y todas las demás palabras tomadas de un videojuego.

Aún así, como nunca antes había trabajado en esto, tuve que aprender de la manera más difícil. Nadie me dijo que PHP considera el “0” (cero) como nulo, así que ya pasó un día. No pude entender por qué no se muestran mis ceros.

Para cualquiera que tenga este problema, tal vez sea útil. En lugar de usar la empty()función, usé la siguiente:

function is_blank( $value ) {    return empty( $value )  !is_numeric( $value );}

El otro problema importante fue el rango de personajes. Parece que hay demasiadas configuraciones en HTML, el .htaccessarchivo y en el servidor mismo solo para reconocer caracteres especiales. La solución se encontró después de unos días en la documentación de PHP , publicada por qeremy [atta] gmail [dotta] com, obviamente alguien que vive en un área con muchos signos diacríticos.

function str_split_unicode( $str, $length = 1 ) {  $tmp = preg_split( '~~u', $str, -1, PREG_SPLIT_NO_EMPTY );  if ( $length  1 ) {    $chunks = array_chunk( $tmp, $length );    foreach ( $chunks as $i = $chunk ) {        $chunks[$i] = join( '', ( array ) $chunk );    }    $tmp = $chunks;  }  return $tmp;}

Muchos fragmentos, en mi opinión, pero funciona de maravilla y resuelve todos los problemas. Básicamente, la función pasa por alto la configuración del idioma y leerá cualquier carácter, incluso los no estándar. Los caracteres enterrados profundamente en las tablas Unicode serán reconocidos si la función PHP incluye ese carácter.

Esta función solo creará la posibilidad de generar cada carácter tal como se escribe, sin necesidad de entidades HTML. Esta opción no limitará el uso de texto en formato HTML, pero se deben evitar los códigos en línea o reemplazarlos con alternativas. Por ejemplo, en lugar de utilizar espacios que no se separen ( nbsp;), los elementos se pueden envolver en la nobretiqueta.

Estructura

Con esto solucionado, el siguiente paso es crear una estructura específica para cada personaje. La clase de los elementos HTML y las posiciones del elemento anidado dependen de una larga lista de caracteres que se corresponden con una o más clases. Algunos de los caracteres más básicos no están excluidos de esta lista (por ejemplo, la letra “a” minúscula necesita un remate y eso significa un elemento/clase adicional).

La estructura básica se parece a esto, sólo para hacernos una idea…

'Ć' = 'Cacute C acute'

…que representará tres elementos: el Cacute principal, la letra C y el acento agudo. El resultado se encuentra a continuación, donde el cuadrado rojo representa el elemento principal, que contiene los otros dos elementos preestablecidos.

La técnica es muy similar a la forma en que se crean los signos diacríticos (a veces ligaduras) en el software de fuentes, basándose en pares. Cuando se cambia un elemento componente, todos los demás se ajustarán.

Debido a que cualquier elemento puede tener múltiples aplicaciones, se evitan los ID y solo se usan clases.

Funciones de tipo abierto

La función PHP está configurada para comportarse de manera diferente según el contexto. El reconocimiento de caracteres está configurado para reemplazar emparejamientos y crear ligaduras al representar el texto CSS.

Las ligaduras contextuales en el texto CSS no son caracteres independientes y no tienen clases específicas. A diferencia de las funciones OpenType convencionales, los caracteres se rediseñan, no se reemplazan. La interacción se controla en CSS aplicando estilo al segundo elemento, para fusionarlo o formar un nuevo carácter.

Las funciones se activan con una clase específica agregada al contenedor principal. Las alternativas se muestran en cualquier circunstancia, independientemente de si un carácter está registrado o no, en todos los navegadores, con o sin soporte de función de fuente.

HTML syntax

Any HTML element can include the CSS font, as long it has the .css class next to the weight of the font. To select a wei