CODEWITHSUNDEEP
python-sphinxrestructuredtext
OverLordGoldDragon
OverLordGoldDragon

Reputation: 19776

:align: image without text wrapping

How can I align an image but without text wrapping around it? One way is to remove

.figure.align-left {float: left;}

from CSS, but this might break other things - anything cleaner in RST (I'm aware of .. raw::html)? Example case, wrapping in Firefox:

Don't wrap me
-------------

.. figure:: img.png
  :align: left
  :width: 500px

or me

Upvotes: 0

Views: 386

Answers (2)

G. Milde
G. Milde

Reputation: 872

The figure directive provides two options to specify a class value. While :class: is passed on to the included <image>, :figclass: goes to the <figure> element:

.. figure:: img.png
    :align: left
    :class: image-class-value
    :figclass: figure-class-value

Upvotes: 0

Steve Piercy
Steve Piercy

Reputation: 15045

Sphinx has a special directive, class, that assigns a CSS class attribute to the next element. Details of how that works is in the docutils documentation of class.

However in Sphinx, when the default domain contains a class directive, this directive will be shadowed. Therefore, Sphinx re-exports it as rst-class (see note). As a result you must use that in Python because its language uses class.

The following reStructuredText markup:

.. rst-class:: image-no-text-wrap

.. figure:: img.png
    :align: left
    :width: 500px

This will yield something like the following HTML:

<figure class="image-no-text-wrap align-left">
<a class="reference internal image-reference" href="_images/img.png"><img alt="_images/img.png" src="_images/img.png" style="width: 500px;"></a>
</figure>

Finally define the CSS selector however you think best to prevent text wrapping, for example:

figure.image-no-text-wrap {
  overflow: hidden;
  white-space: nowrap;
}

Upvotes: 3

Related Questions