Takes ascent/descent in account in the text layer

src/core/evaluator.js

@@ -919,10 +919,13 @@ var PartialEvaluator = (function PartialEvaluatorClosure() {
           if (chunk !== '') {
             var bidiText = PDFJS.bidi(chunk, -1, font.vertical);
             var renderParams = textState.calcRenderParams();
-            bidiText.x = renderParams.renderMatrix[4] - (textState.fontSize *
+            var fontHeight = textState.fontSize * renderParams.vScale;
-                           renderParams.vScale * Math.sin(renderParams.angle));
+            var fontAscent = font.ascent ? font.ascent * fontHeight :
-            bidiText.y = renderParams.renderMatrix[5] + (textState.fontSize *
+              font.descent ? (1 + font.descent) * fontHeight : fontHeight;
-                           renderParams.vScale * Math.cos(renderParams.angle));
+            bidiText.x = renderParams.renderMatrix[4] - (fontAscent *
+                           Math.sin(renderParams.angle));
+            bidiText.y = renderParams.renderMatrix[5] + (fontAscent *
+                           Math.cos(renderParams.angle));
             if (bidiText.dir == 'ttb') {
               bidiText.x += renderParams.vScale / 2;
               bidiText.y -= renderParams.vScale;

src/core/fonts.js

@@ -2183,6 +2183,8 @@ var Font = (function FontClosure() {
     this.wideChars = properties.wideChars;
     this.hasEncoding = properties.hasEncoding;
     this.cmap = properties.cmap;
+    this.ascent = properties.ascent / PDF_GLYPH_SPACE_UNITS;
+    this.descent = properties.descent / PDF_GLYPH_SPACE_UNITS;
 
     this.fontMatrix = properties.fontMatrix;
     if (properties.type == 'Type3') {

src/display/canvas.js

@@ -954,6 +954,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       geometry.fontName = font.loadedName;
       geometry.fontFamily = font.fallbackName;
       geometry.fontSize = this.current.fontSize;
+      geometry.ascent = font.ascent;
+      geometry.descent = font.descent;
       return geometry;
     },
 

test/driver.js

@@ -197,12 +197,14 @@ SimpleTextLayerBuilder.prototype = {
     var ctx = this.ctx, viewport = this.viewport;
     // vScale and hScale already contain the scaling to pixel units
     var fontHeight = geom.fontSize * Math.abs(geom.vScale);
+    var fontAscent = geom.ascent ? geom.ascent * fontHeight :
+      geom.descent ? (1 + geom.descent) * fontHeight : fontHeight;
     ctx.save();
     ctx.beginPath();
     ctx.strokeStyle = 'red';
     ctx.fillStyle = 'yellow';
-    ctx.translate(geom.x + (fontHeight * Math.sin(geom.angle)),
+    ctx.translate(geom.x + (fontAscent * Math.sin(geom.angle)),
-                  geom.y - (fontHeight * Math.cos(geom.angle)));
+                  geom.y - (fontAscent * Math.cos(geom.angle)));
     ctx.rotate(geom.angle);
     ctx.rect(0, 0, geom.canvasWidth * Math.abs(geom.hScale), fontHeight);
     ctx.stroke();

web/text_layer_builder.js

@@ -130,8 +130,10 @@ var TextLayerBuilder = function textLayerBuilder(options) {
 
     textDiv.style.fontSize = fontHeight + 'px';
     textDiv.style.fontFamily = geom.fontFamily;
-    textDiv.style.left = (geom.x + (fontHeight * Math.sin(geom.angle))) + 'px';
+    var fontAscent = geom.ascent ? geom.ascent * fontHeight :
-    textDiv.style.top = (geom.y - (fontHeight * Math.cos(geom.angle))) + 'px';
+      geom.descent ? (1 + geom.descent) * fontHeight : fontHeight;
+    textDiv.style.left = (geom.x + (fontAscent * Math.sin(geom.angle))) + 'px';
+    textDiv.style.top = (geom.y - (fontAscent * Math.cos(geom.angle))) + 'px';
 
     // The content of the div is set in the `setTextContent` function.