Print-ready guide to CSS and HTML

Question

Print-ready guide to CSS and HTML

If I were to embark on the ambitious task of writing a book solely using HTML and CSS, where would I begin in defining a page header and footer with page numbers? How can I ensure that page breaks and margins are displayed in the browser, akin to a preview mode?

I understand this may seem like a request to have the code handed to me, but what I truly seek are pointers to resources that can guide me through this unconventional project. I am at a loss on how to even initiate such a venture.

My vision for the browser preview is to have miniature versions of each page, reminiscent of a PDF viewer, where text overflow triggers a page-break:

While I have explored @media print, I have yet to find a way to incorporate headers and footers within it.

My attempts to implement the code from w3.org have been unsuccessful:

title { position: running(header) }
@page { @top-center {
  content: element(header) }
}

Although I found the code in Boom! helpful for printing purposes, it does not render the same in the browser.

With that said, I am in need of guidance on where I should turn to for a solid starting point on this endeavor. Any recommendations?

html css printing

Answer 1

Answer №1

Here is the approach I took:

<div class='book'>
    <div class='chapter'>
        <div class='section'></div>
        <div class='content'></div>
    </div>
</div>

All the content was nested within the <div class='book'>. Each .chapter contained a .section as well as the main .content for that chapter.

To ensure the content fit within each section, I utilized JavaScript to trim any overflow from the .content. I then duplicated the .chapter, modified the chapter number within the newly created <div>, and populated the duplicated chapter with the necessary content.

This process continued until I reached around 100 chapters, ensuring that nothing spilled out of the final chapter's <div>.

Answer 2

Here is the approach I took:

<div class='book'>
    <div class='chapter'>
        <div class='section'></div>
        <div class='content'></div>
    </div>
</div>

All the content was nested within the <div class='book'>. Each .chapter contained a .section as well as the main .content for that chapter.

To ensure the content fit within each section, I utilized JavaScript to trim any overflow from the .content. I then duplicated the .chapter, modified the chapter number within the newly created <div>, and populated the duplicated chapter with the necessary content.

This process continued until I reached around 100 chapters, ensuring that nothing spilled out of the final chapter's <div>.

Answer 3

Answer №2

Assuming that you are working with plain HTML and not incorporating any code in the background.

If there happens to be code behind, the process would be different.

Start by defining a main div with the class of page. Within that main div, create three sub-divs for the header, content, and footer sections.

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Adjust margin based on your needs.*/
}

.header {
   display: block;
   height: 50px;
}

.content {
   display: block:
   height: 700px;
}

.footer {
   display: block;
   height: 50px;
}

Add any additional styling as required.

Create a separate stylesheet with a media type of "print".

In that stylesheet, include the following style for the page:

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Adjust margin based on your needs.*/
   /*This will ensure a new page when printing*/
   page-break-after: always;
}

The HTML structure for a single page will resemble:

<div class="page">
  <div class="header">HEADER CONTENT</div>
  <div class="content"> MAIN PAGE'S CONTENT</div>
  <div class="footer"></div>
</div>

Repeat the above code as needed for the desired number of pages.

Alternatively, table layout can also be used for this layout purpose.

If code behind is in use, the content can be dynamically generated.

Hopefully, this explanation is beneficial to you.

Answer 4

Assuming that you are working with plain HTML and not incorporating any code in the background.

If there happens to be code behind, the process would be different.

Start by defining a main div with the class of page. Within that main div, create three sub-divs for the header, content, and footer sections.

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Adjust margin based on your needs.*/
}

.header {
   display: block;
   height: 50px;
}

.content {
   display: block:
   height: 700px;
}

.footer {
   display: block;
   height: 50px;
}

Add any additional styling as required.

Create a separate stylesheet with a media type of "print".

In that stylesheet, include the following style for the page:

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Adjust margin based on your needs.*/
   /*This will ensure a new page when printing*/
   page-break-after: always;
}

The HTML structure for a single page will resemble:

<div class="page">
  <div class="header">HEADER CONTENT</div>
  <div class="content"> MAIN PAGE'S CONTENT</div>
  <div class="footer"></div>
</div>

Repeat the above code as needed for the desired number of pages.

Alternatively, table layout can also be used for this layout purpose.

If code behind is in use, the content can be dynamically generated.

Hopefully, this explanation is beneficial to you.

Answer 5

Answer №3

Using pure HTML and CSS to create a PDF-like left panel may seem like a feasible option, but it could quickly become tedious due to the repetitive nature of coding similar blocks for each new page. To achieve the desired effect, Iframes could be utilized as a more efficient solution. More information can be found here

The process would involve creating a separate .htm page for each page of the book, linking them together via hyperlinks. Once all pages are complete, screenshots could be taken and saved as thumbnails. Another html page could then be created to serve as the panel, to be included in all other pages of the book, as demonstrated in the tutorial provided in the link.

UPDATE

To address page breaks, divs with the same class could be used and styled to mimic individual pages, as exemplified here

Answer 6

Using pure HTML and CSS to create a PDF-like left panel may seem like a feasible option, but it could quickly become tedious due to the repetitive nature of coding similar blocks for each new page. To achieve the desired effect, Iframes could be utilized as a more efficient solution. More information can be found here

The process would involve creating a separate .htm page for each page of the book, linking them together via hyperlinks. Once all pages are complete, screenshots could be taken and saved as thumbnails. Another html page could then be created to serve as the panel, to be included in all other pages of the book, as demonstrated in the tutorial provided in the link.

UPDATE

To address page breaks, divs with the same class could be used and styled to mimic individual pages, as exemplified here

Print-ready guide to CSS and HTML

Answer №1

Answer №2

Answer №3

Similar questions

Conceal all div elements except for displaying the initial two

Arrangement of cards in a column

Discovering the quantity of pagination tabs in Selenium WebAutomation

What is causing the collapsed-animation to malfunction in Vue3?

Issues with Collapse Feature on Bootstrap 3 Navbar

Converting JSON into HTML format

Searching for a table row that corresponds to the content of a cell using Python and Selenium

Challenges surrounding jQuery's .before

Activate vertical scrolling in JavaScript when an image is clicked

Discovering an HTML Element in a JavaScript Array with Specific Styling: A Step-by-Step Guide

Switching Symbols with JQuery

CSS - changing images for the menu based on user interaction

Creating a perpetual loop animation for two divs moving from right to left endlessly

What could be causing the alignment issue with cells in Bootstrap?

Hover effects in CSS animations can be hit or miss, with some working smoothly while others may

What are some techniques for applying CSS styling directly to a custom element?

Changing the name of a tab within a p-tabview

Place the button inside the form following another block element

Activate a Dropdown Menu by Clicking in a React Application