gc9

ROCm readthedocs column width, table wrapping

Discussion created by gc9 on Feb 23, 2020

The ROCm documentation on the readthedocs io site is written in reStructuredText (.rst).
It is compiled and uses the readthedocs sitewide theme.css.

 

The theme.css is designed to be responsive to varying browser size, but does not work well for wide tables and images.  The content column is too narrow, and the table cell text lines do not wrap.

 


It appears to be an old problem, so it may be unlikely to change in general, though it looks like there are ways for doc developers to override it.  https://github.com/readthedocs/sphinx_rtd_theme/issues/117

 

What can readers do?

 

One way to workaround it is to disable a couple of the css rules, either automatically with a userstyle, or manually.

 

To disable the rules automatically

 

One approach is to use a browser add-on like Stylus or Stylish to make these overrides automatically.

Two userstyles are helpful:

 

To disable the rules manually

 

1. Load page in browser, say
  https://rocm-documentation.readthedocs.io/en/latest/GCN_ISA_Manuals/testdocbook.html
 
2. Press the F12 key on the keyboard to open the browser's developer pane.
  (By default the developer pane is usually docked to the bottom of the
   browser window, so the full width the content pane is visible.)

 

3. To disable content column width limit:

 

  • Click the content selection arrow tool button at the top left corner of the devloper pane.
  • Click in the white margin around the content column.  This should select <div class="wy-nav-content">
  • Find the ".wy-nav-content" rule in the middle column of the developer pane and hover the mouse pointer over it.  It should contain somehing like:

 

    .wy-nav-content {
      [x] padding: 1.618em 3.236em;
      [x] height: 100%;
      [x] max-width: 800px;
      [x] margin: auto;
    }

  • Click the checkbox next to "[x] max-width: 800px;" to temporarily disable it on this page.

   
4. To enable table content line wrapping:

 

      .wy-table-responsive table td, .wy-table-responsive table th {
        [x] white-space:nowrap;
      }

 

  • Click the checkbox next to "[x] white-space:nowrap;" to temporarily disable it on this page.

Outcomes