Utilizing CSS styling to create page breaks in R Markdown disrupts the flow of table of contents

Encountering difficulties in achieving a visually pleasing document using knitr's export to pdf, I have resorted to converting the html file for my Markdown project to pdf through the wkhtmltopdf command line utility tool.

A simplified Markdown document exemplifies my dilemma:

---
title: "Untitled"
output: 
  html_document:
    df_print: paged
    toc: true
    number_sections: true
---

## ALPHA Header

### Alpha sub-1

### Alpha sub-2

## BETA Header

### Beta sub-1

### Beta sub-2

Upon conversion, this results in an html file with a table of contents but without page breaks when utilizing wkhtmltopdf for conversion.

Referencing responses from this Github query, I attempted to implement the custom CSS style type suggestion. It should be noted that I am not well-versed in html/CSS.

I adjusted the markdown code following the YAML (remaining unchanged) as follows:

<style type="text/css" media="screen,print">
       /* Page Breaks */

/***Always insert a page break before the element***/
       .pb_before {
           page-break-before: always !important;
       }
</style>

<div class="page1 pb_before">
## ALPHA Header
</div>
<div class="page2 pb_before">
### Alpha sub-1
</div>
<div class="page3 pb_before">
### Alpha sub-2
</div>
<div class="page4 pb_before">
## BETA Header
</div>
<div class="page5 pb_before">
### Beta sub-1
</div>
<div class="page6 pb_before">
### Beta sub-2
</div>

Although after knitting this version, the numbering system for headers and the table of contents vanish, now each header has its own separate page upon conversion to pdf using wkhtmltopdf.

Hence, my question revolves around how to merge these two elements together - ensuring a table of contents with numbered headers post-html export, along with prepped html/CSS code enabling page breaks following each header when converted via wkhtmltopdf.

Answer №1

After much experimentation, I have come up with a creative workaround:

Simply add the following code snippet before each desired header:

<div class="page1 pb_after">
 
</div>

This will effectively create separate pages for each header as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding the behavior of the enter key in Angular and Material forms

When creating forms in my MEAN application, I include the following code: <form novalidate [formGroup]="thesisForm" enctype="multipart/form-data" (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$ev ...

Saving functions in the localStorage API of HTML5: A step-by-step guide

I have encountered an issue while trying to store an array in local storage using JSON.stringify. The array contains functions (referred to as promises) within an object, but it seems that when I convert the array to a string, the functions are removed. Su ...

Guide to resetting a CSS animation with pure JavaScript

My flexbox contains 4 images, each triggering an animation on hover. However, the animation stops if I hover over the same image again. I have tried various JavaScript solutions found online to restart the animation, but none seem to be working for me. S ...

Issue with a Bootstrap panel displaying incorrect border formatting

I am currently working with Angular UI Bootstrap and facing an issue with an accordion component. Everything works perfectly fine in the development environment with the full version of the Bootstrap Cerulean file. However, when I minify the CSS file for p ...

How can I assign the output of a function to a variable within a class in Angular?

Is there a way for the Army class to automatically update its CP property with the sum of CP values from all Detachments in the Detachment class? In the Army class, the CP property should reflect the total CP value from all Detachments and be accessible t ...

Unable to use column formatting on a row using flexbox

I am working on creating a layout with rows and columns where the content in each column is vertically aligned. Here is an example of what I am trying to achieve: Currently, I am using react and have multiple components. The approach I believe will work ...

Using jQuery to Generate an Automatically Updating Timer for Slideshow - Pausing on Mouse Click

My first slideshow with jQuery is up and running, but it's very basic and hard coded. I want to add an automatic scrolling effect every 8 seconds to the next item before looping back to the beginning. I have an idea on how to achieve this, but I want ...

Is there a way to smoothly incorporate a new animation into a page, while ensuring that existing elements adjust to make room for it?

I am looking to smoothly fade and move a hidden element (display:none) within the page, shifting other elements to animate into their new positions as necessary. When I reveal the hidden element by changing it to "display:initial," it should seamlessly a ...

Interactive state for associated product within list without order

I am currently working on a project that involves an unordered list with separate list items. The menu design includes product images in the top list item and the corresponding product names in the list item below. I have successfully implemented a hover s ...

Choosing img tag titles or alts within td elements using Selenium in C#

In my current setup, there is a table with five columns. The fifth column contains an image icon that changes randomly based on backend data. This image does not have a static id or class. The CSS for this setup looks like this: Using the code below, I w ...

The ng-show and ng-hide directives are not working as expected, and there are no error

I'm currently working on a Todo App using AngularJS 1.x (version 1.6), but I'm having issues with ng-show and ng-hide functionality. The aim is to have a text box appear in the todo section when the edit button is clicked to modify existing todos ...

Remove the color gradient for the column headers in the Google Visualization table

Whenever I attempt to change the colors of the column headers using the method demonstrated in this insightful source, a rather generic gradient is applied. Interestingly, the example code provided also demonstrates the same default gradient on the secon ...

Adding an information panel to each column in jqgrid allows the grid to display a scrolling feature

We have implemented a jQuery grid where the last column contains a link. When this link is clicked, a new panel should appear providing additional information. To achieve this, we utilized a formatter that generates a hidden div along with the link. Howev ...

What is the importance of setting height: 0 when flex-basis: 0 is already defined in CSS3 flexbox?

I am currently working on creating a content reader with a fixed size and title that remains visible while scrolling. I attempted to achieve this using CSS3 flexbox with the following structure: .flex { display: flex; flex-direction: column; ...

Set the text alignment to the left/start inside a div contained within a Material UI Box

Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...

Constructing an HTML table with PHP echoes

I am currently developing a PHP script for tracking user attendance. The structure I am aiming for is as follows: Alternatively, you can view my jsFiddle <form action='this_page.php' method='post'> <table> <th>Me ...

Ways to change the CSS styling of the placeholder attribute within a textarea or input field tag

I am currently working on adjusting the font size of the text within the placeholder attribute of a textarea element. While I have been successful in achieving this using vanilla CSS, I have encountered difficulties when trying to implement the same concep ...

How can I find the previous week number from a date when the current week number is 1?

Currently, I am trying to figure out the most effective method for determining the previous week number when the current one is 1. Typically, I rely on lubridate::isoweek(date)-1 to achieve this (I prefer weeks starting from Sunday), but this approach is ...

Transferring a Variable from Arduino to JavaScript

Is there a simple way to pass an Arduino variable as a JS variable? Let's say we have an integer Arduino variable called sensorData: int sensorData = analogRead(sensorPin); How can we transfer this value to a JavaScript variable? client.println(&quo ...

Simple: What is causing the error message "TypeError: 'int' object is not callable" to appear? (refer to line 24 in the code)

I'm struggling with a coding issue and can't seem to find a solution. Would appreciate it if someone could provide some guidance on what's going wrong. Essentially, this script is designed to fetch the HTML content of a URL, extract specific ...