html2print.scss 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. /**
  2. * This file is part of HTML2print.
  3. *
  4. * HTML2print is free software: you can redistribute it and/or modify it under the
  5. * terms of the GNU Affero General Public License as published by the Free
  6. * Software Foundation, either version 3 of the License, or (at your option) any
  7. * later version.
  8. *
  9. * HTML2print is distributed in the hope that it will be useful, but WITHOUT ANY
  10. * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
  11. * PARTICULAR PURPOSE. See the GNU Affero General Public License for more
  12. * details.
  13. *
  14. * You should have received a copy of the GNU Affero General Public License along
  15. * with HTML2print. If not, see <http://www.gnu.org/licenses/>.
  16. */
  17. /**
  18. * Computation
  19. */
  20. /* computes the edge size of the paper, which is the sum of the bleed and the
  21. * crop sizes */
  22. $edge: $crop-size + $bleed;
  23. /* Computes the size of the paper sheet */
  24. $paper-width: $page-width + ( $edge * 2 );
  25. $paper-height: $page-height + ( $edge * 2 );
  26. /**
  27. * DEFINITION OF THE PAPER SHEET
  28. */
  29. /**
  30. * The $page CSS at-rule is used to define some properties of printed
  31. * documents. We make it the size of the elements with the .paper class and
  32. * remove any margins so they don't add up with margins specifed in elements
  33. * with the .page class (or it's children, like .header, .body and .footer)
  34. *
  35. * We add 2pt to circumvent a rounding number bug in some browsers that make
  36. * them include extra pages or shifts.
  37. */
  38. @page {
  39. size: $paper-width $paper-height + 2pt;
  40. margin: 0;
  41. }
  42. /**
  43. * CANVAS
  44. */
  45. @media all {
  46. body {
  47. margin: 0;
  48. /* Activate opentype features and kernings */
  49. -webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
  50. text-rendering: optimizeLegibility;
  51. }
  52. .paper {
  53. width: $paper-width;
  54. height: $paper-height;
  55. box-sizing: border-box;
  56. /* defines a named counter and increments it every page, so we can use
  57. * it to compute the page number */
  58. counter-increment: folio;
  59. /* makes sure that pages aren't cut because of pootential unprecise unit
  60. * conversion at printing time */
  61. page-break-inside: avoid;
  62. page-break-after: always;
  63. /* clips the content if it goes out of the page, so it doesn't increase
  64. * the format */
  65. overflow: hidden;
  66. /* Crop marks */
  67. padding: $edge;
  68. position: relative;
  69. /* Crop marks */
  70. background-image:
  71. -webkit-linear-gradient(90deg, black 0, black 100%),
  72. -webkit-linear-gradient(0deg, black 0, black 100%),
  73. -webkit-linear-gradient(90deg, black 0, black 100%),
  74. -webkit-linear-gradient(0deg, black 0, black 100%),
  75. -webkit-linear-gradient(90deg, black 0, black 100%),
  76. -webkit-linear-gradient(0deg, black 0, black 100%),
  77. -webkit-linear-gradient(90deg, black 0, black 100%),
  78. -webkit-linear-gradient(0deg, black 0, black 100%)
  79. ;
  80. background-size:
  81. $crop-size 1px,
  82. 1px $crop-size,
  83. $crop-size 1px,
  84. 1px $crop-size,
  85. $crop-size 1px,
  86. 1px $crop-size,
  87. $crop-size 1px,
  88. 1px $crop-size
  89. ;
  90. background-position:
  91. left $edge,
  92. $edge top,
  93. right $edge,
  94. ($paper-width - $edge) top,
  95. right ($paper-height - $edge),
  96. ($paper-width - $edge) bottom,
  97. left ($paper-height - $edge),
  98. $edge bottom
  99. ;
  100. background-repeat: no-repeat;
  101. }
  102. .page {
  103. /* defines the page size */
  104. width: $page-width;
  105. height: $page-height;
  106. /* allows for absolutely positioned elements as settings the position
  107. * property to relative as the side effect of making this elements
  108. * top-left corner the reference point */
  109. /*position: relative;*/
  110. position: absolute; // FIXME: test it for printing issues
  111. }
  112. // TODO: changer le format du papier en spread pour pouvoir imprimer en planche
  113. .spread .paper { float: left; }
  114. .spread:not(.facing) .paper:nth-child(odd) { margin-left: -$edge; }
  115. .spread:not(.facing) .paper:nth-child(even) { margin-right: -$edge; }
  116. .spread:not(.facing) .paper:first-child { margin-left: $page-width; }
  117. .spread.facing .paper:nth-child(even) { margin-right: initial; margin-left: -$edge; }
  118. .spread.facing .paper:nth-child(odd) { margin-left: initial; margin-right: -$edge; }
  119. .spread.facing .paper:first-child { margin-left: 0; }
  120. }
  121. @media screen {
  122. /* defines the background color of the workspace */
  123. /* UI */
  124. body { background-color: #F0F0F0; }
  125. #pages {
  126. width: $paper-width;
  127. height: $paper-height;
  128. margin-left: auto;
  129. margin-right: auto;
  130. }
  131. /* FIXME: allows for printing spreads as well */
  132. .spread #pages {
  133. width: $paper-width * 2;
  134. height: $paper-height * 2;
  135. }
  136. .paper {
  137. /* centrer la page à l'écran */
  138. /* UI */
  139. background-color: white;
  140. /* UI */
  141. margin-top: 1em;
  142. /* UI */
  143. margin-bottom: 1em;
  144. }
  145. /* UI */
  146. .normal .page { outline: 1px dotted lightsalmon; }
  147. /* UI */
  148. .preview .paper { background: transparent; }
  149. /* UI */
  150. .preview .page {
  151. outline: 1px solid lightgray;
  152. background-color: white;
  153. overflow: hidden;
  154. }
  155. }
  156. @media print {
  157. html { width: $paper-width; }
  158. body {
  159. /* Allows for background colors printing */
  160. background-color: transparent;
  161. -webkit-print-color-adjust: exact;
  162. print-color-adjust: exact;
  163. }
  164. }
  165. /**
  166. * Helpers
  167. */
  168. .region-break {
  169. /* Apply this class to an element to put it on a new region.
  170. * Hint:
  171. * You can also use an empty <div class="page-break"></div>
  172. * if you want to put manual page breaks without attaching it to an HTML element
  173. */
  174. -webkit-region-break-before: always;
  175. }
  176. img.missing-hd{
  177. opacity: 0.5;
  178. border: 1mm red solid;
  179. }