Update compiled files

wojtekmaj · Jul 17, 2017 · 0a9b5be · 0a9b5be
1 parent 7d56e37
commit 0a9b5be
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/build/PageTextContent.js b/build/PageTextContent.js
@@ -58,26 +58,25 @@ var PageTextContent = function (_Component) {
     }, _this.renderTextItem = function (textItem, itemIndex) {
       var _textItem$transform = _slicedToArray(textItem.transform, 6),
           left = _textItem$transform[4],
-          bottom = _textItem$transform[5];
+          baselineBottom = _textItem$transform[5];
 
       var scale = _this.props.scale;
-      var _this2 = _this,
-          viewport = _this2.unrotatedViewport;
+      // Distance from top of the page to the baseline
 
-      var top = viewport.height / scale - bottom - textItem.height;
+      var fontFamily = textItem.fontName + ', sans-serif';
+      var fontSize = textItem.height + 'px';
 
       return _react2.default.createElement(
         'div',
         {
           key: itemIndex,
           style: {
             position: 'absolute',
-            fontSize: textItem.height + 'px',
-            fontFamily: textItem.fontName + ', sans-serif',
-            height: textItem.height + 'px',
-            top: top * scale + 'px',
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            height: '1em',
             left: left * scale + 'px',
-            bottom: bottom * scale + 'px',
+            bottom: baselineBottom * scale + 'px',
             transformOrigin: 'left bottom',
             whiteSpace: 'nowrap'
           },
@@ -86,7 +85,9 @@ var PageTextContent = function (_Component) {
               return;
             }
 
-            _this.scaleTextItem(_ref2, textItem.width * scale);
+            var targetWidth = textItem.width * scale;
+            var fontOffset = (0, _util.measureFontOffset)(fontFamily);
+            _this.alignTextItem(_ref2, targetWidth, fontOffset);
           }
         },
         textItem.str
@@ -124,15 +125,15 @@ var PageTextContent = function (_Component) {
       page.getTextContent().then(this.onGetTextSuccess).catch(this.onGetTextError);
     }
   }, {
-    key: 'scaleTextItem',
-    value: function scaleTextItem(item, targetWidth) {
+    key: 'alignTextItem',
+    value: function alignTextItem(item, targetWidth, fontOffset) {
       if (!item) {
         return;
       }
 
       var actualWidth = item.clientWidth;
 
-      item.style.transform = 'scale(' + targetWidth / actualWidth + ')';
+      item.style.transform = 'scale(' + targetWidth / actualWidth + ') translateY(' + fontOffset * 100 + '%)';
     }
   }, {
     key: 'renderTextItems',

diff --git a/build/shared/util.js b/build/shared/util.js
@@ -149,4 +149,35 @@ var callIfDefined = exports.callIfDefined = function callIfDefined(fn, args) {
 
 var getPixelRatio = exports.getPixelRatio = function getPixelRatio() {
   return window.devicePixelRatio || 1;
+};
+
+var fontOffsetCache = {};
+
+/**
+ * Measures the distance in percent between font's baseline and descender.
+ *
+ * @param {HTMLElement} container Container in which measurements shall be made.
+ */
+var measureFontOffset = exports.measureFontOffset = function measureFontOffset(fontFamily) {
+  if (!isDefined(fontOffsetCache[fontFamily])) {
+    var div = document.createElement('div');
+    var strut = document.createElement('span');
+
+    div.style.position = 'absolute';
+    div.style.fontFamily = fontFamily;
+
+    strut.textContent = 'T';
+    strut.style.lineHeight = 0;
+
+    div.appendChild(strut);
+    document.body.appendChild(div);
+
+    var result = div.offsetHeight / strut.offsetHeight - 1;
+
+    fontOffsetCache[fontFamily] = result;
+
+    div.parentNode.removeChild(div);
+  }
+
+  return fontOffsetCache[fontFamily];
 };