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