Fix #4550: html: Centering tables by default using CSS

sphinx-doc · May 6, 2019 · 107c20a · 107c20a
1 parent 035d550
commit 107c20a
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 66 deletions.
diff --git a/CHANGES b/CHANGES
@@ -11,6 +11,7 @@ Incompatible changes
   API directly
 * #6230: The anchor of term in glossary directive is changed if it is consisted
   by non-ASCII characters
+* #4550: html: Centering tables by default using CSS
 
 Deprecated
 ----------

diff --git a/sphinx/templates/latex/longtable.tex_t b/sphinx/templates/latex/longtable.tex_t
@@ -1,5 +1,5 @@
 \begin{savenotes}\sphinxatlongtablestart\begin{longtable}
-<%- if table.align == 'center' -%>
+<%- if table.align in ('center', 'default') -%>
   [c]
 <%- elif table.align == 'left' -%>
   [l]

diff --git a/sphinx/templates/latex/tabular.tex_t b/sphinx/templates/latex/tabular.tex_t
@@ -1,6 +1,6 @@
 \begin{savenotes}\sphinxattablestart
 <% if table.align -%>
-  <%- if table.align == 'center' -%>
+  <%- if table.align in ('center', 'default') -%>
   \centering
   <%- elif table.align == 'left' -%>
   \raggedright

diff --git a/sphinx/templates/latex/tabulary.tex_t b/sphinx/templates/latex/tabulary.tex_t
@@ -1,6 +1,6 @@
 \begin{savenotes}\sphinxattablestart
 <% if table.align -%>
-  <%- if table.align == 'center' -%>
+  <%- if table.align in ('center', 'default') -%>
   \centering
   <%- elif table.align == 'left' -%>
   \raggedright

diff --git a/sphinx/themes/basic/static/basic.css_t b/sphinx/themes/basic/static/basic.css_t
@@ -289,6 +289,12 @@ img.align-center, .figure.align-center, object.align-center {
   margin-right: auto;
 }
 
+img.align-default, .figure.align-default {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .align-left {
     text-align: left;
 }
@@ -297,6 +303,10 @@ img.align-center, .figure.align-center, object.align-center {
     text-align: center;
 }
 
+.align-default {
+    text-align: center;
+}
+
 .align-right {
     text-align: right;
 }
@@ -368,6 +378,11 @@ table.align-center {
     margin-right: auto;
 }
 
+table.align-default {
+    margin-left: auto;
+    margin-right: auto;
+}
+
 table caption span.caption-number {
     font-style: italic;
 }

diff --git a/sphinx/transforms/__init__.py b/sphinx/transforms/__init__.py
@@ -293,7 +293,7 @@ def apply(self, **kwargs):
         # type: (Any) -> None
         matcher = NodeMatcher(nodes.table, nodes.figure)
         for node in self.document.traverse(matcher):  # type: nodes.Element
-            node.setdefault('align', 'center')
+            node.setdefault('align', 'default')
 
 
 class FilterSystemMessages(SphinxTransform):

diff --git a/sphinx/writers/latex.py b/sphinx/writers/latex.py
@@ -1565,6 +1565,7 @@ def visit_image(self, node):
                 (1, 'middle'): ('\\raisebox{-0.5\\height}{', '}'),
                 (1, 'bottom'): ('\\raisebox{-\\height}{', '}'),
                 (0, 'center'): ('{\\hspace*{\\fill}', '\\hspace*{\\fill}}'),
+                (0, 'default'): ('{\\hspace*{\\fill}', '\\hspace*{\\fill}}'),
                 # These 2 don't exactly do the right thing.  The image should
                 # be floated alongside the paragraph.  See
                 # https://www.w3.org/TR/html4/struct/objects.html#adef-align-IMG

diff --git a/tests/test_build_html.py b/tests/test_build_html.py
diff --git a/tests/test_ext_graphviz.py b/tests/test_ext_graphviz.py
@@ -21,7 +21,7 @@ def test_graphviz_png_html(app, status, warning):
     app.builder.build_all()
 
     content = (app.outdir / 'index.html').text()
-    html = (r'<div class="figure align-center" .*?>\s*'
+    html = (r'<div class="figure align-default" .*?>\s*'
             r'<div class="graphviz"><img .*?/></div>\s*<p class="caption">'
             r'<span class="caption-text">caption of graph</span>.*</p>\s*</div>')
     assert re.search(html, content, re.S)
@@ -52,7 +52,7 @@ def test_graphviz_svg_html(app, status, warning):
 
     content = (app.outdir / 'index.html').text()
 
-    html = (r'<div class=\"figure align-center\" .*?>\n'
+    html = (r'<div class=\"figure align-default\" .*?>\n'
             r'<div class="graphviz"><object data=\".*\.svg\".*>\n'
             r'\s*<p class=\"warning\">digraph foo {\n'
             r'bar -&gt; baz\n'

diff --git a/tests/test_ext_inheritance_diagram.py b/tests/test_ext_inheritance_diagram.py
@@ -23,7 +23,7 @@ def test_inheritance_diagram_png_html(app, status, warning):
 
     content = (app.outdir / 'index.html').text()
 
-    pattern = ('<div class="figure align-center" id="id1">\n'
+    pattern = ('<div class="figure align-default" id="id1">\n'
                '<div class="graphviz">'
                '<img src="_images/inheritance-\\w+.png" alt="Inheritance diagram of test.Foo" '
                'class="inheritance graphviz" /></div>\n<p class="caption">'
@@ -40,7 +40,7 @@ def test_inheritance_diagram_svg_html(app, status, warning):
 
     content = (app.outdir / 'index.html').text()
 
-    pattern = ('<div class="figure align-center" id="id1">\n'
+    pattern = ('<div class="figure align-default" id="id1">\n'
                '<div class="graphviz">'
                '<object data="_images/inheritance-\\w+.svg" '
                'type="image/svg\\+xml" class="inheritance graphviz">\n'
@@ -80,7 +80,7 @@ def test_inheritance_diagram_latex_alias(app, status, warning):
 
     content = (app.outdir / 'index.html').text()
 
-    pattern = ('<div class="figure align-center" id="id1">\n'
+    pattern = ('<div class="figure align-default" id="id1">\n'
                '<div class="graphviz">'
                '<img src="_images/inheritance-\\w+.png" alt="Inheritance diagram of test.Foo" '
                'class="inheritance graphviz" /></div>\n<p class="caption">'