Meme-Text-Layout

Er bestimmt eine gemeinsame, gut lesbare Schriftgröße, bricht beide Texte in Zeilen um und liefert Pixelrahmen am oberen und unteren Bildrand. Die Berechnung ist deterministisch: Dieselbe Eingabe führt stets zu denselben Koordinaten. Verwenden Sie das Ergebnis mit Canvas, SVG, einer Bildbibliothek oder einem Rendering-Dienst, wenn Sie einheitliche Meme-Typografie benötigen, ohne Schriftgrößen durch wiederholtes Ausprobieren anzupassen.

Geben Sie Bildfläche und beide Texte an

Tragen Sie Breite und Höhe des Bildes in Pixeln ein und geben Sie anschließend den Text für den oberen und den unteren Bereich an. Beide Beschriftungen sind erforderlich, weil dieses Layout ein vollständiges Meme mit zwei Textzonen ausbalanciert. Leerzeichen am Anfang und Ende werden entfernt; wiederholte Zwischenräume innerhalb eines Textes werden vor der Messung vereinheitlicht. Eine leere Beschriftung erzeugt deshalb einen Eingabefehler statt eines irreführenden Rahmens ohne Größe. Die Abmessungen müssen ganze Zahlen zwischen 64 und 10,000 Pixeln sein. Jede Beschriftung darf höchstens 500 Zeichen enthalten. Diese Grenzen sorgen sowohl auf der interaktiven Seite als auch in automatisierten Abläufen für eine vorhersehbare Berechnung. Der Rand richtet sich nach der kürzeren Bildseite und wirkt dadurch bei Hochformat, Querformat und quadratischen Bildern ähnlich. Falls Sie das Bild skalieren, führen Sie die Berechnung mit den endgültigen Abmessungen aus.

So funktionieren Einpassung und Zeilenumbruch

Der Rechner wählt für beide Beschriftungen dieselbe ganzzahlige Schriftgröße. Er beginnt mit einem aus den Bildabmessungen abgeleiteten Wert und prüft schrittweise kleinere Größen, bis sowohl der obere als auch der untere Block passt. Jeder Text darf bis zu zweiundvierzig Prozent der nutzbaren Bildhöhe belegen. So bleibt selbst bei mehreren Zeilen Abstand zwischen beiden Bereichen. Wörter werden nach Möglichkeit nicht getrennt. Ist ein einzelnes Wort breiter als die verfügbare Fläche, wird es in Teile zerlegt, damit der Rahmen das Bild nie überschreitet. Die Breite wird mit einem stabilen internen Profil für fette, schmale Meme-Schrift geschätzt: Schmale Zeichen benötigen weniger Raum, breite Großbuchstaben mehr. Es handelt sich um eine analytische Schätzung und nicht um eine Schriftmessung im Browser. Nutzen Sie für die beste Übereinstimmung eine fette, schmale Schrift ähnlich Impact, übernehmen Sie den ausgegebenen Zeilenabstand und zentrieren Sie jede Zeile.

Rendern Sie die berechnete Pixelgeometrie

Das Ergebnis enthält die ausgewählte Schriftgröße, den Zeilenabstand, den Außenrand und getrennte Objekte für den oberen und unteren Bereich. Jedes Objekt umfasst seine umgebrochenen Zeilen sowie x- und y-Koordinate, Breite und Höhe in Pixeln. Der obere Rahmen beginnt am berechneten Rand. Der untere endet im gleichen Abstand über der Unterkante und bleibt dadurch unabhängig von der Zeilenzahl stabil positioniert. Zeichnen Sie die Zeilen ab der y-Koordinate des Rahmens in Schritten des angegebenen Zeilenabstands und richten Sie jede Zeile an der Mitte des gesamten Bildes aus. Positioniert Ihre Grafik-API Text anhand der Grundlinie, addieren Sie zuvor die Oberlänge der gewählten Schrift. Konturstärke, Schatten, Großschreibung und Farbe sind bewusst nicht Bestandteil dieser Funktion: Sie verändern die Optik, nicht den reservierten Platz. Speichern Sie in automatisierten Abläufen die Layoutwerte zusammen mit den Texten, damit Sie die freigegebene Komposition später ohne erneute manuelle Versuche reproduzieren können.