Meme text layout generator

It selects one readable font size for both captions, wraps each caption, and returns pixel bounding boxes anchored near the top and bottom edges. The calculation is deterministic, so identical input always produces identical coordinates. Use the result with Canvas, SVG, an image library, or a rendering service when you need consistent meme typography without trial-and-error resizing.

Supply the canvas and both captions

Enter the image width and height in pixels, followed by the text that belongs at the top and bottom. Both captions are required because the purpose of this layout is to balance a complete two-caption meme. Whitespace at the beginning and end is removed, and repeated whitespace inside a caption is normalized before measurement. An empty caption therefore produces an input error instead of a misleading zero-sized box. Dimensions must be whole numbers from 64 through 10,000 pixels, while each caption may contain up to 500 characters. Those bounds keep the calculation predictable in both an interactive page and an automated workflow. The returned margin is based on the shorter image dimension, which produces visually similar edge spacing for portrait, landscape, and square images. If your source image is resized before rendering, run the calculation with the final dimensions rather than scaling old coordinates; this preserves wrapping decisions, line spacing, and alignment at the size that viewers will actually see.

Understand how fitting and wrapping work

The calculator chooses a single integer font size shared by both captions. It starts from a size derived from the image dimensions and tests progressively smaller sizes until the top and bottom blocks both fit. Each caption can use up to forty-two percent of the usable image height, leaving separation between the two regions even when both texts wrap across several lines. Words are kept intact whenever possible. A word that is wider than the usable area is split into smaller pieces so that its box never extends beyond the image. Width estimates use a stable built-in profile for bold, condensed meme lettering: narrow characters consume less space, while wide capitals consume more. This is an analytic layout estimate rather than a browser font measurement, so the rendering font can affect the final visual edge by a few pixels. For the closest match, use a bold condensed face with metrics similar to Impact, apply the returned line height, center every returned line, and treat the boxes as the reserved drawing regions.

Render the returned pixel geometry

The result includes the selected font size, line height, outer margin, and separate top and bottom objects. Each caption object contains its wrapped lines plus an x coordinate, y coordinate, width, and height in pixels. The top box begins at the calculated margin. The bottom box ends at the same margin above the lower edge, which keeps its placement stable no matter how many lines it contains. Draw lines from the box’s y coordinate in line-height increments and center them horizontally within the full image. If your graphics API positions text by baseline rather than by the top of its line box, add the font ascent appropriate to your chosen typeface before drawing. Stroke width, shadow, capitalization, and color are intentionally outside this capability: they change appearance but not the reserved caption geometry. For automated generation, store these layout values beside the source captions so the same approved composition can be reproduced across renderers, queues, and later image revisions without repeating manual font-size experiments.