Matthew Buchanan (Home)

When generating page markup, Tumblr’s template engine outputs any single line (or paragraph) entered into its source, caption or description fields without any containing elements (ie, no <p> tags). Containing elements are only added when there is at least two lines of copy, separated by a blank line.

Although this behaviour is commonplace in text-to-HTML converters, it can prove troublesome when your CSS expects consistent markup in all cases. Here’s a little piece of jQuery magic I wrote to solve this issue for a new theme I’m working on:

$(".content:not(:has(p,ol,ul,dl,blockquote))")
    .wrapInner("<p></p>");

It looks for every element with a class of (in my case) content, checks to see if the element contains any of five common block-level children, and if not, wraps the content in a paragraph tag. You’ll need at least jQuery 1.3 for this selector combination to work.

Update: Here’s a slightly extended version that includes more block level elements, and allows for the situation where the only <p> is the container element from Tumblr’s Answers feature.

$(".content:not(:has(p,dl,div,noscript,
    blockquote,form,hr,table,fieldset,
    address,ol,ul,h1,h2,h3,h4,h5,h6))")
        .wrapInner("<p></p>");
$(".content:has(p.answer_form_container)")
    .each(function() {
        if ($(this).find("p").length==1) {
            var html = $(this).html();
            var i = html.indexOf("<p");
            html = "<p>" + html.substring(0, i)
                + "</p>" + html.substring(i);
            $(this).html(html);
        }
    });