Automatically Generate Caption from "caption" Attribute - jQuery

Hmm, I started messing with jQuery just a few days ago, but hey, it's fun. When I was a high school kid, HTML was not this dynamic. Browsers in these days look much like on-the-fly compiler or virtual machine. If one's not cautious ... XSS ... ahem, anyway, I wrote a caption generator with jQuery.

Example 1


I incorporated my script with third-party HTML sanitizer "jquery-clean" and restricted caption generation to occur only within .post-body class. Safety caution is good caution.


Caption Generator

Even though a HTML <table> tag can incorporate with a <caption> tag, it's just for a table. I wanted almost every HTML tag to be able to incorporate with caption. Here it goes:
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<!-- Sanitizer -->
<script src='http://jquery-clean.googlecode.com/svn/trunk/jquery.htmlClean-min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
function captionize() {
    // Sanitizer Setting - Paranoia
    $.htmlClean.defaults.removeTags =
        ["!DOCTYPE","applet","area","base","basefont","body",
         "button","form","frame","frameset","head","html",
         "iframe","input","isindex","link","menu","meta",
         "noframes","noscript","object","script","select",
         "style","table","title","var","?xml"];
    $.htmlClean.defaults.notRenderedTags =
        ["!DOCTYPE","applet","area","base","basefont","body",
         "button","form","frame","frameset","head","html",
         "iframe","input","isindex","link","menu","meta",
         "noframes","noscript","object","script","select",
         "style","table","title","var","?xml"];
    $(".post-body").each(function() {
        // Caption insertion
        $(this).find("*[caption]").after(function() {
            return $("&lt;div&gt;&lt;/div&gt;").addClass("caption")
                .css("width", $(this).outerWidth(true))
                .css("text-align", "center")
                .html($.htmlClean($(this).attr("caption")))
        });
    });
}
// handy "Add Event" function
if ( window.addEventListener ) {
    addEvent = function(element, event, fn) {
        element.addEventListener(event, fn, false);
    };
} else {
    addEvent = function(element, event, fn) {
        element.attachEvent('on' + event, fn);
    };
}
// Call this when document.body is available.
if ( document.body ) {
    captionize();
} else {
    addEvent(window, 'load', captionize);
}
//]]>
</script>
I hadn't done enough testing and code reading on "jquery-clean," so that I just settled to be paranoid about various HTML tags. You can see how paranoid I had become from $.htmlClean.defaults.removeTags and $.htmlClean.defaults.notRenderedTags.

Just below <head> or likewise just above </head> would be a suitable place to put this script snippet.

Known Problem

Currently, the width of a caption shouldn't be larger than the width of a captioned element because the center of the caption no longer matches the center of the captioned element, meaning text centering breaks. But this implementational favor to text centering poses a drawback in many cases: if a captioned element is small in width, so as its caption, and often its generated caption becomes ugly. And also, a generated caption can't cope with the captioned element's floating.

Example 2
Some text. あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
祇辻飴葛蛸鯖鰯噌庖箸
ABCDEFGHIJKLM
abcdefghijklm
1234567890

The solution is to wrap a caption and captioned element with a block element like <table> or <div>. This way, one can choose different widths for a captioned element and caption. And caption's centering will be much easier to implement. I'm thinking about imitating the way how Blogger inserts an image and its caption, it won't be difficult I think.

But not now, I'll go back to C/C++-ing for now.

Comments

Popular posts from this blog

Hardcoding Data Like Images and Sounds into HTML or CSS

DDS for GIMP (Mountain Lion, Native, no X11 GUI)

Make It Work: Global .gitattributes