From 0a9b5be6c427afc24f85f2faa6fb197e140285cf Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Mon, 17 Jul 2017 03:50:27 +0200 Subject: [PATCH] Update compiled files --- build/PageTextContent.js | 27 ++++++++++++++------------- build/shared/util.js | 31 +++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 13 deletions(-) diff --git a/build/PageTextContent.js b/build/PageTextContent.js index 36289b7af..963b605c9 100644 --- a/build/PageTextContent.js +++ b/build/PageTextContent.js @@ -58,13 +58,13 @@ 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', @@ -72,12 +72,11 @@ var PageTextContent = function (_Component) { 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 index 92ae40a15..a5fbec1bb 100644 --- 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]; }; \ No newline at end of file