Override number of space indentation for #-style nested list

Question

Using Sphinx 3.2.1 with reST

Hello, I would like to do a 3-space indentation so the image is right aligned with the text above. However, it breaks the list and do 2 separate nested lists. Hence, I have to manually defined the number of the list but I'd rather use the #-style.

This is the list I would like :

#. Nested list point 1 
   
   .. image:: image.png
        :alt: This is an image
        :scale: 100%
|

#. Nested list point 2

This is the list I need to write for a proper list (with a tab):

#. Nested list point 1 
   
        .. image:: image.png
                :alt: This is an image
                :scale: 100%
|

#. Nested list point 2

Is there any solution to override that rule in Sphinx ? An alternative solution for this version of Sphinx ? Or is it available in the newest ?

I tried different combination of indentations and removing the pipe |

Thanks in advance !

Answer 1

The snippet below works for me, except for the right alignment. reStructuredText's image directive is a block directive and does not directly support inline attributes. You could inject raw HTML, but that would be an ugly hack.

reStructuredText

#.  Nested list point 1

    .. image:: image.png
        :alt: This is an image
        :scale: 100%
        :class: my-right-align-class

#.  Nested list point 2

HTML

<ol class="arabic">
<li><p>Nested list point 1</p>
<a class="my-right-align-class reference internal image-reference" href="image.png"><img alt="This is an image" class="my-right-align-class" src="image.png" style="width: 958.0px; height: 276.0px;"></a>
</li>
<li><p>Nested list point 2</p></li>
</ol>

Display

However there is a work around by using a substitution.

reStructuredText

.. |myimage| image:: image.png
    :alt: This is an image
    :scale: 100%
    :class: my-right-align-class

#.  Nested list point 1 |myimage|

#.  Nested list point 2

HTML

<ol class="arabic">
<li><p>Nested list point 1<a class="my-right-align-class reference internal image-reference" href="image.png"><img alt="This is an image" class="my-right-align-class" src="image.png" style="width: 958.0px; height: 276.0px;"></a></p></li>
<li><p>Nested list point 2</p></li>
</ol>

Now the image is inline of the <p>.

From this point, you can put this in your conf.py.

html_css_files = [
    'css/custom.css',
]

...then create a custom style with the class name of my-right-align-class and put that in a file css/custom.css, and fiddle around with that to get exactly what you want. You could use float, but that takes it out of the flow of the list. The styling is left for you to work out to your preference. Now that it is inline, you might not want it right-aligned.

I also recommend using 4 spaces for indentation. See https://stackoverflow.com/a/48313531/2214933 and https://stackoverflow.com/a/45683081/2214933 for an explanation.