components/printing/resources/print_preview_page.html

   1 <!doctype html>
   2 <head>
   3 <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
   4 <style>
   5   body {
   6     margin: 0px;
   7     width: 0px;
   8   }
   9   .row {
  10     display: table-row;
  11     vertical-align: inherit;
  12   }
  13   #header, #footer {
  14     display: table;
  15     table-layout:fixed;
  16     width: inherit;
  17   }
  18   #header {
  19     vertical-align: top;
  20   }
  21   #footer {
  22     vertical-align: bottom;
  23   }
  24   .text {
  25     display: table-cell;
  26     font-size: 8px;
  27     vertical-align: inherit;
  28     white-space: nowrap;
  29   }
  30   #page_number {
  31     text-align: right;
  32   }
  33   #title {
  34     text-align: center;
  35   }
  36   #date, #url {
  37     padding-left: 0.7cm;
  38     padding-right: 0.1cm;
  39   }
  40   #title, #page_number {
  41     padding-left: 0.1cm;
  42     padding-right: 0.7cm;
  43   }
  44   #title, #url {
  45     overflow: hidden;
  46     text-overflow: ellipsis;
  47   }
  48   #title, #date {
  49     padding-bottom: 0cm;
  50     padding-top: 0.4cm;
  51   }
  52   #page_number, #url {
  53     padding-bottom: 0.4cm;
  54     padding-top: 0cm;
  55   }
  56 </style>
  57 <script>
  58
  59 function pixels(value) {
  60   return value + 'px';
  61 }
  62
  63 function setup(options) {
  64   var body = document.querySelector('body');
  65   var header = document.querySelector('#header');
  66   var content = document.querySelector('#content');
  67   var footer = document.querySelector('#footer');
  68
  69   body.style.width = pixels(options['width']);
  70   body.style.height = pixels(options['height']);
  71   header.style.height = pixels(options['topMargin']);
  72   content.style.height = pixels(options['height'] - options['topMargin'] -
  73                                 options['bottomMargin']);
  74   footer.style.height = pixels(options['bottomMargin']);
  75
  76   document.querySelector('#date span').innerText =
  77       new Date(options['date']).toLocaleDateString();
  78   document.querySelector('#title span').innerText = options['title'];
  79
  80   document.querySelector('#url span').innerText = options['url'];
  81   document.querySelector('#page_number span').innerText = options['pageNumber'];
  82
  83   // Reduce date and page number space to give more space to title and url.
  84   document.querySelector('#date').style.width =
  85       pixels(document.querySelector('#date span').offsetWidth);
  86   document.querySelector('#page_number').style.width =
  87       pixels(document.querySelector('#page_number span').offsetWidth);
  88
  89   // Hide text if it doesn't fit into expected margins.
  90   if (header.offsetHeight > options['topMargin'] + 1) {
  91     header.style.display = 'none';
  92     content.style.height = pixels(options['height'] - options['bottomMargin']);
  93   }
  94   if (footer.offsetHeight > options['bottomMargin'] + 1) {
  95     footer.style.display = 'none';
  96   }
  97 }
  98
  99 </script>
 100 </head>
 101 <body>
 102   <div id="header">
 103     <div class="row">
 104       <div id="date" class="text"><span/></div>
 105       <div id="title" class="text"><span/></div>
 106     </div>
 107   </div>
 108   <div id="content">
 109   </div>
 110   <div id="footer">
 111     <div class="row">
 112       <div id="url" class="text"><span/></div>
 113       <div id="page_number" class="text"><span/></div>
 114     </div>
 115   </div>
 116 </body>
 117 </html>