repeating header for print web page

Being a web developer, we all come across the printing dynamic web page in most of web applications. Like print the air ticket, rail ticket, transaction success message etc..

All print functionality requires header to be repeated in every page. Some also requires footer to be repeated in every page. Header mostly consists the company logo and some summary details.

We use  table's thead tag which automatically gets repeated when we does the print.

CodePen Code:

see below codepen example which has got long page to print.  I have added print button to print the page.  I want header to be repeated on each print page. I have put header in thead tag. Switch to css tab see the css and switch to result for result. See the result on full view on http://codepen.io/vipul_patel_08/full/zZxzBw/  it.

 

Result :

Click on print button on full view page (http://codepen.io/vipul_patel_08/full/zZxzBw/)of result. Check on chrome and safari browser. ohh  what is this. In first page header is looking fine but in second page of print header and contents gets overlapped.

This is what issue with chrome and safari. Earlier they were not supporting repeating thead tag. Now they started supporting but in correct way.

Now check same result page in IE and Mozilla. Its just awesome. Header is getting repeated in every page. Its cool !!!. Same for Mozilla. Header gets repeated in each page.

Note -  check on desktop browsers only.

Solution for chrome and safari:

There is no as such solution for this both web-kit browser until they starts supporting properly.  To avoid overlapping we can provide nice solution of not repeating header for these both browser. Yeah we can do that. so at least we get for other browser and for chrome/safari browser it wont repeat.I have applied solution. please see on full page result on http://codepen.io/vipul_patel_08/full/BWoGEb/  and do the print. Now header wont get repeated for chrome/safari browser.

by default thead comes with  display: table-header-group  which repeats the header.

Put below media print for webkit chrome and safari browser and make it not to repeat

@media print and (-webkit-min-device-pixel-ratio: 0) {
  table thead {
    display: table-row-group;
  }
}

Conclusion:

Webkit browser does mess with header repeating in print. we can avoid header repeating for that by providing  display: table-row-group; instead display: table-header-group. Hope this article will help in future.  please post your comment in below section if you like it.

printing web page which is responsive

As responsive trend going all around the world, you might face the situation which i have faced recently.

We always want our print page is normal one line desktop type. No responsiveness. Whatever is visible in  screen should get printed. 

But here is the problem with responsive page (Mobile first ). I will explain the problem with example.

Lets say, we have definition list in html page which should be look like as below. For desktop it should be spanned horizontally and for mobile it should be like wrapping as below.

dl above 768px - horizontal dl

                                                                                           

dl < 768 (mobile) -  wrapping dl

Code:

Most of web site follows Mobile first approach for responsiveness of the html page. Code for above requirement is very simple.

HTML :

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

CSS

/* mobile first  */

/* default wrapping dl for mobile  */
dt {
  font-weight :bold;
}

dt ,dd {
  margin-left : 0
}

/* above portrait to desktop */

/* default horizontal dl for desktop and tablets  */

@media (min-width: 768px) {
  dt{
    clear: left;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 140px;
  }
}

As you can see we have mobile first scenario. If view port width is less than 768 and then get wrapping dl or else horizontal dl.

Now lets Print the page:

I have added one print page. Lets say you have opened page in desktop (any device greater than 768). Now you can see horizontal dl on the screen.

Code pen link for output. you can click the link and see. Now lets click on print page.

Although you are seeing the horizontal dl in front of your screen but what prints page gives??? Its wrapping dl Ohhh no !! What is happening.  Yes, This blog is all about that.

Problem: 

 

Interesting thing is happening here. Here you page is having Mobile First CSS. When you print the page, print view gets rendered. Now it renders again according to the styles. by default we print in A4 size and that is what we want. A4 page size is 595px in web. So when print view is being rendered by browser,, it takes the style for 595 px view and that in our case is wrapping dl below 768px styles. So it takes wrapping dl style and print that page. This is the reality if you have mobile first approach and what to take print of responsive page. I have faced this issue. 

Most of browsers do the same thing. Tested in chrome, safari and IE11

Interestingly Mozilla,it is working fine.  It renders in print view whatever visible on screen. Tested in Mozilla 51.0.1

Solution:

Only solution we can provide is under print media write the desktop styles which we want in print page. As you can see below, i wrote same style of above 768px in print media as i want that inside the print page.

@media print {
  dt{
    clear: left;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 140px;
  }
}