How to make a HTML Page in A4 paper size page(s)?
Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word? Essentially, I want to be able to show the HTML page in the browser, and outline the content in the dimensions of an A4 size page. For the sake of simplicity, I’m assuming that the HTML page will only contain text (no images etc.) and there will be no
tags for example. Also, when the HTML page is printed, it would come out as A4-sized paper pages.
The real «HTML for print» is comig! See all history at stackoverflow.com/q/10641667/287948 and W3C’s CSS level 3 fragmentation module, that is coming!
What was the intention to do that? Are leaving MS Office for web technologies? At least that what I’m trying but still need some input how. Answering that would finish the story what was begun by this question.
16 Answers 16
Ages ago, in November 2005, AlistApart.com published an article on how they published a book using nothing but HTML and CSS. See: http://alistapart.com/article/boom
Here’s an excerpt of that article:
CSS2 has a notion of paged media (think sheets of paper), as opposed to continuous media (think scrollbars). Style sheets can set the size of pages and their margins. Page templates can be given names and elements can state which named page they want to be printed on. Also, elements in the source document can force page breaks. Here is a snippet from the style sheet we used:
Having a US-based publisher, we were given the page size in inches. We, being Europeans, continued with metric measurements. CSS accepts both.
After setting the up the page size and margin, we needed to make sure there are page breaks in the right places. The following excerpt shows how page breaks are generated after chapters and appendices:
Also, we used CSS2 to declare named pages:
That is, the title page is to be printed on pages with the name “blank.” CSS2 described the concept of named pages, but their value only becomes apparent when headers and footers are available.
Since you want to print A4, you’ll need different dimensions of course:
The article dives into things like setting page-breaks, etc. so you might want to read that completely.
In your case, the trick is to create the print CSS first. Most modern browsers (>2005) support zooming and will already be able to display a website based on the print CSS.
Now, you’ll want to make the web display look a bit different and adapt the whole design to fit most browsers too (including the old, pre 2005 ones). For that, you’ll have to create a web CSS file or override some parts of your print CSS. When creating CSS for web display, remember that a browser can have ANY size (think: “mobile” up to “big-screen TVs”). Meaning: for the web CSS your page-width and image-width is best set using a variable width (%) to support as many display devices and web-browsing clients as possible.
EDIT (26-02-2015)
Today, I happened to stumble upon another, more recent article at SmashingMagazine which also dives into designing for print with HTML and CSS… just in case you could use yet-another-tutorial.
EDIT (30-10-2018)
It has been brought to my attention in that size is not valid CSS3, which is indeed correct — I merely repeated the code quoted in the article which (as noted) was good old CSS2 (which makes sense when you look at the year the article and this answer were first published). Anyway, here’s the valid CSS3 code for your copy-and-paste convenience:
In case you think you really need pixels (you should actually avoid using pixels), you will have to take care of choosing the correct DPI for printing:
- 72 dpi (web) = 595 X 842 pixels
- 300 dpi (print) = 2480 X 3508 pixels
- 600 dpi (high quality print) = 4960 X 7016 pixels
Yet, I would avoid the hassle and simply use cm (centimeters) or mm (millimeters) for sizing as that avoids rendering glitches that can arise depending on which client you use.
@A.com There is no px as that would depend on DPI. which is why CSS supports these obvious measurement units called cm et al. I advise you to read the linked articles and/or at least my answer. Doing so you will quickly notice your question actually does not really make sense. Also, you might want to post your question as a new question if things are still unclear. This is a Q&A site, not a forum. \o/
It would be fairly easy to force the web browser to display the page with the same pixel dimensions as A4. However, there may be a few quirks when things are rendered.
Assuming your monitors display 72 dpi, you could add something like this:
Following Will Dean’s suggestion (which makes a lot of sense) using millimeters, you can force the browser to calculate the pixel width/height: body < height: 420mm; width: 297mm; . >
Done a fair bit of work on this now and while the 210×297 dimensions are good, they should not be considered an absolute fit for an A4 page. A good test is to print->PDF directly from Chrome and scroll through the preview page thumbs; even with no margins set, the full height must be reduced to avoid overflow -> that causes all even-numbered pages to be blank.
A4 size is 210x297mm
So you can set the HTML page to fit those sizes with CSS:
@jazzbpn I think you will need to set the html, body to fit 100% of height and width, then create a custom tag or div, and define this above sizes
Create section with each page, and use the below code to adjust margins, height and width.
If you are printing A4 size.
Size : 8.27in and 11.69 inches @page Section1 < size: 8.27in 11.69in; margin: .5in .5in .5in .5in; mso-header-margin: .5in; mso-footer-margin: .5in; mso-paper-source: 0; >div.Section1
then create a div with all your content in it.
@media print < .page-break < height: 0; page-break-before: always; margin: 0; border-top: none; >> body, p, a, span, td < font-size: 9pt; font-family: Arial, Helvetica, sans-serif; >body < margin-left: 2em; margin-right: 2em; >.page
I cannot get @page Section1 to work with Chrome 41.0.2272.77. Are you really sure that your answer works? Try e.g. to visit data:text/html,@page x
and open a print preview. I see no difference between that and data:text/html,x . When I replace @page x with @page , then it works, but that is not a page-specific selector.
For those not used to putting CSS in documents (as myself at the time of the writing), you put this code in tags and then call the div (e.g.
) where «Stuff» and «more stuff» are content that is to be contained in a single page.
I saw this solution after searching at google, search for «A4 CSS page template» (codepen.io). It shows an A4 (A3,A5, also portrait) sized area in the browser, using the tag. Inside this tag the content is shown, but absolute position is still with respect to browser area.
body < background: rgb(204,204,204); >page < background: white; display: block; margin: 0 auto; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); >page[size="A4"] < width: 21cm; height: 29.7cm; >page[size="A4"][layout="portrait"] < width: 29.7cm; height: 21cm; >@media print < body, page < margin: 0; box-shadow: 0; >>This works for me without any other css/js-library to be included. Works for current browsers (IE, FF, Chrome).
Using this example with FF 53.0.3 and putting two landscape pages after one another doesn’t work. Looks fine in the regular view, but when selecting Print preview, it expands to 3 pages.
Don’t mean to drag old cows out of the trench, but I believe box-shadow should be box-shadow: none; and not 0
I’ve used HTML to generate reports which print-out correctly at real sizes on real paper.
If you carefully use mm as your units in the CSS file you should be OK, at least for single pages. People can screw you up by changing the print zoom in their browser, though.
I seem to remember everything I was doing was single page, so I didn’t have to worry about pagination — that might be much harder.
PPI and DPI make absolutely no difference to how a document will print off a browser. the printer takes no information on screen dot pitch or the DPI of the images etc. if you are printing images they would print at a size similar in proportion to how they are displayed on screen. the print processor of the browser would increase the DPI of the images from something rather low like 72dpi to whatever DPI the rest of the document is. say the image displays as half a page wide, then its about 4″ wide physically. the pixel width of the image would be approx 300px to display correctly in the browser. by the time it prints at a nominal 300DPI, the processor has added pixels and the image will grow to around 1200px which at 300 DPI is 4″.
when it comes to vector or non pixel based elements like text, the printer chooses its own DPI from the driver which doesnt relate to screen dot pitch or browser width etc. if the browser is 3000px wide, the print processor will wrap text as appropriate.
heres what makes it hard about creating print displays: each browser and printer will interpret text sizes (pt, em, px) and spacing in its own way. depending on what printer, browser and maybe even OS you use, you will get a different amount of lines and characters per page. so even if you test on your computer using your browser and printer and figure out that you can display the text in a box at 640x900px and its perfect on print, the next guy who tries to print will possibly get it printing differently. there really is no way to force each printer and browser to get it identical each time.
forget pixels and moreso forget DPI, the only thing you could use pixels for is setting a table width that simulates the width of a printable area on your printer. in that case i found that 640px wide is close.
CSS size
The CSS size property is used in paged media to specify the size of the page.
The size property is used as a descriptor in the @page at-rule to specify the size of the page when the document’s being displayed within paged media.
Paged media refers to when the document is being rendered onto pages as opposed to continuous media. Paged media could include paper, transparencies, and pages that are displayed onto a screen.
You can use the size property to specify the exact dimensions (e.g. 11in 8.5in ) or you can choose from a specific page size (e.g. A4 ). You can also specify the orientation (i.e. portrait or landscape ). Furthermore, you can combine these (e.g. A4 landscape ).
Syntax
These values are explained below.
Possible Values
Specifies that the page box will be set to a size and orientation chosen by the user agent. User agents will typically choose a page box size and orientation to match the target media sheet. Specifies that the page’s content be printed in landscape orientation. The longer sides of the page box are horizontal. Specifies that the page’s content be printed in portrait orientation. The shorter sides of the page box are horizontal. The page box will be set to the given absolute dimension(s). If only one length value is specified, it sets both the width and height of the page box (i.e., the box is a square). If two length values are specified, the first establishes the page box width, and the second the page box height. Values in units of em and ex refer to the page context’s font. Negative lengths are illegal.
The CSS3 draft specification allows for specific page sizes to be specified. These can be specified by using their media names, as follows:
A5 Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high. A4 Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm high. A3 Equivalent to the size of ISO A3 media: 297mm wide and 420mm high. B5 Equivalent to the size of ISO B5 media: 176mm wide by 250mm high. B4 Equivalent to the size of ISO B4 media: 250mm wide by 353mm high. letter Equivalent to the size of North American letter media: 8.5 inches wide and 11 inches high legal Equivalent to the size of North American legal: 8.5 inches wide by 14 inches high. ledger Equivalent to the size of North American ledger: 11 inches wide by 17 inches high.
Page size names can be combined with an orientation ( portrait or landscape ). For example, size: A4 landscape; to indicate both size and orientation.
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
General Information
Initial Value auto Applies To Paged context (for example, printed documents, «Print Preview» screens, etc) Inherited? N/A Media Paged
Example Code
Official Specifications
The size property was first introduced in CSS2, but it was dropped in CSS2.1. It was subsequently reintroduced in CSS3, where it is used as a descriptor for the @page at-rule.