Layout de texto para meme

Ele seleciona um único tamanho de fonte legível, quebra cada legenda em linhas e retorna caixas delimitadoras em pixels próximas às bordas superior e inferior. O cálculo é determinístico, portanto a mesma entrada sempre produz as mesmas coordenadas. Use o resultado com Canvas, SVG, uma biblioteca de imagens ou um serviço de renderização para manter a tipografia consistente sem ajustar tamanhos por tentativa e erro.

Informe a tela e as duas legendas

Digite a largura e a altura da imagem em pixels e, em seguida, o texto que deve aparecer na parte superior e na parte inferior. As duas legendas são obrigatórias, pois este layout equilibra um meme completo com duas áreas de texto. Os espaços no início e no fim são removidos, e espaços repetidos dentro da legenda são normalizados antes da medição. Assim, uma legenda vazia gera um erro de entrada em vez de uma caixa enganosa sem tamanho. As dimensões devem ser números inteiros entre 64 e 10,000 pixels, e cada legenda pode ter até 500 caracteres. Esses limites tornam o cálculo previsível tanto na página interativa quanto em um fluxo automatizado. A margem depende do menor lado da imagem, mantendo um afastamento visual semelhante em formatos retrato, paisagem e quadrado. Se a imagem for redimensionada, faça o cálculo com as dimensões finais para preservar as quebras e o alinhamento.

Entenda o ajuste e a quebra de linhas

A calculadora escolhe um tamanho de fonte inteiro compartilhado pelas duas legendas. Ela começa com um valor derivado das dimensões da imagem e testa tamanhos progressivamente menores até que os blocos superior e inferior caibam. Cada legenda pode ocupar até quarenta e dois por cento da altura útil, deixando separação mesmo quando ambas precisam de várias linhas. As palavras permanecem inteiras sempre que possível. Quando uma palavra é mais larga que a área disponível, ela é dividida em partes para que a caixa nunca ultrapasse a imagem. As estimativas usam um perfil interno estável para letras grossas e condensadas: caracteres estreitos ocupam menos espaço, enquanto maiúsculas largas ocupam mais. É uma estimativa analítica, não uma medição de fonte feita pelo navegador. Para obter a correspondência mais próxima, use uma fonte condensada em negrito semelhante à Impact, aplique a altura de linha retornada e centralize todas as linhas.

Renderize a geometria em pixels

O resultado inclui o tamanho de fonte selecionado, a altura de linha, a margem externa e objetos separados para as áreas superior e inferior. Cada objeto contém suas linhas, além das coordenadas x e y, largura e altura em pixels. A caixa superior começa na margem calculada. A caixa inferior termina à mesma distância da borda de baixo, mantendo sua posição estável independentemente do número de linhas. Desenhe as linhas a partir da coordenada y da caixa, avançando pela altura de linha, e centralize cada uma em relação à imagem inteira. Se a API gráfica posicionar texto pela linha de base, adicione antes a ascendente da fonte escolhida. Espessura do contorno, sombra, uso de maiúsculas e cor ficam fora desta capacidade: alteram a aparência, mas não a geometria reservada. Em automações, salve os valores com as legendas para reproduzir a composição sem repetir testes manuais de tamanho.