Layout del testo per meme

Seleziona un’unica dimensione leggibile per il carattere, distribuisce ogni didascalia su più righe e restituisce riquadri in pixel ancorati vicino ai bordi superiore e inferiore. Il calcolo è deterministico: gli stessi dati producono sempre le medesime coordinate. Lei può usare il risultato con Canvas, SVG, una libreria di immagini o un servizio di rendering per ottenere una tipografia uniforme senza procedere per tentativi nella scelta delle dimensioni.

Indichi il formato e le due didascalie

Inserisca la larghezza e l’altezza dell’immagine in pixel, quindi il testo destinato alla parte superiore e a quella inferiore. Entrambe le didascalie sono obbligatorie, perché questo layout bilancia un meme completo con due aree di testo. Gli spazi iniziali e finali vengono eliminati, mentre quelli ripetuti all’interno vengono normalizzati prima della misurazione. Una didascalia vuota genera quindi un errore di input, non un riquadro ingannevole di dimensione nulla. Le dimensioni devono essere numeri interi compresi tra 64 e 10,000 pixel; ogni testo può contenere fino a 500 caratteri. Questi limiti rendono il calcolo prevedibile sia nella pagina interattiva sia in un processo automatico. Il margine dipende dal lato più corto e conserva una distanza visiva simile nei formati verticale, orizzontale e quadrato. Se l’immagine verrà ridimensionata, esegua il calcolo sulle dimensioni finali.

Comprenda adattamento e ritorno a capo

Il calcolatore sceglie una dimensione intera del carattere condivisa dalle due didascalie. Parte da un valore ricavato dalle dimensioni dell’immagine e prova misure progressivamente inferiori finché entrambi i blocchi rientrano nello spazio assegnato. Ciascuna didascalia può usare fino al quarantadue per cento dell’altezza utile, lasciando una separazione anche quando entrambe occupano più righe. Le parole restano intere quando possibile. Se una parola supera la larghezza disponibile, viene suddivisa affinché il suo riquadro non esca dall’immagine. Le stime utilizzano un profilo interno stabile per caratteri spessi e condensati: i segni stretti occupano meno spazio, le maiuscole larghe ne occupano di più. È una stima analitica, non una misurazione del font nel browser. Per avvicinarsi al risultato, usi un carattere condensato in grassetto simile a Impact, applichi l’interlinea restituita e centri ogni riga.

Renderizzi la geometria in pixel

Il risultato comprende la dimensione del carattere selezionata, l’interlinea, il margine esterno e oggetti separati per le aree superiore e inferiore. Ogni oggetto contiene le righe calcolate e le coordinate x e y, la larghezza e l’altezza in pixel. Il riquadro superiore inizia dal margine stabilito. Quello inferiore termina alla stessa distanza dal bordo basso, mantenendo stabile la posizione a prescindere dal numero di righe. Disegni le righe a partire dalla coordinata y del riquadro, avanzando secondo l’interlinea, e le centri rispetto all’intera immagine. Se la sua API grafica posiziona il testo sulla linea di base, aggiunga prima l’ascendente del font scelto. Spessore del contorno, ombra, maiuscole e colore sono esclusi intenzionalmente: cambiano l’aspetto, non la geometria riservata. Nei processi automatici, salvi questi valori insieme alle didascalie per riprodurre la composizione senza nuovi tentativi manuali.