cmd/present: fix CSS when printing slides

The existing CSS style was causing slides to not align with page
boundaries when printing slides. The cause of that is the CSS transform
property that is applied to automatically scale size of slides.
This change clears the transform property just before printing.

Fixes golang/go#29480

Change-Id: I6f719ad1b716e9bda8ba83007c3d1d7dece9ce08
GitHub-Last-Rev: d46dfee
GitHub-Pull-Request: #67
Reviewed-on: https://go-review.googlesource.com/c/155940
Run-TryBot: Dmitri Shuralyov <dmitshur@golang.org>
TryBot-Result: Gobot Gobot <gobot@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@golang.org>

cmd/present/static/slides.js

@@ -442,7 +442,7 @@ function handleBodyKeyDown(event) {
 };
 
 function scaleSmallViewports() {
-  var el = document.querySelector('.slides');
+  var el = document.querySelector('section.slides');
   var transform = '';
   var sWidthPx = 1250;
   var sHeightPx = 750;
@@ -468,6 +468,20 @@ function addEventListeners() {
       scaleSmallViewports();
     }, 50);
   });
+
+  // Force reset transform property of section.slides when printing page.
+  // Use both onbeforeprint and matchMedia for compatibility with different browsers.
+  var beforePrint = function() {
+    var el = document.querySelector('section.slides');
+    el.style.transform = '';
+  };
+  window.onbeforeprint = beforePrint;
+  if (window.matchMedia) {
+    var mediaQueryList = window.matchMedia('print');
+    mediaQueryList.addListener(function(mql) {
+      if (mql.matches) beforePrint();
+    });
+  }
 }
 
 /* Initialization */