Meme Maker Tips and Tricks

The Meme Maker is a new tool. It is intended to be simple and quick to use.

I made this for myself, at first. I had wanted something where I could quickly pop an image on a page, type some text and position it, then take a screenshot.

In essence, that is what the new tool has going for it. It is a quick, low-hassle way to make a meme.

Other features include the text size change, text color change, background color change, and adjusting of the background opacity.

An advanced feature is that HTML tags can be used. Also inline CSS. Not PHP or JavaScript, though.

Because the meme text field allows HTML and CSS , there are some tricks you may wish to be alerted to. That is the reason for this article.

One caveat: Most HTML tags contain an opening tag and a closing tag, such as <b>text</b>. If you use HTML and the rest of the page suddenly looks messed up, verify your HTML tags are balanced.

The more adept you are with HTML, the more you will be able to use this advanced feature of Meme Maker.

Line breaks —

A new line can be inserted into the meme text with a keyboard enter/return key or the HTML <br> tag. If you use both, you get two line breaks.

Use line breaks to separate text or to shorten text lines.

Push lines in from left —

Type the character entity   at the beginning of the line to push text in from the left. Repeat until the indent is to your liking.

Simple font attributes —

Bold and italic text can be specified with the <b>, </b>, <i>, and </i> tags. Similar with underlining, use the <u></u> set of tags.

Or, use inline CSS to specify those font attributes.

Text change within the meme —

To change specific text color, size, background, font family, or other value within the meme, use inline CSS. Examples:

<span style="color:orange;">Yes!</span>
<span style="font-size:120%;">Yes!</span>
<span style="background-color:rgba(0,0,0,.5);">Yes!</span>
<span style="font-family:cursive;">Yes!</span>
<span style="letter-spacing:3px;">Yes!</span>

Image —

Yes, you may use the img tag to place images onto the meme image.

Video —

The video tag can be used to place videos onto the meme image.

A regular screenshot will capture only the video frame that was present when the screenshot was done. But if you have the ability to capture a screen recording, you should be able to capture a video playing on a section of the uploaded meme image.

Videos From Your Website has information about the video tag. Also the Video Embed element page.

Iframe —

Yes, you may use the iframe tag to insert content onto the meme from another URL.

Give the Meme Maker a try. Even if you have no use for memes, the tool may give you ideas what else text on images can be useful for.

(This content first appeared in Possibilities newsletter.)

Will Bontrager