The HTML5 writer should render hlist nodes with CSS columns

[Screwtapello]

Currently, Sphinx includes the hlist directive which produces a bulleted list split into multiple columns. Internally, it splits the list up into as many equal-sized pieces as there are columns. The HTML5 writer renders this by constructing a one-row table with a list in each column:

sphinx/sphinx/writers/html5.py

Lines 637 to 647 in f45dc5e

	def visit_hlist(self, node: Element) -> None:
	self.body.append('<table class="hlist"><tr>')
	def depart_hlist(self, node: Element) -> None:
	self.body.append('</tr></table>\n')
	def visit_hlistcol(self, node: Element) -> None:
	self.body.append('<td>')
	def depart_hlistcol(self, node: Element) -> None:
	self.body.append('</td>')

The problem with this approach is that it only checks that each column has the same number of items. If some items are a little long and get wrapped across two lines at some zoom levels (or with some fonts, or on some platforms) the whole list can look quite messy. In addition, there's probably accessibility issues (screen readers, etc.) when one list is presented as four separate lists.

But browsers already have a solution to this problem, in the form of the column-count CSS property. Instead of a complex structure of table and lists, Sphinx could just change the typical bulleted-list output from <ul> to <ul style="column-count: 3"> (or whatever the value of the :columns: option is). The Sphinx code would be simpler since it doesn't have to slice up the list, it would be more accessible since a single list in the source would be a single list in the HTML, and it would be robust in the face of runtime layout because the runtime layout engine is doing the work.

[eudoxos]

Besides the advantages you mentioned: a few simple CSS rules would make the hlist adaptive in terms of the number of columns (i.e. less columns on narrower screens).