Crie uma especificação de imagem placeholder

Uma especificação de imagem placeholder é útil quando um layout precisa de geometria previsível antes que a arte final esteja disponível. Informe largura e altura positivas em pixels e, se desejar, cores hexadecimais para o fundo e o texto. O resultado descreve a tela, as cores normalizadas e um rótulo de dimensões posicionado exatamente no centro.

Defina a tela antes de montar a interface

Comece pela largura e pela altura exatas que a imagem final deverá ocupar. Os dois valores são expressos em pixels e precisam ser números inteiros positivos, mantendo a especificação adequada a navegadores, sistemas de design e dados de teste comuns. O objeto de dimensões retornado preserva esses valores sem aplicar escala nem presumir uma proporção.

Assim, o resultado funciona como um contrato estável entre o sistema de conteúdo, que conhece o espaço necessário, e o renderizador, que depois transformará a especificação em SVG, comandos de canvas, CSS ou outro formato. Como esta capacidade fornece uma descrição em vez de dados binários, você mantém o controle sobre tipo de arquivo, compactação, tipografia e ambiente de renderização. Um componente de cartão pode solicitar uma especificação horizontal, enquanto um avatar pode solicitar uma quadrada, ambos recebendo a mesma estrutura previsível.

Dimensões nulas, negativas, fracionárias, ausentes ou não numéricas são rejeitadas em vez de ajustadas silenciosamente, evitando que dados incorretos de layout avancem no fluxo.

Escolha cores com valores hexadecimais canônicos

As cores de fundo e de texto são opcionais. Quando você as omite, a especificação usa um fundo cinza-claro neutro e um texto cinza-escuro, opções práticas para placeholders. Quando informada, cada cor deve seguir a notação hexadecimal CSS com três, quatro, seis ou oito dígitos; o sinal de cerquilha é opcional.

As formas abreviadas são expandidas e as letras passam para maiúsculas, fazendo entradas equivalentes produzirem um único valor canônico. Por exemplo, uma cor curta e sua versão de seis dígitos não criam chaves de cache ou snapshots diferentes sem necessidade. As formas de quatro e oito dígitos preservam informações alfa para renderizadores que aceitam transparência.

Esta capacidade não admite nomes de cores, gradientes, funções ou tokens de design, pois esses valores dependem de um ambiente de estilo específico e reduziriam a portabilidade. Ela também não garante que o par escolhido atenda a uma norma de contraste. Quando a legibilidade for importante, valide as cores normalizadas antes da renderização.

Mensagens claras apontam imediatamente o campo com formato incompatível.

Renderize o rótulo centralizado de modo consistente

O texto do rótulo é gerado diretamente a partir das dimensões validadas, no formato familiar de largura por altura. A coordenada horizontal corresponde à metade da largura, e a vertical, à metade da altura; por isso, dimensões ímpares podem produzir corretamente coordenadas de meio pixel. Valores explícitos de alinhamento horizontal e vertical orientam o renderizador a ancorar o rótulo pelo centro, sem tratar as coordenadas como origem superior esquerda.

Isso evita incorporar pressupostos sobre família tipográfica, tamanho da fonte, altura da linha ou medição do texto, escolhas que pertencem à camada de renderização. Uma implementação no navegador pode mapear os campos para atributos de texto SVG, enquanto uma biblioteca gráfica no servidor pode usar as mesmas coordenadas com suas próprias opções de centralização. A especificação permanece determinística porque realiza somente validação, normalização e aritmética.

Nenhuma chamada de rede, relógio, fonte aleatória ou estado armazenado influencia o resultado.