css-paged-media

问题 I'm rendering HTML documents to PDF. Previously I was using Wkhtmltopdf, but it looks like Dompdf offers better support for page breaks, so I expect I will switch to that. I'd like to apply some orphan control to my document, so I need to have a solid understanding of what orphans actually does. From W3C (source): The orphans property specifies the minimum number of lines in a block container that must be left at the bottom of a page. The example that is consistently offered around the web is

问题 I've followed the steps in this article to arrange my page for printing. However, only a couple of things seem to actually work. I can't get selectors such as @top-center to work at all in Chrome, Firefox or Opera, even though caniuse says it should work in most major browsers. Has this been quietly abandoned or deprecated? I'm pretty sure it's correct, but I'll post my CSS here for reference anyway: @page { @bottom-right { content: "..."; } } The content doesn't show up anywhere. 回答1: The WD

问题 I've followed the steps in this article to arrange my page for printing. However, only a couple of things seem to actually work. I can't get selectors such as @top-center to work at all in Chrome, Firefox or Opera, even though caniuse says it should work in most major browsers. Has this been quietly abandoned or deprecated? I'm pretty sure it's correct, but I'll post my CSS here for reference anyway: @page { @bottom-right { content: "..."; } } The content doesn't show up anywhere. 回答1: The WD

问题 when printing HTML page I want to put custom text in header an all printed pages @page { margin-top:5mm; margin-bottom: 25mm; margin-left: 30mm; margin-right: 30mm; @top-right{ content: "Page title"; /* page title + current page count */ } } While printing, the "Page Title: pageCount" does not appear neither in IE nor in any other browsers.. What am I doing wrong? Margins do work, but not the @top-right. 回答1: I think the issue is that there is no browser support for @top-right and the other

问题 when printing HTML page I want to put custom text in header an all printed pages @page { margin-top:5mm; margin-bottom: 25mm; margin-left: 30mm; margin-right: 30mm; @top-right{ content: "Page title"; /* page title + current page count */ } } While printing, the "Page Title: pageCount" does not appear neither in IE nor in any other browsers.. What am I doing wrong? Margins do work, but not the @top-right. 回答1: I think the issue is that there is no browser support for @top-right and the other

问题 I have a web application and it has a report that might exceed one page and I would like to print a header and footer in every page. i find and try this: Repeating a report header in each page but it didn't work for me.I try opera,IE9,Firefox,Google Chrome but ... nothing.page-margin works fine but content is what I want and it doesn't work. 回答1: You can set a position: fixed; header and footers so that it will repeat on each page For Example <header class="onlyprint"><!--Content Goes Here-->

问题 I'm trying to set the margins on a page that I am printing. In chrome, it looks great. IE not so much. I'm trying to set the margins like so: @media print { @page { margin: -0.5cm; margin-left: -1.5cm; margin-right: -1.5cm; } } I'm referencing the css file like this in the head: <link rel="stylesheet" href="Content/print.css" type="text/css" media="print"> I'm able to adjust the margins just fine in chrome by tweaking the margin values, but in IE11, it seems to be completely ignoring this....

问题 Its about Print, and Print only. css: @page { size: A4 portrait; } @page :first{ size: 210mm 1000mm; } As CSS defined, should only first page with 1000mm height and rest pages are 297mm (A4) height. But in Chrome, from second page, looks like 297mm but all content is gone. Try it yourself, use Google Chrome, open http://fiddle.jshell.net/T4nnG/1/show/ and try print, see the preview, first page is right, and from second page, size is right, but content gone You can see more clearly by use

问题 Is there a way to create paginated content (display separated pages horizontally/vertically) using CSS 'paged media' features? 回答1: Assuming I'm interpreting the question correctly: CSS paged media features are used to describe the presentation when some form of pagination has to take place (usually when a web page is being printed onto distinct sheets of paper). They cannot be used to divide content up into sections and generate links between them. 回答2: Here you go i was going to write the

问题 I need to know if I can modify content on the last page with the :last selector. I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page. But I can't find it in the documentation and it does not work when I try to use it. I'm trying to clear the content on the footer of my last page like this: @page { @bottom-right { content: "Please turn over"; } } @page :last { @bottom-right { content: none; } } It works when I use it with the