Software, your way.
burger menu icon
WillMaster

WillMasterBlog > Tips and Tricks

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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 &nbsp; 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

Was this blog post helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method


All information in WillMaster Blog articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

Recent Articles in the Library

Form Debugging Assistant

Form Debugging Assistant is a handy tool. If you keep the JavaScript in a file on your server, it can be pulled into a web page whenever you need to debug a form.

Make Smaller Copy of Image

The MakeSmallerCopyOfImage function can be placed into your PHP scripts. It is designed to make a copy of an image and reduce its size.

Tap to Select

Making it easy for your site visitors to select content they probably will want to copy is a gesture of friendliness.

CSV to HTML Table

Create an HTML table from a CSV file.

Image Transparency

An image can be given a degree of transparency with the CSS opacity property.

Finding Div's Top-Left Corner Position

The coordinates of any type of HTML element can be determined.

Silent Notes

Once implemented, this system is a nice logger when occurrences of extra-important events on a web page need to be counted.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2025 Will Bontrager Software LLC