Wishlist: Improve the CSS for the R manuals

[bastistician]

The R manuals (like Writing R Extensions) are written in the GNU documentation format Texinfo and converted into several formats, most prominently HTML. The HTML versions are installed with R under file.path(R.home("doc"), "manual") and linked from help.start(). They are also built and published on CRAN, see https://CRAN.R-project.org/manuals.html. Currently they use a minimalistic CSS (which is baked into the generated HTML files). A simple CSS is certainly desirable for maintenance reasons, browser compatibility, and robustness against changes in the texi2any converter, but I believe the appearance of these single-page manuals could still be improved under these constraints.

To make the manuals from their Texinfo sources, one needs the texi2any program from GNU Texinfo. The HTML manuals will be built by default when building R and texi2any is available. To update the HTML outputs after modifying Rman.css simply run make in doc/manuals. If this is too cumbersome, one could of course also play directly with one of the generated HTML manuals (e.g., WRE from R-release on CRAN) and tweak the CSS therein (everything above the body selector are default styles inserted by texi2any).

[hadley]

Brainstorming document: https://docs.google.com/document/d/1Hjlei_ZQqkm3p1PA8GlouXNuvO80C8ZN5_j2Ce_nB5w/edit#heading=h.bk37l2ez2xgg

[paocorrales]

Summary after the R dev day:

Contributors:

• Paola Corrales
• Jayani Lakshika
• Seowoo Jung
• Hadley Wickham
• Fonti Kar
• Hannah Frick

We got a good first version of the CSS improving on many things. The CSS code lives here: https://collabedit.com/ggk9x and there is a copy on the google doc.

There are a few issues to keep working on, those are listed under Outstanding issues in the same google doc

[hadley]

Adding an inline copy of the CSS below, just to make sure it's safe in this issue

```css /* Body --------------------------------------------------- */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.6; background-color: #fff; color: #333; max-width: 80ch; margin: 0 auto; text-align: left; } /* Header sizing ---------------------------------------------*/ h1, h2, h3, h4 { } /* Suppress First Title */ h1.top { display: none; } h1 { font-weight: bold; margin-top: 0; margin-bottom: 0.5em; font-size: 2.5em; } h2 { font-size: 1.8em; margin-block-start: 0.5em; margin-block-end: 0.3em; } h3 { font-size: 1.35em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin-block-start: 0px; } h4 { font-size: 1.2em margin-block-start: 0px; } /* Spans ----------------------------------------------------*/ span.samp { font-family: monospace; } span.command { font-family: monospace; } span.option { font-family: monospace; } span.file { font-family: monospace; } span.env { font-family: monospace; } span.roman { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; } /* Links --------------------------------------------------- */ /* Match r-project.org colour & only show underline on hover */ a:any-link {color: #3864BA; text-decoration: none;} a:any-link:hover {text-decoration: underline;} /* Code ----------------------------------------------------- */ /* Match code font size to body text ---------------------------- */ pre, code, samp, kbd { font-size: 1.15em; } var{ font-size: 1.0em; } /* Code block styling */ div div.example {margin: 0} pre { margin: 0.5em -0.5em; background-color: #f5f5f5; padding: 0.5em; overflow: auto; line-height: 1.7; border: 1px solid #ccc; border-radius: 4px; } /* Inline code ----------------------------------------------------- */ code, samp, var, kbd { background-color: #f5f5f5; border: 1px solid #ccc; padding: 2px 4px; border-radius: 3px; } /* But not inside

 */
pre code, pre samp, pre var, pre kbd {
  padding: 0;
  border: none;
}
/* But not inside 
  */
pre code {
  padding: 0;
  border: none;
}

/*  Nav bar ----------------------------------------------------- */
/* nav-panel and header duplicated for different versions*/

.nav-panel, .header {
  font-size: smaller;
  padding: 4px;
  margin-block-start: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  border-block-start-style: solid;
  border-block-start-color: grey;
  border-block-start-width: 1.75px;
}

/* Hide horizontal line --------------------------------------------------- */
hr {
  display: none;
}

/* Misceallaneous styles ------------------------------------  */

/* Eliminate borders for table cartouche */
table.cartouche, table.cartouche td, table.cartouche th {border: none}
table.cartouche {width: 100%}

/* Customise bullets */
li { margin-bottom: 0.75em;}
table.multitable { margin: 1em 0; border-spacing: 0.25em}
table th {text-align: left;}

/* In TOC, only show two levels and make as compact as possible */
.contents ul ul li { margin: 0; }
.contents ul ul ul { display: none; }

/* change the properties of the images */
img.image {
  vertical-align: middle;
}
```