How to make a HTML Page in A4 paper size page s

Question

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  lt br gt  tags for example   Also  when the HTML page is printed  it would come out as A4-sized paper pages

User · Answer

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

User · Answer

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    page      size  7in 9 25in     margin  27mm 16mm 27mm 16mm          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   div chapter  div appendix       page-break-after  always          Also  we used CSS2 to declare named pages   div titlepage     page  blank          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     Anyway     Since you want to print A4  you ll need different dimensions of course    page       size  21cm 29 7cm      margin  30mm 45mm 30mm 45mm          change the margins as you want them to be         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    media print       body          width  21cm          height  29 7cm          margin  30mm 45mm 30mm 45mm              change the margins as you want them to be               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

User · Answer

Create section with each page  and use the below code to adjust margins  height and width   If you are printing A4 size   Then user  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       page  Section1       then create a div with all your content in it    lt div class  Section1  gt       type your content here      lt  div gt    or   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       height  947px      padding-top  5px      page-break-after  always         font-family  Arial  Helvetica  sans-serif      position  relative      border-bottom  1px solid  000

User · Answer

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  lt page gt  tag  Inside this tag the content is shown  but absolute position is still with respect to browser area    x000D   x000D  body   x000D    background  rgb 204 204 204    x000D    x000D  page   x000D    background  white  x000D    display  block  x000D    margin  0 auto  x000D    margin-bottom  0 5cm  x000D    box-shadow  0 0 0 5cm rgba 0 0 0 0 5   x000D    x000D  page size  A4       x000D    width  21cm  x000D    height  29 7cm   x000D    x000D  page size  A4   layout  portrait     x000D    width  29 7cm  x000D    height  21cm    x000D    x000D   media print   x000D    body  page   x000D      margin  0  x000D      box-shadow  0  x000D      x000D    x000D   lt page size  A4  gt A4 lt  page gt  x000D   lt page size  A4  layout  portrait  gt A4 portrait lt  page gt  x000D   x000D   x000D    This works for me without any other css js-library to be included  Works for current browsers  IE  FF  Chrome

User · Answer

Many ways to do   html body      height 297mm      width 210mm      html body      height 29 7cm      width 21cm     html body      height  842px      width  595px

User · Answer

lt link rel  stylesheet  href   css style css  type  text css  gt   lt link rel  stylesheet  href   css print css  type  text css  media  print  gt    In your normal style css   table tableclassname     width  400px      In your print css   table tableclassname     width  16 cm

User · Answer

Looking for similar problem I found this - http   www indigorose com forums archive index php t-13334 html  A4 is a document format  as a screen image that s going to depend on the image resolution  for example an A4 document resized to    72 dpi  web    595 X 842 pixels 300 dpi  print    2480 X 3508 pixels  This is  A4  as I know it  i e   210mm X 297mm   300 dpi   600 dpi  print    4960 X 7016 pixels

User · Answer

Technically  you could  but it would take a lot of work to get all browsers to print out the page exactly as it is displayed on screen  Also  most browsers force the URL  print date and page numbering on the print-out  which is not always desired  This cannot be altered or disabled   Instead  I would advise to create a PDF based on the contents on screen and serve the PDF for downloading and or printing  Although most available PDF libraries are paid  there are a few free alternatives available for creating basic PDFs

User · Answer

A4 size is 210x297mm  So you can set the HTML page to fit those sizes with CSS   html body      height 297mm      width 210mm

User · Answer

I have used 680px in commercial reports to print on A4 pages since 1998  The 700px could not fit correctly depend of size of margins  Modern browsers can shrink page to fit page on printer  but if you use 680 pixels you will print correctly in almost any browsers   That is HTML to you Run code snippet and see de result    x000D   x000D  window print    x000D   lt table width 680 border 1 cellpadding 20 cellspacing 0 gt  x000D   lt tr gt  lt th gt   lt  th gt  lt th gt name lt  th gt  lt  tr gt  x000D   lt tr align center gt  lt td gt 1 lt  td gt  lt td gt DONALD TRUMP lt  td gt  lt  tr gt  x000D   lt tr align center gt  lt td gt 2 lt  td gt  lt td gt BARACK OBAMA lt  td gt  lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    JSFiddle   https   jsfiddle net ajofmm7r

User · Answer

lt html gt   lt head gt       lt meta http-equiv  quot content-type quot  content  quot text html  charset windows-1252 quot   gt       lt title gt DIN A4 Page lt  title gt       lt style type  quot text css quot  gt           page   size  21cm 29 7cm  margin  2cm           p   line-height  120   text-align  justify  background  transparent        lt  style gt   lt  head gt   lt body gt   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat    lt  p gt   lt  body gt   lt  html gt

User · Answer

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    lt  DOCTYPE html gt   lt html gt     lt head gt       lt style gt      body           height  842px          width  595px             to centre page on screen           margin-left  auto          margin-right  auto             lt  style gt     lt  head gt     lt body gt     lt  body gt   lt  html gt

User · Answer

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

User · Answer

I know that this subject is quite old but I want to share my experience about that topic  Actually  I was searching a module that can help me with my daily reports  I m writting some documentations and some reports in HTML   CSS  instead of Word  Latex  OO        The objectif would be to print them on A4 paper to share it with friends      Instead of searching  I decided to have a small funny coding session to implement a simple lib that can handle  pages   page number  summary  header  footer       Finally  I did it in   2h and I know that s not the best tool ever but it s almost ok for my purpose  You can take a look at this project on my repo and don t hesitate to share your ideas  It s maybe not what you are searching for at 100  but I think that this module can help you   Basically I create a page of body  width  200mm   and container of height  290mm  smaller than A4   Then I used page-break-after  always  so the  print  option of the browser know when to split pages   repo  https   github com kursion jsprint

User · Answer

It s entirely possible to set your layout to assume the proportions of an a4 page  You would only have to set width and height accordingly  possibly check with window innerHeight and window innerWidth although I m not sure if that is reliable    The tricky part is with printing A4  Javascript for example only supports printing pages rudimentarily with the  window print method  As  Prutswonder suggested creating a PDF from the webpage probably is the most sophisticated way of doing this  other than supplying PDF documentation in the first place   However  this is not as trivial as one might think  Here s a link that has a description of an all open source Java class to create PDFs from HTML  http   www javaworld com javaworld jw-04-2006 jw-0410-html html    Obviously once you have created a PDF with A4 proportions printing it will result in a clean A4 print of your page  Whether that s worth the time investment is another question

[html] How to make a HTML Page in A4 paper size page(s)?

Examples related to html

Examples related to css

Examples related to printing