Question

I have a div in which I create a chart using protovis. The div has width: 100% and height: 100% and the code to create the chart uses $( #chart ).width() and $( #chart ).height() to get the size of the div at render time and fill the page with the chart. I capture the resize event on the window and adjust the div and the chart so that it resizes when the window resizes.

Now I need to print. I would have hoped that when the browser is rendering the page for the printer it issues a resize but it doesn t, at least Safari and Firefox don t. Chrome does something strange in which it resizes only the height but not the width. Is there a way to trigger this behavior just before print?

EDIT. Consider the following html

<html>
  <head>
    <title>Resize</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $( #chart ).resize(function() {
          $(this).html( chart size is   + $( #chart ).width() +   x   + $( #chart ).height());
        })        
      });
      $(window).resize(function() {
        $( .resizable ).resize();
      });
    </script>
    <style type="text/css">
      #chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
    </style>
  </head>
  <body>

    <div id="chart" class="resizable">
    </div>

  </body>
</html>

When I resize the window the content of the div changes. When I print it the render process does not fire the resize event.

Answer 1

Rather than mutating the chart properties with an event, the @media print css rule might help here. https://developer.mozilla.org/en-US/docs/Web/CSS/%40media

@media print{
  #chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
}

With this method, these style properties are applied on print, regardless what other changes you ve made.

Answer 2

You just need to change the CSS to have a print version

<style type="text/css">
      #chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
</style>

<style type="text/css" media="print">
      #chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
</style>

友情链接