CODEWITHSUNDEEP
htmlcssprintingstylesheetprinting-web-page
Amir Hossein Abdollahi
Amir Hossein Abdollahi

Reputation: 1403

Add border to each page when printing without any border breaks

I have a project, which I will need to print a multi page exam.
I want to have border on each page, but at the bottom and at the top, when page breaks, the border will break too!

SCREENSHOT OF AN EXAMPLE

I am using @media print to style the print page
Code Structure of the page is:

header
main-content{
--- div for each question
}

each question has a border bottom, and the main-content has a full border
So any Idea on who can I achieve this goal?

Note: I am aware of the break-after or break-before properties, and they're no use in this case

Upvotes: 0

Views: 2065

Answers (2)

Amir Hossein Abdollahi
Amir Hossein Abdollahi

Reputation: 1403

Found a Solution:
I used javascript to add questions into custom pages. then I printed those pages.

$(document).ready(function () {
var pageIndex = 1;
var $questions = $(".question");
var $header = $("#mainHeader");
var $printPage = $("#toPrint");
var page = "<div class='page'>";
var pageHeight = 0;
const firstPageHeight = 1350; //Pixels
const otherPagesHeight = 1800; //Pixels

function resetPage() {
    page+= "</div>";
    $printPage.append(page);
    page = "<div class='page'>";
    pageIndex++;//Go to the next Page
    pageHeight = 0; //Reset the page
}

function addQuestion(that) {
    page += "<div class='question'>" + $(that).html() + "</div>";
}

$printPage.append("<div id='printHeader'>" + $header.html() + "</div>" ); //Adding the header

$.each($questions, function () {
    //First page with header
        var currentPageHeight = pageIndex == 1 ? firstPageHeight : otherPagesHeight;
        if ($(this).height() + pageHeight < currentPageHeight){
            addQuestion(this);
            pageHeight += $(this).height();
        }else{
            //This page does not have the space for this question, so we move to the next page
            //But first we need to close the previous page
            resetPage();
            pageHeight += $(this).height();
            addQuestion(this);
        }


    //The page is full, we finish it
    if (pageHeight >= currentPageHeight)
        resetPage();

});

$(".q-space").show();

});

Hope this helps someone...

Upvotes: 0

Vaaljan
Vaaljan

Reputation: 832

Not sure why you would want that space below a page on a print. When you print a page, it is going to look really bad if you have a grey border at the bottom of each printed page. It would make sense to put the border on screen and when you print remove the borders.

I Would say you can just make the bottom border thicker. 

@media print{
  .main-content{
     border-bottom 5px solid grey;
  }
}

Either that, or make the background color grey like on the picture and add margin below the main-content div to space the pages from each other.

Keep in mind that Background color and border color does not always show up on print. It depends on the browser and the printer settings.

Upvotes: 1

Related Questions