1

I have built 2 pages for an app that uses bootstrap that the end user ends up printing a submission form after filling out some info.

I am have written the styles for the @media print i am using page-break-after to break the 2 container divs into 2 pages. All of this works exactly as expected except on Safari on a Mac. This prints perfectly on IE9 & 10, Firefox, Chrome and even Safari on a PC. It also prints perfectly on Chrome and Firefox on a Mac. These all print out exactly the same except Safari on the Mac it prints everything larger which pushes my second page to a 3rd page.

Here is the basic structure of my 2 printed pages the container div is only 600px wide. 

<!-- First Page -->
<div class="container page-break">
  <div class="row">
    <div class="col-sm-12 center">
      IMAGE HERE 
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 center">
      TEXT HERE
    </div>
  </div>  
  <div class="row">
    <div class="col-sm-12 center">
      ANOTHER IMAGE 
    </div>
  </div>
  <div class="row">
    <div class="col-sm-7">
      MORE TEXT
    </div>
    <div class="col-sm-5">
      MORE TEXT
    </div>
  </div> 
</div>
<!-- /.First Page -->
<!-- Second Page -->
<div class="container page-break">
  <div class="row">
    <div class="col-sm-12 center">
      HEADER IMAGE HERE
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 center">
      LONG SET OF TEXT HERE
    </div>
  </div>   
</div>
<!-- /.Second Page -->

Any tips to make Safari on a Mac print like all the other browsers would be great. It is worth mentioning that these need to print without changing any print settings in the browser.

Travis
  • 2,185
  • 7
  • 27
  • 42
  • have you checked your current zoom settings in the browser? – Brian Warshaw Feb 11 '15 at 18:59
  • Thanks for the suggestion yes the zoom setting is default 100% and the scale of printing is set too 100% as well. Safari just prints at like 120% of what everything else does. – Travis Feb 11 '15 at 19:14
  • Can you put the relevant portion of your stylesheet (the part that sets the font and its size) in your question please? – Brian Warshaw Feb 11 '15 at 19:54

1 Answers1

0

I had a similar situation and the solution was is in this answer; you have to define a specific size in the provided example of the answer, like this, to make smaller or larger the size of your containers when printing (specially the Bootstrap's container class):

    @media print {
        html, body, main, header, footer, .container {
           ...
           min-width: 800px !important;
           ...
        }
    }
benjamingranados
  • 438
  • 5
  • 15