Enhance text layers alignment

wojtekmaj · Jul 17, 2017 · 9f75afe · 9f75afe
1 parent e4c6cbd
commit 9f75afe
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/src/PageTextContent.jsx b/src/PageTextContent.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import {
   callIfDefined,
+  measureFontOffset,
 } from './shared/util';
 
 export default class PageTextContent extends Component {
@@ -65,33 +66,34 @@ export default class PageTextContent extends Component {
       .catch(this.onGetTextError);
   }
 
-  scaleTextItem(item, targetWidth) {
+  alignTextItem(item, targetWidth, fontOffset) {
     if (!item) {
       return;
     }
 
     const actualWidth = item.clientWidth;
 
-    item.style.transform = `scale(${targetWidth / actualWidth})`;
+    item.style.transform =
+      `scale(${targetWidth / actualWidth}) translateY(${fontOffset * 100}%)`;
   }
 
   renderTextItem = (textItem, itemIndex) => {
-    const [, , , , left, bottom] = textItem.transform;
+    const [, , , , left, baselineBottom] = textItem.transform;
     const { scale } = this.props;
-    const { unrotatedViewport: viewport } = this;
-    const top = (viewport.height / scale) - bottom - textItem.height;
+    // Distance from top of the page to the baseline
+    const fontFamily = `${textItem.fontName}, sans-serif`;
+    const fontSize = `${textItem.height}px`;
 
     return (
       <div
         key={itemIndex}
         style={{
           position: 'absolute',
-          fontSize: `${textItem.height}px`,
-          fontFamily: `${textItem.fontName}, sans-serif`,
-          height: `${textItem.height}px`,
-          top: `${top * scale}px`,
+          fontSize,
+          fontFamily,
+          height: '1em',
           left: `${left * scale}px`,
-          bottom: `${bottom * scale}px`,
+          bottom: `${baselineBottom * scale}px`,
           transformOrigin: 'left bottom',
           whiteSpace: 'nowrap',
         }}
@@ -100,7 +102,9 @@ export default class PageTextContent extends Component {
             return;
           }
 
-          this.scaleTextItem(ref, textItem.width * scale);
+          const targetWidth = textItem.width * scale;
+          const fontOffset = measureFontOffset(fontFamily);
+          this.alignTextItem(ref, targetWidth, fontOffset);
         }}
       >
         {textItem.str}

diff --git a/src/shared/util.js b/src/shared/util.js
@@ -126,3 +126,34 @@ export const callIfDefined = (fn, args) => {
 };
 
 export const getPixelRatio = () => window.devicePixelRatio || 1;
+
+const fontOffsetCache = {};
+
+/**
+ * Measures the distance in percent between font's baseline and descender.
+ *
+ * @param {HTMLElement} container Container in which measurements shall be made.
+ */
+export const measureFontOffset = (fontFamily) => {
+  if (!isDefined(fontOffsetCache[fontFamily])) {
+    const div = document.createElement('div');
+    const 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);
+
+    const result = (div.offsetHeight / strut.offsetHeight) - 1;
+
+    fontOffsetCache[fontFamily] = result;
+
+    div.parentNode.removeChild(div);
+  }
+
+  return fontOffsetCache[fontFamily];
+};