X-Meme: A Modern HTML5 Approach to Memes. You don’t say?

Memes have been circulating the Internet for many years and are among the few phenomena whose creation approach never changed (and never will). Dare to imagine a meme without the sloppy white font, black stroke and huge text shadow?  The charm of memes is not only in the witty phrases, but also in that particular design belonging to the Mid ’90s, Paint, PSP and other even more obscure image editors.

In the era of HTML5, memes keep going strong and refuse to die, so here is a fun experiment – a custom HTML5 Web Component, making possible the creation of memes via a simple HTML tag, built on top of Mozilla’s X-tags. Meet X-Meme:

[sourcecode language=”html”]
<acidjs-xmeme
    src="images/image-01.jpg"
    caption-top="I don’t always play the guitar"
    caption-bottom="But when I do, I do it when my hoomans are sleeping">
</acidjs-xmeme>
[/sourcecode]

The code above will render:

Attributes of the <acidjs-xmeme></acidjs-xmeme> Tag:

• src – path to the meme image (required).
• caption-top – optional top caption.
• caption-bottom – optional bottom caption.

The current version is using HTML and CSS for rendering, but for the next I’m planning optional canvas rendering. Until then, you may check the demo and eventually download and use it. These days I am particularly interested in HTML5 Web Components, so if you share the same interest you may want to check my other experiments.