markup icon indicating copy to clipboard operation
markup copied to clipboard

Possible regression: `badge` UI pattern in ReStructuredText now fails to render inline images

Open abravalheri opened this issue 1 year ago • 2 comments

It is a common pattern in the Python community to use something similar to the following snippet (in ReStructuredText) to add "badges" as a UI block at the top of the README of repositories:

.. image:: https://img.shields.io/pypi/v/setuptools.svg
   :target: https://pypi.org/project/setuptools

.. image:: https://img.shields.io/pypi/pyversions/setuptools.svg

.. image:: https://github.com/pypa/setuptools/actions/workflows/main.yml/badge.svg
   :target: https://github.com/pypa/setuptools/actions?query=workflow%3A%22tests%22
   :alt: tests

.. image:: https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/charliermarsh/ruff/main/assets/badge/v2.json
    :target: https://github.com/astral-sh/ruff
    :alt: Ruff

.. image:: https://img.shields.io/readthedocs/setuptools/latest.svg
    :target: https://setuptools.pypa.io

.. image:: https://img.shields.io/badge/skeleton-2024-informational
   :target: https://blog.jaraco.com/skeleton

.. image:: https://img.shields.io/codecov/c/github/pypa/setuptools/master.svg?logo=codecov&logoColor=white
   :target: https://codecov.io/gh/pypa/setuptools

.. image:: https://tidelift.com/badges/github/pypa/setuptools?style=flat
   :target: https://tidelift.com/subscription/pkg/pypi-setuptools?utm_source=pypi-setuptools&utm_medium=readme

.. image:: https://img.shields.io/discord/803025117553754132
   :target: https://discord.com/channels/803025117553754132/815945031150993468
   :alt: Discord

Previously, that would render as a horizontal bar:

before

But now each image is occupying a new line:

after

Please note that this was a pattern that historically emerged in the community, so it is wide spread. Therefore this change affects a lot of repositories, and in my opinion represents a regression.

Examples of repositories affected by this change:

https://github.com/python/cpython/tree/v3.13.0a6 https://github.com/pypa/setuptools/tree/v69.5.1 https://github.com/pyca/cryptography/tree/42.0.5 https://github.com/pytest-dev/pytest/tree/v7.4.3 https://github.com/benjaminp/six/tree/1.16.0 https://github.com/scipy/scipy/tree/v1.13.0 https://github.com/pyscaffold/pyscaffold/tree/v4.5 https://github.com/pyca/pynacl/tree/v0.3.0 https://github.com/jpadilla/pyjwt/tree/2.8.0 https://github.com/jaraco/zipp/tree/v3.18.1 https://github.com/python/importlib_metadata/tree/v7.1.0 https://github.com/python/importlib_resources/tree/v6.4.0 https://github.com/pypa/readme_renderer/tree/43.0

and many more ...

abravalheri avatar Apr 19 '24 07:04 abravalheri

I think what may have happened (and this is partially a guess) is that GitHub is now converting reStructuredText to HTML 5 rather than HTML 4. For whatever reason, Docutils' HTML 4 converter renders a sequence of .. image:: directives as a single paragraph of images, whereas its HTML 5 converter renders each image in a separate paragraph. In order to get multiple images in one paragraph in HTML 5, you need to use substitutions, as currently described in the documentation for the image:: directive.

jwodder avatar Apr 23 '24 23:04 jwodder

This was working nicely before, this is still working nicely in every Sphinx build documentation and is still working nicely in all pypi readme that I published since RST is broken on GitHub. Can you make the proper adjusmtent or use a more modern rst builder so the behaviour of github readme continues to be aligned with the tools used by the Python community ?

12rambau avatar May 27 '24 06:05 12rambau

Stale issue message

github-actions[bot] avatar Jul 26 '24 12:07 github-actions[bot]