Reference not rendered correctly in sphinx 2.2.0

[alex4200]

Describe the bug

References are not rendered correctly in the references section. See the screenshot below.

To Reproduce
Content of the file source/index.rst:

=============
 Example
=============


Text
=====================

There is some reference [Heil2018]_ and some more [Stefan2014]_ and even more [Sterratt2015]_.
Repeating the last reference [Sterratt2015]_.

References
==========

.. [Heil2018] Reference1
.. [Stefan2014] Reference2            
.. [Sterratt2015] Reference3

compiled with

sphinx-build -M html source build

Expected behavior

I expected to see the text Sterratt2015 in blue above the phrase 'Reference3' like the other two references. Instead, you see only the indices '1' and '2', but no indication of the actual reference.

Screenshots

Environment info

• OS: Ubuntu 16.04.6
• Python version: 3.6.8
• Sphinx version: 2.2.0
• Sphinx extensions:
• Extra tools:

[jfbu]

Which html theme are you using? Is there any Sphinx extension involved? Any kind of CSS customization?

I do not reproduce the problem with either alabaster or classic. I also tried RTD theme.

However the output does show some strange problem with lack of space in output, as we see comparing with 1.8.5 output:

Strange nobody reported this so far (I will check later if this is existing issue; it might also depend on my Firefox settings regarding fonts).

[alex4200]

Yes I see - with the alabaster theme it works as I expected.

I am not an expert with sphinx, but it seems to come down to some internal theme we are using. Also no sphinx extension involved (as far as I can see from the conf.py file).

I will check with that internal theme...

[jfbu]

With Sphinx 1.8.5 I see each reference uses a <table> tag like this

<table class="docutils citation" frame="void" id="heil2018" rules="none">

but with 2.0 or later one sees a global <dl class="citation"> etc...

[jfbu]

Regarding the lack of space, it is simply an insufficient CSS. For example Alabaster contains only

dl dd {
    margin-left: 30px;
}

and basic.css seems not having either special configuration.

Thus I "fixed" it using a _static/css/custom.css file like this:

dl.citation > dd {
    margin-left: 150px;
}

and I added to conf.py

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

here is out it comes out with Alabaster then

In such circumstances the latexpdf has some means to compute an automatic label width, one wonders if something to this effect should be added to html.

Anyway, this still does not address your original issue, which as you reported might be related to some custom theme.

The important point is that probably existing themes do not style enough the References section since Sphinx 2.0 release which has modified the HTML tags used. New mark-up seems much better but it may require additional CSS styling be added to the themes.

Perhaps basic.css should get enhanced for some reasonable default. Ping @tk0miya if you have idea about this?

[tk0miya]

As described by @jfbu, Sphinx moves to HTML5 by default. And it uses <dl> tag for citations. As a workaround, you can switch old behavior via html4_writer = True in your conf.py. Then you'll see <table> tag based citation list.
Thanks,