10/3/2009

Replacing Tumblr’s Missing Paragraphs

matthewb:

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.

Useful. The missing paragraph tags on the automatically imported Twitter fed has irritated me for a while.


Previous post
Blog post: Spring wave http://xrl.
Next post
Playing with themes. Again.