CSS vertical centering containers on printed pages on page break

Question

Is there a way to vertically center a container if it's bumped to a new page when printed out?

As the diagram shows, container A may grow too big that A and B will occupy their own pages. When that happens I want B or both to be centered.

+----------------+       +----------------+   +----------------+
| +------------+ |       |                |   |                |
| |            | |       | +------------+ |   |                |
| |     A      | |       | |            | |   |                |
| |            | |       | |            | |   | +------------+ |
| +------------+ |       | |            | |   | |            | |
|                | +---> | |     A      | |   | |     B      | |
| +------------+ |       | |            | |   | |            | |
| |            | |       | |            | |   | +------------+ |
| |     B      | |       | |            | |   |                |
| |            | |       | +------------+ |   |                |
| +------------+ |       |                |   |                |
+----------------+       +----------------+   +----------------+

We are using wkhtmltopdf to generate the PDFs. In our case printing from the PDF is enough. But as far as I know wkhtmltopdf doesn't support centering like this. So I'm wondering if this can be achieved via css and/or javascript.

One idea is calculating the container's height and set the appropriate top margin in JS. But this requires the knowledge of when/if the container is moved to the next page, I assume?

You didn't describe from where you want to print. Assuming you want to print from the browser, I'd say no since CSS for the print media is very spotty in almost all common browsers. However, princexml should support your request, and this is the route we chose for our similar problem: we simply provide a link to download a pdf that is generated from the actual page's HTML, and create the pdf on serverside using princexml. Unfortunately, that also means you can't adapt to the current printer's pagesize automatically. — bert bruynooghe, Jan 08 '14 at 09:35
@bertbruynooghe We are using [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf/) to generate the PDFs. As far as I know there is no option for doing this. In our case printing from the PDF is enough. I will have a look at princexml. Thanks! — Dan7, Jan 08 '14 at 17:23

fregante · Answer 1 · 2022-02-26T02:40:27.970

1

It looks like the browser doesn't make any distinction between your screen and a sheet of paper: it knows each medium's size.

Demo here, tested in Firefox, Chrome and Safari.

I tried with a simple centering technique (height:100% and vertical-align:middle in a table) and it works perfectly. The only issue is that all containers will occupy a page each.

You can set the styles just for the printer, kind of like this:

@media print {
    html, body, .page {
        height: 100%;
        padding: 0;
        margin: 0;
    }
}

edited Feb 26 '22 at 02:40

answered Jan 08 '14 at 18:12

fregante

29,050
14
119
159

The link does not work anymore. Could you update it? – Kariem Feb 24 '22 at 11:04

score 1 · Answer 2 · answered Jul 03 '15 at 09:56

1

Here is how I solved this issue:

html, body{margin: 0; padding: 0;}
.page{box-sizing: border-box; height: 100%; width: 100%; border: 1px solid transparent; page-break-after: always;}
.page-middle{height: 100%; width: 100%; display: table;}
.page-middle-inner{height: 100%; width: 100%; display: table-cell; vertical-align: middle;}

As you may be noticed I used border: 1px solid transparent; . I really can't explain it but for some reason when I remove this border some pages goes out to another page.

answered Jul 03 '15 at 09:56

Vedmant

2,265
1
27
36

Hi, I'm trying to implement a solution based on your answer, but can't quite make it work. Could you post the corresponding html, please? – Julien Poulin Nov 13 '15 at 09:39
I don't have that code anymore, but It have to be something like this
– Vedmant Nov 13 '15 at 17:08

guest · Answer 3 · 2014-01-08T09:28:03.953

0

As far as I know, browsers currently don't support anything like this. The problem here is that there is no way the browser will know anything about how the hardware work for thousands of different printers.

Unless the operating system exposes API to each printer, which is never going to happen.

edited Jan 08 '14 at 09:28

answered Jan 08 '14 at 09:21

guest

2,185
3
23
46

One idea is calculating the container's height and set the appropriate top margin in JS. But this requires the knowledge of when/if the container is moved to the next page, I assume? – Dan7 Jan 08 '14 at 17:39

score 0 · Answer 4 · answered Jan 08 '14 at 18:04

this is a long shot but u can use js to do this.

Calculate the container size. You already know the paper size.

So all you have to do is add

"page-break-after: always"

when both your elements wont fit on same page to the second element and then just append margin to the each element by using

calcuated_value = (total_size - element_size) / 2

$('.element_name).css("margin:"+calculated_value"+" auto;")

hope this works.

CSS vertical centering containers on printed pages on page break

4 Answers4