Cree una especificación de imagen de marcador

Una especificación de imagen de marcador resulta útil cuando un diseño necesita una geometría de imagen previsible antes de disponer del recurso definitivo. Indique una anchura y una altura positivas en píxeles y, si lo desea, colores hexadecimales para el fondo y el texto. El resultado describe el lienzo, los colores normalizados y una etiqueta de dimensiones situada exactamente en el centro.

Defina el lienzo antes de construir la interfaz

Comience con la anchura y la altura exactas que deberá ocupar la imagen final. Ambos valores se expresan en píxeles y deben ser enteros positivos, lo que mantiene la especificación apta para navegadores, sistemas de diseño y datos de prueba habituales. El objeto de dimensiones devuelto conserva esos valores sin escalarlos ni deducir una relación de aspecto.

Así, el resultado funciona como un límite estable entre el sistema de contenidos que conoce el espacio necesario y el renderizador que después convertirá la especificación en SVG, instrucciones de canvas, CSS u otro formato. Como esta capacidad devuelve una descripción en lugar de datos binarios, usted conserva el control sobre el tipo de archivo, la compresión, la tipografía y el entorno de renderizado. Un componente de tarjeta puede solicitar un formato horizontal y un avatar uno cuadrado, ambos con la misma estructura previsible.

Las dimensiones nulas, negativas, fraccionarias, ausentes o no numéricas se rechazan en vez de corregirse silenciosamente, para impedir que datos de diseño erróneos avancen por el proceso.

Elija colores con valores hexadecimales canónicos

Los colores de fondo y texto son opcionales. Si se omiten, la especificación emplea un fondo gris claro neutro y un texto gris oscuro que sirven como valores prácticos para un marcador. Si se proporcionan, cada color debe usar notación hexadecimal CSS de tres, cuatro, seis u ocho dígitos; el signo de almohadilla es opcional.

Las formas abreviadas se expanden y las letras se convierten en mayúsculas, de modo que entradas equivalentes producen un único valor canónico. Así, una forma corta y su equivalente de seis dígitos no generan claves de caché ni instantáneas distintas sin necesidad. Las formas de cuatro y ocho dígitos conservan la información alfa para renderizadores compatibles con transparencias.

La capacidad no admite nombres de colores, degradados, funciones ni tokens de diseño, porque dependen de un entorno de estilo concreto y reducirían la portabilidad. Tampoco afirma que la pareja seleccionada cumpla una norma de contraste. Si la legibilidad es esencial, valide los colores normalizados antes de renderizar.

Los errores claros identifican el campo cuyo formato no se admite.

Renderice la etiqueta centrada de forma uniforme

El texto de la etiqueta se genera directamente a partir de las dimensiones validadas con el formato habitual de anchura por altura. Su coordenada horizontal equivale a la mitad de la anchura y la vertical a la mitad de la altura, por lo que las dimensiones impares pueden producir correctamente coordenadas de medio píxel. Los valores explícitos de alineación horizontal y vertical indican al renderizador que debe anclar la etiqueta por el centro y no interpretar las coordenadas como un origen superior izquierdo.

Esto evita incorporar supuestos sobre la familia tipográfica, el tamaño de letra, el interlineado o la medición del texto, aspectos que corresponden a la capa de renderizado. Una implementación web puede trasladar los campos a atributos de texto SVG, mientras que una biblioteca gráfica del servidor puede usar las mismas coordenadas con sus propias opciones de centrado. La especificación es determinista porque solo efectúa validación, normalización y aritmética.

Ninguna llamada de red, reloj, fuente aleatoria o estado almacenado afecta al resultado, lo que aporta estabilidad a pruebas visuales, documentación, esqueletos y datos de ejemplo.