Zaloguj | Zarejestruj | FAQ
Anonymous

Layout Targeting A4 printing

+ Odpowiedz

Posty: 7 Strona 1 z 1


Layout Targeting A4 printing

przez LeonCS » N paź 20, 2013 6:35 am

Hello :)
With much testing, I have found for a good practical A4 printout, to use a 726px*1040px space. (With 10mm margins set in the browsers print page setup - or 0.40inch margins) Since overall width = width + margin-left + margin-right + padding-left + padding-right (same with height) : - therefore I tested it with the following code: -
Kod: Zaznacz cały
<html>

<head>
   <title>Leon's first .htm doc</title>
   <style type="text/css">
      .mypg {width: 672px; height: 972px;
         margin: 2px auto 2px auto;
         background: rgb(224,216,192);
         padding: 24px;}
   </style>

</head>

<body style="font: 20px times new roman; color: rgb(96,20,64);">
   <div class="mypg">
      <h4 align="center">Page 1</h4>

   </div>
   <div class="mypg">
      <h4 align="center">Page 2</h4>

   </div>
   <div class="mypg"">
      <h4 align="center">Page 3</h4>

   </div>
   <div class="mypg">
      <h4 align="center">Page 4</h4>

   </div>
</body>

</html>

However, in my testing I found IE browser to be smart enough to know to keep each <div> . . </div> to one page. Not so with the google chrome browser - the page divisions drift up and go out of sequence. Is there a tag or method to encourage the browser to know when there is a page break ?

Thanks
Avatar użytkownika

LeonCS

  • Posty: 21
  • Dołączył(a): So paź 19, 2013 11:15 am

Re: Layout Targeting A4 printing

przez XainPro » Pn paź 21, 2013 8:35 am

1) via CSS - for the advanced HTML users:

< p style="page-break-after:always;"> < /p >

2) with a simple comment:

< p >< !-- pagebreak -- > < /p >
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Layout Targeting A4 printing

przez LeonCS » Pn paź 21, 2013 11:44 pm

Thanks XainPro
I could not get <!-- pagebreak --> to work for me - but the {page-break-after: always;} works great - as: -
Kod: Zaznacz cały
   <style type="text/css">
      .mypg {width: 672px; height: 972px;
         margin: 2px auto 2px auto;
         background: rgb(224,216,192);
         padding: 24px;
         page-break-after: always;}
   </style>


Thanks very much! :) :)
Avatar użytkownika

LeonCS

  • Posty: 21
  • Dołączył(a): So paź 19, 2013 11:15 am

Re: Layout Targeting A4 printing

przez LeonCS » Wt paź 22, 2013 1:13 am

PS - - I forgot border thickness in my original post above - - in the overall dimension equation
Overall width = width + padding-left&right + border thickness * 2 + margin-left&right
Overall height = height + padding-top&bottom + border thickness * 2 + margin-top&bottom

Also - for Overall width of tables : - - I found the following approximation : -
Overall table width = [Σsum of all the column widths] + number_of_columns * 6 + 4
In this example:-
Kod: Zaznacz cały
      <table border="1" style="color: rgb(140,0,0);">
         <tr>
            <td width="157">Cell 1</td>
            <td width="157">Cell 2</td>
            <td width="157">Cell 3</td>
            <td width="157">Cell 4</td>
         </tr>
         <tr>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
         </tr>
         <tr>
            <td>Cell 9</td>
            <td>Cell 10</td>
            <td>Cell 11</td>
            <td>Cell 12</td>
         </tr>
      </table>

Therefore in above example, overall width of table would be: -
4*157 + 4*6 + 4 = 656px
(this is asuming border thickness = 1px)

Just a bit of trivia. :)
Cheers :)
Avatar użytkownika

LeonCS

  • Posty: 21
  • Dołączył(a): So paź 19, 2013 11:15 am

Re: Layout Targeting A4 printing

przez XainPro » Wt paź 22, 2013 11:00 am

LOL :D
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Layout Targeting A4 printing

przez josephmurdock » Pn mar 14, 2016 7:26 am

I am working on a different size like for letterhead as offered by this http://www.digitekprinting.com/letterhead I am wondering if I can resize if from A4 to letterhead size paper so we can have at least a business forms layouts.
Avatar użytkownika

josephmurdock

  • Posty: 3
  • Dołączył(a): Pt mar 15, 2013 7:42 am

Re: Layout Targeting A4 printing

przez johnmacd » Cz kwi 14, 2016 1:11 pm

Hi,

Have a look on some examples how to define page setup:
https://www.smashingmagazine.com/2015/0 ... -with-css/

Thanks
Avatar użytkownika

johnmacd

  • Posty: 23
  • Dołączył(a): Cz cze 13, 2013 12:50 pm
--
Website Designer with 7 years experience as WordPress Developer. Affordable, Professional and Experienced. 100% Satisfaction. 24/7 Available.


+ Odpowiedz

Strona 1 z 1