One way to solve it, as you’ve noted, is to replace p with a span tag.

For people interested in substituting the markup used to generate the auto-captioning, it’s easy enough – just tweak the figure and caption objects (change ‘div’ and ‘p’ to whatever element you’d like to use):

var figure = new Element('div', {
  'class' : 'figure',
  'styles' : {
    'width' : el.get('width').toInt() + 10
  }
});

var caption = new Element('p', {
  'class' : 'caption',
  'html' : captionText
});

Note that if you do that, you will also need to tweak the CSS style rules to reflect the changes you’ve made. Hope that helps.

Perhaps the DIV and P could/should be substituted with spans or some other inline element. If these were given classes and set to display:block through css then the generated code would stay valid.

Just my tuppence.

@Eddie: Good question actually. If you need to add another class, you can double-declare the classes.

For example, say your class for floating left is alignLeft. Your markup would then be

  <img class="captioned alignLeft" />

Just separate the classes with spaces, this way you can assign multiple classes to a particular page object.

Let me know if this works or not. I’m assuming your image would align to the left of the container div (<div class="figure">) though.

This might be a very stupid question: what if I need the img class for positioning the image?

It isn’t necessarily that you phrased anything poorly, it’s just that in my noviceness (in both js and mootools) I’d never seen a function that had “current element” as an argument.

Just another hurdle to get over whilst learning the conventions of languages and frameworks. I had similar issues figuring out how event handling works in actionscript 3.

Suggestion (I should really post this on your blog, but another option can be the margins. I didn’t like how I set the div margins to be static at 5 pixels on each side.

I wasn’t planning on releasing this as a plugin, but if enough people find use for this, Chris and I can work together to release a more robust auto-captioning plugin.