Bookdown contest submission: Gitbook style + tufte style for web-book

Publishing Your Results
,
1

github pages website to see the book: https://crumplab.github.io/programmingforpsych/
github repo to copy book: https://github.com/CrumpLab/programmingforpsych

This is the second book I made in bookdown. I originally wrote it in latex, using the tufte style template. I liked the visual style of the margin notes, and the quoted sections at the beginning. But, then I discovered Bookdown a couple years ago, that was a revelation. I was already doing most everything in R (half of the book is about programming in R), being able to write in R, and talk about R at the same time, was truly one of the best things. Thank you for making Bookdown!

There is already an R Markdown tufte style. But, I didn't like the way it looked on the web. I liked the clean gitbook style that we see in so many Bookdown books, but I wanted elements of the tufte style (margin notes, quotes etc.)

So, I hacked the two together, and this was the result. I didn't write any explanation for getting this to work, I should probably to do that. As far as I can tell, anyone could fork the repo, and it should compile in R-Studio.

For quotes and margin notes I embed these into the R Markdown where I want them placed.

<span class="newthought">
quote goes here
---author name
</span>

<div class="marginnote">
things you write here go in the margin
</div>

All the .css style files are in place for this to work, and those are the result of me tinkering with existing things, and making them play nice.

So, this really isn't much of a big departure from the existing styles. I like the existing styles, and made a few small modifications.

I had this working at one point to compile to all formats...But, really I think that was a hack. I probably compiled the .pdf in latex, then served that through the bookdown link. I think the epub compiles, but it's probably missing the margin notes... Since this time I'm focusing mainly on web-books, and haven't attempted to make my books compile in other formats (they don't support gifs, or quizzes, or shiny apps, or other things).

Thank you all who have made Bookdown, R markdown, R-studio, etc. this whole universe is a fantastic thing. Keep up the great work.

6 Likes
2

That was a very interesting idea, and I love the hacks for newthought and marginnote. Thanks for sharing!

3

This is awesome.
I'm new to R and Bookdown and Tufte and all the rest of it. I'm also not happy with the HTML output of the Tufte style (but a big thank you to everyone who brought us this far).

If you have a moment, please could you share how you got this to work? I'm not sure what I need to learn in order to be able to modify the Tufte style to get this kind of nav going (and top bar!).

Also, did you manage to get numbered sidenotes working? Like the Tufte style does?

Thank you very much!

4

Glad this could be useful, just wanted to say that I'm finishing up with my semester and won't have time to comment about this here for a week or so, If you don't see anything, feel free to reply and that will remind me.

5

Alright, found some time to get back to this.

Unfortunately, I can't remember all of the things I did to get tufte style margin notes to work the way I wanted them too. There are a collection of changes that I made to the .css files in the repository.

However, if you download the repo for this project, you should be able to compile the book in this style.

As mentioned in the top post, use the following to add margin notes:

<div class="marginnote">
things you write here go in the margin
</div>

The css controlling the display of margin notes in the margin is in the tufte.css file in the repo. I can't remember if numbered bullets will work inside the margin note, but I know that bulleted lists do work. Pretty much you should be able to write in markdown, and that will get rendered appropriately in the margin.

6

Sidebars disappear on mobile or if you narrow the window too far. Just thought you'd want to know.

7

There's a missing newenvironment declaration for png?