Background colors and print

 Again i am continuing print related issues in web world. Today I am coming with interesting issue of printing web page which has got background color inside the page.

CodePen Code:

See the below codepen example which has got one box with light background color.  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/vxrwRx/   it.

Note :  Please view result in desktop browsers as codepen works in iframe and it prints entire page weirdly.

Result :

Click on print button on full view page ( http://codepen.io/vipul_patel_08/full/vxrwRx/)of result. Check on any browser.

I can not see light background color in box !!! What is this!!! I want my end user to see the important of this box so i put light background color. But see I can not see the same on print page.

Reason :

All browser has got default settings for not to print any background colors and images while printing to save the INK.  If you want to print background graphics then you need to turn it on. Every browser has got that setting. Try in chrome. There is checkbox

But being web developer i know this setting option. How would end user know this?? I want my important box to be printed with background color as i want to highlight end user of importance of that box text. Webkit browser gives one property. If -webkit-print-color-adjust: exact; set then it prints background color but this only for webkit browser. Safari and chrome work fine with this attribute. but what about others browsers????

We do not have any property for other browser. I have solution which works fine except IE. So lets apply that.

Apply shadow instead background for box and fill entire box with shadow and you know what all browsers except IE does print shadow. Lets fill box with shadow which looks like shadow..

Demo with shadow :

I just filled box with same background color under print media. box-shadow: inset 0 0 0 1000px #f7fcff;  See the magic. it prints the background color in all browser. Chrome,Safari, Mozilla tested.

Please see on full page result on http://codepen.io/vipul_patel_08/full/bqjNwV/  and do the print. 

It works like charm!!!!

@media print {
  .card {
    box-shadow: inset 0 0 0 1000px #f7fcff;
  }
}

Conclusion:

All browser has default setting for not to print background graphics. Our end user does not know this. We should design our page which is going to be printed by end user such way that it should not have any backgrounds colors. If backgrounds colors are there then it should be very minimum. Like i said if you want to highlight something to end user then you required background color. So apply above fix and end user could see same highlighter in their print.  IE does not print even shadows. Cant do much except turning settings on.

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;
  }
}