0

I've got a reStructuredText document for which I have a set of images and paragraphs that explain them. I want the images to be left justified and the text to flow around them. If I were doing this in html, I'd just insert <div class="clearfix"></div> inbetween the <img><p></p> pairs. In restructured text, I've got something that looks like this:

.. image:: path/to/image.png
   :width: 200px
   :align: left

very interesting paragraph about path/to/image.png

.. image:: path/to/another/image.png
   :width: 200px
   :align: left

probably the most interesting paragraph ever about path/to/another/image.png

The result looks something like this screenshot because it doesn't have clearfix classes inbetween things:

enter image description here

How do I fix this in reStructuredText? Is there a better way?

dino
  • 3,093
  • 4
  • 31
  • 50

1 Answers1

1

What you have should work with a default sphinx html build. The wrapping will occur based on text size and image size.

.. image:: path/to/image.png
   :width: 200px
   :align: left

very interesting paragraph about path/to/image.png

Will produce the following results, one with 200px width, and the other with 400px width. With text wrapping dependent on size.

example

Additional options are available. If the text takes up less vertical space than the image and you want to include the "clearfix" class you can insert custom html by using the raw directive.

.. raw:: html

   <div class="clearfix">

.. image:: path/to/image.png
   :width: 200px
   :align: left

very interesting paragraph about path/to/image.png

.. raw:: html

   </div>
Cole
  • 1,699
  • 1
  • 17
  • 21
  • thanks for the catch on the image directive. It was just a bug on SO. I updated my question accordingly to avoid confusion. The challenge with this is when the paragraph text takes up less vertical space than the image. Any ideas how to fix it in that situation? – dino May 06 '14 at 21:57
  • Increase the image size.. Or, you can try one of the other [sphinx themes](http://sphinx-doc.org/theming.html). Extend the default [sphinx template](http://sphinx-doc.org/templating.html) with custom css. Or you could use the [.. raw:: html](http://docutils.sourceforge.net/docs/ref/rst/directives.html#raw-data-pass-through), directive and input html you are used to directly into the code. – Cole May 07 '14 at 00:06
  • 1
    The raw directive was just what I was looking for; thanks! I proposed an edit to your answer to incorporate that. – dino May 07 '14 at 12:30
  • me neither; thanks for putting the answer in there though. that's the important thing! – dino May 09 '14 at 18:31