Log in / Register

Forum › How do I...?

create PDF for screen and print while also using the HTML in the browser

esef
I want to create 2 types of PDF:

- one for print (with chapters on left pages and thus empty pages)
- one for screen

and also I want to show the HTML in a browser. So I need media queries on screen/print and thus cant just simply put the different page rules in media queries and call prince like

prince --media=screen

any idea how I can do this (without having two different CSS)
markbrown
Prince allows media types other than those from the spec, so for example on the command line you can give --media=print2 and then use @media print2 { ... } in your CSS.

Be aware that the media queries spec advises authors not to do this, however. They suggest using media features instead, but these wouldn't cover use cases like yours so Prince does still allow arbitrary media types.

We'd appreciate it if you let us know how well this works for you, or if you hit any problems :-)
mikeday
Also you can apply a separate style sheet from the command-line without changing the document, if that helps.
esef
thanks, I think this will work, I did not apply it to the docs yet, but this POC seems promising.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h-full</title>
    <style>
        @media screen { .media-test::after {content: "[@media screen]"} }
        @media pdf_screen { .media-test::after {content: "[@media pdf_screen]"} }
        @media print { .media-test::before {content: "[@media print]"} }
        @media print, pdf_screen { .media-test {content: "ANY_PRINT"} }
    </style>
</head>
<body>
    <div class="media-test">MEDIATEST</div>
</body>
</html>


on browser: "MEDIATEST[@media screen]
on prince media.html: "[@media print]ANY_PRINT"
on prince --media=pdf_screen media.html: "ANY_PRINT[@media pdf_screen]"

esef
I applied this to our stylesheets and it works perfectly.
"paper" is my custom media-type for print out the PDF, print is to read PDF on the screen.


@media screen {
    .block-print-only { display: none }
}

@media print, paper {
    .block-print-only { display: block; }
}

@media print {
    h1 { break-before: page; }
    @page Default { ... }
}

@media paper {
    h1 { break-before: left }
    @page Default:left { ... }
    @page Default:right { ... }
    @page Default:blank { ... }
}
markbrown
> I applied this to our stylesheets and it works perfectly.

Thanks, that is helpful to know.