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:

<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>

The code above will render:

x-meme

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.

Advertisements

2 comments

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s