Diseño de texto para memes

Selecciona un único tamaño de fuente legible, distribuye cada texto en líneas y devuelve cuadros delimitadores en píxeles junto a los bordes superior e inferior. El cálculo es determinista: la misma entrada siempre genera las mismas coordenadas. Use el resultado con Canvas, SVG, una biblioteca de imágenes o un servicio de renderizado para obtener una tipografía uniforme sin ajustar tamaños mediante prueba y error.

Indique el lienzo y los dos textos

Introduzca la anchura y la altura de la imagen en píxeles y, después, los textos que deben aparecer arriba y abajo. Ambos son obligatorios, ya que esta herramienta equilibra una composición de meme con dos zonas de texto completas. Se eliminan los espacios al principio y al final, y los espacios repetidos se normalizan antes de medir. Por ello, un texto vacío genera un error de entrada en lugar de un cuadro engañoso sin tamaño. Las dimensiones deben ser números enteros entre 64 y 10,000 píxeles, y cada texto puede contener hasta 500 caracteres. Estos límites mantienen un cálculo previsible tanto en la página interactiva como en procesos automatizados. El margen depende del lado más corto, por lo que conserva una separación visual semejante en imágenes verticales, horizontales y cuadradas. Si va a redimensionar la imagen, calcule el diseño con sus dimensiones finales.

Comprenda el ajuste y la división en líneas

La calculadora elige un tamaño de fuente entero que comparten ambos textos. Empieza con un valor derivado de las dimensiones de la imagen y prueba tamaños cada vez menores hasta que los bloques superior e inferior caben. Cada bloque puede ocupar como máximo el cuarenta y dos por ciento de la altura útil, de modo que queda separación incluso cuando ambos usan varias líneas. Siempre que es posible, las palabras permanecen completas. Si una palabra supera la anchura disponible, se divide en fragmentos para impedir que el cuadro salga de la imagen. Las estimaciones usan un perfil interno estable de letras gruesas y condensadas: los caracteres estrechos ocupan menos y las mayúsculas anchas, más. Se trata de una estimación analítica, no de una medición del navegador. Para acercarse al resultado, use una fuente condensada y gruesa parecida a Impact, respete el interlineado devuelto y centre cada línea.

Renderice la geometría devuelta

El resultado incluye el tamaño de fuente elegido, el interlineado, el margen exterior y objetos separados para las zonas superior e inferior. Cada objeto contiene las líneas resultantes y sus coordenadas x e y, anchura y altura en píxeles. El cuadro superior comienza en el margen calculado. El inferior termina a la misma distancia del borde de abajo, por lo que su posición se mantiene aunque cambie el número de líneas. Dibuje cada línea desde la coordenada y del cuadro, avanzando según el interlineado, y céntrela respecto a toda la imagen. Si su API gráfica posiciona el texto por la línea base, añada antes el ascendente de la fuente elegida. El contorno, la sombra, el uso de mayúsculas y el color quedan fuera de esta capacidad porque afectan al aspecto, no al espacio reservado. En automatizaciones, guarde la geometría con los textos para reproducir la composición sin repetir ajustes manuales.