Merge pull request #6619 from yurydelendik/mv-textlayer

[api-minor] Moving text layer rendering into src/display and better "text" testing.

examples/acroforms/index.html

@@ -11,7 +11,9 @@
   <script src="../../src/display/webgl.js"></script>
   <script src="../../src/display/pattern_helper.js"></script>
   <script src="../../src/display/font_loader.js"></script>
+  <script src="../../src/display/dom_utils.js"></script>
   <script src="../../src/display/annotation_helper.js"></script>
+  <script src="../../src/display/text_layer.js"></script>
 
   <script>
     // Specify the main script used to create a new PDF.JS web worker.

examples/helloworld/index.html

@@ -11,7 +11,9 @@
   <script src="../../src/display/webgl.js"></script>
   <script src="../../src/display/pattern_helper.js"></script>
   <script src="../../src/display/font_loader.js"></script>
+  <script src="../../src/display/dom_utils.js"></script>
   <script src="../../src/display/annotation_helper.js"></script>
+  <script src="../../src/display/text_layer.js"></script>
 
   <script>
     // Specify the main script used to create a new PDF.JS web worker.

make.js

@@ -530,7 +530,9 @@ target.bundle = function(args) {
     'display/webgl.js',
     'display/pattern_helper.js',
     'display/font_loader.js',
+    'display/dom_utils.js',
     'display/annotation_helper.js',
+    'display/text_layer.js',
     'display/svg.js'
   ]);
 

src/display/dom_utils.js

@@ -0,0 +1,73 @@
+/* Copyright 2015 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* globals PDFJS */
+
+'use strict';
+
+/**
+ * Optimised CSS custom property getter/setter.
+ * @class
+ */
+var CustomStyle = (function CustomStyleClosure() {
+
+  // As noted on: http://www.zachstronaut.com/posts/2009/02/17/
+  //              animate-css-transforms-firefox-webkit.html
+  // in some versions of IE9 it is critical that ms appear in this list
+  // before Moz
+  var prefixes = ['ms', 'Moz', 'Webkit', 'O'];
+  var _cache = {};
+
+  function CustomStyle() {}
+
+  CustomStyle.getProp = function get(propName, element) {
+    // check cache only when no element is given
+    if (arguments.length === 1 && typeof _cache[propName] === 'string') {
+      return _cache[propName];
+    }
+
+    element = element || document.documentElement;
+    var style = element.style, prefixed, uPropName;
+
+    // test standard property first
+    if (typeof style[propName] === 'string') {
+      return (_cache[propName] = propName);
+    }
+
+    // capitalize
+    uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
+
+    // test vendor specific properties
+    for (var i = 0, l = prefixes.length; i < l; i++) {
+      prefixed = prefixes[i] + uPropName;
+      if (typeof style[prefixed] === 'string') {
+        return (_cache[propName] = prefixed);
+      }
+    }
+
+    //if all fails then set to undefined
+    return (_cache[propName] = 'undefined');
+  };
+
+  CustomStyle.setProp = function set(propName, element, str) {
+    var prop = this.getProp(propName);
+    if (prop !== 'undefined') {
+      element.style[prop] = str;
+    }
+  };
+
+  return CustomStyle;
+})();
+
+PDFJS.CustomStyle = CustomStyle;

src/display/text_layer.js

@@ -0,0 +1,237 @@
+/* Copyright 2015 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* globals PDFJS, createPromiseCapability */
+
+'use strict';
+
+/**
+ * Text layer render parameters.
+ *
+ * @typedef {Object} TextLayerRenderParameters
+ * @property {TextContent} textContent - Text content to render (the object is
+ *   returned by the page's getTextContent() method).
+ * @property {HTMLElement} container - HTML element that will contain text runs.
+ * @property {PDFJS.PageViewport} viewport - The target viewport to properly
+ *   layout the text runs.
+ * @property {Array} textDivs - (optional) HTML elements that are correspond
+ *   the text items of the textContent input. This is output and shall be
+ *   initially be set to empty array.
+ * @property {number} timeout - (optional) Delay in milliseconds before
+ *   rendering of the text  runs occurs.
+ */
+var renderTextLayer = (function renderTextLayerClosure() {
+  var MAX_TEXT_DIVS_TO_RENDER = 100000;
+
+  var NonWhitespaceRegexp = /\S/;
+
+  function isAllWhitespace(str) {
+    return !NonWhitespaceRegexp.test(str);
+  }
+
+  function appendText(textDivs, viewport, geom, styles) {
+    var style = styles[geom.fontName];
+    var textDiv = document.createElement('div');
+    textDivs.push(textDiv);
+    if (isAllWhitespace(geom.str)) {
+      textDiv.dataset.isWhitespace = true;
+      return;
+    }
+    var tx = PDFJS.Util.transform(viewport.transform, geom.transform);
+    var angle = Math.atan2(tx[1], tx[0]);
+    if (style.vertical) {
+      angle += Math.PI / 2;
+    }
+    var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));
+    var fontAscent = fontHeight;
+    if (style.ascent) {
+      fontAscent = style.ascent * fontAscent;
+    } else if (style.descent) {
+      fontAscent = (1 + style.descent) * fontAscent;
+    }
+
+    var left;
+    var top;
+    if (angle === 0) {
+      left = tx[4];
+      top = tx[5] - fontAscent;
+    } else {
+      left = tx[4] + (fontAscent * Math.sin(angle));
+      top = tx[5] - (fontAscent * Math.cos(angle));
+    }
+    textDiv.style.left = left + 'px';
+    textDiv.style.top = top + 'px';
+    textDiv.style.fontSize = fontHeight + 'px';
+    textDiv.style.fontFamily = style.fontFamily;
+
+    textDiv.textContent = geom.str;
+    // |fontName| is only used by the Font Inspector. This test will succeed
+    // when e.g. the Font Inspector is off but the Stepper is on, but it's
+    // not worth the effort to do a more accurate test.
+    if (PDFJS.pdfBug) {
+      textDiv.dataset.fontName = geom.fontName;
+    }
+    // Storing into dataset will convert number into string.
+    if (angle !== 0) {
+      textDiv.dataset.angle = angle * (180 / Math.PI);
+    }
+    // We don't bother scaling single-char text divs, because it has very
+    // little effect on text highlighting. This makes scrolling on docs with
+    // lots of such divs a lot faster.
+    if (geom.str.length > 1) {
+      if (style.vertical) {
+        textDiv.dataset.canvasWidth = geom.height * viewport.scale;
+      } else {
+        textDiv.dataset.canvasWidth = geom.width * viewport.scale;
+      }
+    }
+  }
+
+  function render(task) {
+    if (task._canceled) {
+      return;
+    }
+    var textLayerFrag = task._container;
+    var textDivs = task._textDivs;
+    var capability = task._capability;
+    var textDivsLength = textDivs.length;
+
+    // No point in rendering many divs as it would make the browser
+    // unusable even after the divs are rendered.
+    if (textDivsLength > MAX_TEXT_DIVS_TO_RENDER) {
+      capability.resolve();
+      return;
+    }
+
+    var canvas = document.createElement('canvas');
+//#if MOZCENTRAL || FIREFOX || GENERIC
+    canvas.mozOpaque = true;
+//#endif
+    var ctx = canvas.getContext('2d', {alpha: false});
+
+    var lastFontSize;
+    var lastFontFamily;
+    for (var i = 0; i < textDivsLength; i++) {
+      var textDiv = textDivs[i];
+      if (textDiv.dataset.isWhitespace !== undefined) {
+        continue;
+      }
+
+      var fontSize = textDiv.style.fontSize;
+      var fontFamily = textDiv.style.fontFamily;
+
+      // Only build font string and set to context if different from last.
+      if (fontSize !== lastFontSize || fontFamily !== lastFontFamily) {
+        ctx.font = fontSize + ' ' + fontFamily;
+        lastFontSize = fontSize;
+        lastFontFamily = fontFamily;
+      }
+
+      var width = ctx.measureText(textDiv.textContent).width;
+      if (width > 0) {
+        textLayerFrag.appendChild(textDiv);
+        var transform;
+        if (textDiv.dataset.canvasWidth !== undefined) {
+          // Dataset values come of type string.
+          var textScale = textDiv.dataset.canvasWidth / width;
+          transform = 'scaleX(' + textScale + ')';
+        } else {
+          transform = '';
+        }
+        var rotation = textDiv.dataset.angle;
+        if (rotation) {
+          transform = 'rotate(' + rotation + 'deg) ' + transform;
+        }
+        if (transform) {
+          PDFJS.CustomStyle.setProp('transform' , textDiv, transform);
+        }
+      }
+    }
+    capability.resolve();
+  }
+
+  /**
+   * Text layer rendering task.
+   *
+   * @param {TextContent} textContent
+   * @param {HTMLElement} container
+   * @param {PDFJS.PageViewport} viewport
+   * @param {Array} textDivs
+   * @private
+   */
+  function TextLayerRenderTask(textContent, container, viewport, textDivs) {
+    this._textContent = textContent;
+    this._container = container;
+    this._viewport = viewport;
+    textDivs = textDivs || [];
+    this._textDivs = textDivs;
+    this._canceled = false;
+    this._capability = createPromiseCapability();
+    this._renderTimer = null;
+  }
+  TextLayerRenderTask.prototype = {
+    get promise() {
+      return this._capability.promise;
+    },
+
+    cancel: function TextLayer_cancel() {
+      this._canceled = true;
+      if (this._renderTimer !== null) {
+        clearTimeout(this._renderTimer);
+        this._renderTimer = null;
+      }
+      this._capability.reject('canceled');
+    },
+
+    _render: function TextLayer_render(timeout) {
+      var textItems = this._textContent.items;
+      var styles = this._textContent.styles;
+      var textDivs = this._textDivs;
+      var viewport = this._viewport;
+      for (var i = 0, len = textItems.length; i < len; i++) {
+        appendText(textDivs, viewport, textItems[i], styles);
+      }
+
+      if (!timeout) { // Render right away
+        render(this);
+      } else { // Schedule
+        var self = this;
+        this._renderTimer = setTimeout(function() {
+          render(self);
+          self._renderTimer = null;
+        }, timeout);
+      }
+    }
+  };
+
+
+  /**
+   * Starts rendering of the text layer.
+   *
+   * @param {TextLayerRenderParameters} renderParameters
+   * @returns {TextLayerRenderTask}
+   */
+  function renderTextLayer(renderParameters) {
+    var task = new TextLayerRenderTask(renderParameters.textContent,
+                                       renderParameters.container,
+                                       renderParameters.viewport,
+                                       renderParameters.textDivs);
+    task._render(renderParameters.timeout);
+    return task;
+  }
+
+  return renderTextLayer;
+})();
+
+PDFJS.renderTextLayer = renderTextLayer;

test/driver.js

@@ -22,80 +22,71 @@ var PDF_TO_CSS_UNITS = 96.0 / 72.0;
 /**
  * @class
  */
-var NullTextLayerBuilder = (function NullTextLayerBuilderClosure() {
+var rasterizeTextLayer = (function rasterizeTextLayerClosure() {
-  /**
+  var SVG_NS = 'http://www.w3.org/2000/svg';
-   * @constructs NullTextLayerBuilder
-   */
-  function NullTextLayerBuilder() {}
-
-  NullTextLayerBuilder.prototype = {
-    beginLayout: function NullTextLayerBuilder_BeginLayout() {},
-    endLayout: function NullTextLayerBuilder_EndLayout() {},
-    appendText: function NullTextLayerBuilder_AppendText() {}
-  };
 
-  return NullTextLayerBuilder;
+  var textLayerStylePromise = null;
-})();
+  function getTextLayerStyle() {
-
+    if (textLayerStylePromise) {
-/**
+      return textLayerStylePromise;
- * @class
+    }
- */
+    textLayerStylePromise = new Promise(function (resolve) {
-var SimpleTextLayerBuilder = (function SimpleTextLayerBuilderClosure() {
+      var xhr = new XMLHttpRequest();
-  /**
+      xhr.open('GET', './text_layer_test.css');
-   * @constructs SimpleTextLayerBuilder
+      xhr.onload = function () {
-   */
+        resolve(xhr.responseText);
-  function SimpleTextLayerBuilder(ctx, viewport) {
+      };
-    this.ctx = ctx;
+      xhr.send(null);
-    this.viewport = viewport;
+    });
-    this.textCounter = 0;
+    return textLayerStylePromise;
-
-    // clear canvas
-    ctx.save();
-    ctx.fillStyle = 'rgb(255,255,255)';
-    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-    ctx.restore();
   }
 
-  SimpleTextLayerBuilder.prototype = {
+  function rasterizeTextLayer(ctx, viewport, textContent) {
-    appendText: function SimpleTextLayerBuilder_AppendText(geom, styles) {
+    return new Promise(function (resolve) {
-      var style = styles[geom.fontName];
+      // Building SVG with size of the viewport.
-      var ctx = this.ctx, viewport = this.viewport;
+      var svg = document.createElementNS(SVG_NS, 'svg:svg');
-      var tx = PDFJS.Util.transform(this.viewport.transform, geom.transform);
+      svg.setAttribute('width', viewport.width + 'px');
-      var angle = Math.atan2(tx[1], tx[0]);
+      svg.setAttribute('height', viewport.height + 'px');
-      var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));
+      // items are transformed to have 1px font size
-      var fontAscent = (style.ascent ? style.ascent * fontHeight :
+      svg.setAttribute('font-size', 1);
-        (style.descent ? (1 + style.descent) * fontHeight : fontHeight));
+
-
+      // Adding element to host our HTML (style + text layer div).
-      ctx.save();
+      var foreignObject = document.createElementNS(SVG_NS, 'svg:foreignObject');
-      ctx.beginPath();
+      foreignObject.setAttribute('x', '0');
-      ctx.strokeStyle = 'red';
+      foreignObject.setAttribute('y', '0');
-      ctx.fillStyle = 'yellow';
+      foreignObject.setAttribute('width', viewport.width + 'px');
-      ctx.translate(tx[4] + (fontAscent * Math.sin(angle)),
+      foreignObject.setAttribute('height', viewport.height + 'px');
-                    tx[5] - (fontAscent * Math.cos(angle)));
+      var style = document.createElement('style');
-      ctx.rotate(angle);
+      var stylePromise = getTextLayerStyle();
-      ctx.rect(0, 0, geom.width * viewport.scale, geom.height * viewport.scale);
+      foreignObject.appendChild(style);
-      ctx.stroke();
+      var div = document.createElement('div');
-      ctx.fill();
+      div.className = 'textLayer';
-      ctx.restore();
+      foreignObject.appendChild(div);
-      ctx.font = fontHeight + 'px ' + style.fontFamily;
+
-      ctx.fillStyle = 'black';
+      // Rendering text layer as HTML.
-      ctx.fillText(geom.str, tx[4], tx[5]);
+      var task = PDFJS.renderTextLayer({
-
+        textContent: textContent,
-      this.textCounter++;
+        container: div,
-    },
+        viewport: viewport
-
+      });
-    setTextContent:
+      Promise.all([stylePromise, task.promise]).then(function (results) {
-        function SimpleTextLayerBuilder_SetTextContent(textContent) {
+        style.textContent = results[0];
-      this.ctx.save();
+        svg.appendChild(foreignObject);
-      var textItems = textContent.items;
+
-      for (var i = 0, ii = textItems.length; i < ii; i++) {
+        // We need to have UTF-8 encoded XML.
-        this.appendText(textItems[i], textContent.styles);
+        var svg_xml = unescape(encodeURIComponent(
-      }
+          (new XMLSerializer()).serializeToString(svg)));
-      this.ctx.restore();
+        var img = new Image();
-    }
+        img.src = 'data:image/svg+xml;base64,' + btoa(svg_xml);
-  };
+        img.onload = function () {
+          ctx.drawImage(img, 0, 0);
+          resolve();
+        };
+      });
+    });
+  }
 
-  return SimpleTextLayerBuilder;
+  return rasterizeTextLayer;
 })();
 
 /**
@@ -328,35 +319,44 @@ var Driver = (function DriverClosure() {
             self.canvas.height = viewport.height;
             self._clearCanvas();
 
-            var drawContext, textLayerBuilder;
+            var textLayerCanvas;
-            var resolveInitPromise;
+            var initPromise;
-            var initPromise = new Promise(function (resolve) {
-              resolveInitPromise = resolve;
-            });
             if (task.type === 'text') {
               // Using a dummy canvas for PDF context drawing operations
-              if (!self.dummyCanvas) {
+              textLayerCanvas = self.textLayerCanvas;
-                self.dummyCanvas = document.createElement('canvas');
+              if (!textLayerCanvas) {
+                textLayerCanvas = document.createElement('canvas');
+                self.textLayerCanvas = textLayerCanvas;
               }
-              drawContext = self.dummyCanvas.getContext('2d');
+              textLayerCanvas.width = viewport.width;
+              textLayerCanvas.height = viewport.height;
+              var textLayerContext = textLayerCanvas.getContext('2d');
+              textLayerContext.clearRect(0, 0,
+                textLayerCanvas.width, textLayerCanvas.height);
               // The text builder will draw its content on the test canvas
-              textLayerBuilder = new SimpleTextLayerBuilder(ctx, viewport);
+              initPromise = page.getTextContent().then(function(textContent) {
-
+                return rasterizeTextLayer(textLayerContext, viewport,
-              page.getTextContent().then(function(textContent) {
+                                          textContent);
-                textLayerBuilder.setTextContent(textContent);
-                resolveInitPromise();
               });
             } else {
-              drawContext = ctx;
+              textLayerCanvas = null;
-              textLayerBuilder = new NullTextLayerBuilder();
+              initPromise = Promise.resolve();
-              resolveInitPromise();
             }
             var renderContext = {
-              canvasContext: drawContext,
+              canvasContext: ctx,
               viewport: viewport
             };
             var completeRender = (function(error) {
-              page.destroy();
+              // if text layer is present, compose it on top of the page
+              if (textLayerCanvas) {
+                ctx.save();
+                ctx.globalCompositeOperation = 'screen';
+                ctx.fillStyle = 'rgb(128, 255, 128)'; // making it green
+                ctx.fillRect(0, 0, viewport.width, viewport.height);
+                ctx.restore();
+                ctx.drawImage(textLayerCanvas, 0, 0);
+              }
+              page.cleanup();
               task.stats = page.stats;
               page.stats = new StatTimer();
               self._snapshot(task, error);

test/font/font_test.html

@@ -37,6 +37,7 @@
   <script src="../../src/core/ps_parser.js"></script>
   <script src="../../src/display/pattern_helper.js"></script>
   <script src="../../src/display/annotation_helper.js"></script>
+  <script src="../../src/display/text_layer.js"></script>
   <script src="../../src/core/stream.js"></script>
   <script src="../../src/core/worker.js"></script>
   <script src="../../src/display/metadata.js"></script>

test/test_manifest.json

@@ -323,12 +323,6 @@
       "lastPage": 1,
       "about": "The same file as issue2337."
     },
-    {  "id": "thuluthfont-text",
-       "file": "pdfs/ThuluthFeatures.pdf",
-       "md5": "b7e18bf7a3d6a9c82aefa12d721072fc",
-       "rounds": 1,
-       "type": "text"
-    },
     {  "id": "freeculture",
        "file": "pdfs/freeculture.pdf",
        "md5": "dcdf3a8268e6a18938a42d5149efcfca",

test/test_slave.html

@@ -25,7 +25,9 @@ limitations under the License.
     <script src="../src/display/webgl.js"></script>
     <script src="../src/display/pattern_helper.js"></script>
     <script src="../src/display/font_loader.js"></script>
+    <script src="../src/display/dom_utils.js"></script>
     <script src="../src/display/annotation_helper.js"></script>
+    <script src="../src/display/text_layer.js"></script>
     <script src="driver.js"></script>
   </head>
   <body>

test/text_layer_test.css

@@ -0,0 +1,38 @@
+/* Copyright 2015 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Used in 'text' tests */
+
+.textLayer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+.textLayer > div {
+  position: absolute;
+  white-space: pre;
+  -webkit-transform-origin: 0% 0%;
+  -moz-transform-origin: 0% 0%;
+  -o-transform-origin: 0% 0%;
+  -ms-transform-origin: 0% 0%;
+  transform-origin: 0% 0%;
+  border: solid 1px rgba(255, 0, 0, 0.5);
+  background-color: rgba(255, 255, 32, 0.1);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}

test/unit/unit_test.html

@@ -36,7 +36,9 @@
   <script src="../../src/core/ps_parser.js"></script>
   <script src="../../src/display/pattern_helper.js"></script>
   <script src="../../src/display/font_loader.js"></script>
+  <script src="../../src/display/dom_utils.js"></script>
   <script src="../../src/display/annotation_helper.js"></script>
+  <script src="../../src/display/text_layer.js"></script>
   <script src="../../src/core/stream.js"></script>
   <script src="../../src/core/worker.js"></script>
   <script src="../../src/display/metadata.js"></script>

web/annotations_layer_builder.js

@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/*globals PDFJS, CustomStyle, mozL10n, SimpleLinkService */
+/*globals PDFJS, mozL10n, SimpleLinkService */
 
 'use strict';
 
@@ -27,6 +27,8 @@
  * @class
  */
 var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
+  var CustomStyle = PDFJS.CustomStyle;
+
   /**
    * @param {AnnotationsLayerBuilderOptions} options
    * @constructs AnnotationsLayerBuilder

web/pdf_page_view.js

@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* globals RenderingStates, PDFJS, CustomStyle, CSS_UNITS, getOutputScale,
+/* globals RenderingStates, PDFJS, CSS_UNITS, getOutputScale,
            TextLayerBuilder, AnnotationsLayerBuilder, Promise,
            approximateFraction, roundToDivide */
 
@@ -36,6 +36,8 @@ var TEXT_LAYER_RENDER_DELAY = 200; // ms
  * @implements {IRenderableView}
  */
 var PDFPageView = (function PDFPageViewClosure() {
+  var CustomStyle = PDFJS.CustomStyle;
+
   /**
    * @constructs PDFPageView
    * @param {PDFPageViewOptions} options

web/text_layer_builder.js

@@ -12,18 +12,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* globals CustomStyle, PDFJS */
+/* globals PDFJS */
 
 'use strict';
 
-var MAX_TEXT_DIVS_TO_RENDER = 100000;
-
-var NonWhitespaceRegexp = /\S/;
-
-function isAllWhitespace(str) {
-  return !NonWhitespaceRegexp.test(str);
-}
-
 /**
  * @typedef {Object} TextLayerBuilderOptions
  * @property {HTMLDivElement} textLayerDiv - The text layer container.
@@ -50,6 +42,7 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
     this.viewport = options.viewport;
     this.textDivs = [];
     this.findController = options.findController || null;
+    this.textLayerRenderTask = null;
     this._bindMouse();
   }
 
@@ -68,67 +61,6 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
       this.textLayerDiv.dispatchEvent(event);
     },
 
-    renderLayer: function TextLayerBuilder_renderLayer() {
-      var textLayerFrag = document.createDocumentFragment();
-      var textDivs = this.textDivs;
-      var textDivsLength = textDivs.length;
-      var canvas = document.createElement('canvas');
-//#if MOZCENTRAL || FIREFOX || GENERIC
-      canvas.mozOpaque = true;
-//#endif
-      var ctx = canvas.getContext('2d', {alpha: false});
-
-      // No point in rendering many divs as it would make the browser
-      // unusable even after the divs are rendered.
-      if (textDivsLength > MAX_TEXT_DIVS_TO_RENDER) {
-        this._finishRendering();
-        return;
-      }
-
-      var lastFontSize;
-      var lastFontFamily;
-      for (var i = 0; i < textDivsLength; i++) {
-        var textDiv = textDivs[i];
-        if (textDiv.dataset.isWhitespace !== undefined) {
-          continue;
-        }
-
-        var fontSize = textDiv.style.fontSize;
-        var fontFamily = textDiv.style.fontFamily;
-
-        // Only build font string and set to context if different from last.
-        if (fontSize !== lastFontSize || fontFamily !== lastFontFamily) {
-          ctx.font = fontSize + ' ' + fontFamily;
-          lastFontSize = fontSize;
-          lastFontFamily = fontFamily;
-        }
-
-        var width = ctx.measureText(textDiv.textContent).width;
-        if (width > 0) {
-          textLayerFrag.appendChild(textDiv);
-          var transform;
-          if (textDiv.dataset.canvasWidth !== undefined) {
-            // Dataset values come of type string.
-            var textScale = textDiv.dataset.canvasWidth / width;
-            transform = 'scaleX(' + textScale + ')';
-          } else {
-            transform = '';
-          }
-          var rotation = textDiv.dataset.angle;
-          if (rotation) {
-            transform = 'rotate(' + rotation + 'deg) ' + transform;
-          }
-          if (transform) {
-            CustomStyle.setProp('transform' , textDiv, transform);
-          }
-        }
-      }
-
-      this.textLayerDiv.appendChild(textLayerFrag);
-      this._finishRendering();
-      this.updateMatches();
-    },
-
     /**
      * Renders the text layer.
      * @param {number} timeout (optional) if specified, the rendering waits
@@ -139,87 +71,35 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
         return;
       }
 
-      if (this.renderTimer) {
+      if (this.textLayerRenderTask) {
-        clearTimeout(this.renderTimer);
+        this.textLayerRenderTask.cancel();
-        this.renderTimer = null;
+        this.textLayerRenderTask = null;
-      }
-
-      if (!timeout) { // Render right away
-        this.renderLayer();
-      } else { // Schedule
-        var self = this;
-        this.renderTimer = setTimeout(function() {
-          self.renderLayer();
-          self.renderTimer = null;
-        }, timeout);
       }
-    },
 
-    appendText: function TextLayerBuilder_appendText(geom, styles) {
+      this.textDivs = [];
-      var style = styles[geom.fontName];
+      var textLayerFrag = document.createDocumentFragment();
-      var textDiv = document.createElement('div');
+      this.textLayerRenderTask = PDFJS.renderTextLayer({
-      this.textDivs.push(textDiv);
+        textContent: this.textContent,
-      if (isAllWhitespace(geom.str)) {
+        container: textLayerFrag,
-        textDiv.dataset.isWhitespace = true;
+        viewport: this.viewport,
-        return;
+        textDivs: this.textDivs,
-      }
+        timeout: timeout
-      var tx = PDFJS.Util.transform(this.viewport.transform, geom.transform);
+      });
-      var angle = Math.atan2(tx[1], tx[0]);
+      this.textLayerRenderTask.promise.then(function () {
-      if (style.vertical) {
+        this.textLayerDiv.appendChild(textLayerFrag);
-        angle += Math.PI / 2;
+        this._finishRendering();
-      }
+        this.updateMatches();
-      var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));
+      }.bind(this), function (reason) {
-      var fontAscent = fontHeight;
+        // canceled or failed to render text layer -- skipping errors
-      if (style.ascent) {
+      });
-        fontAscent = style.ascent * fontAscent;
-      } else if (style.descent) {
-        fontAscent = (1 + style.descent) * fontAscent;
-      }
-
-      var left;
-      var top;
-      if (angle === 0) {
-        left = tx[4];
-        top = tx[5] - fontAscent;
-      } else {
-        left = tx[4] + (fontAscent * Math.sin(angle));
-        top = tx[5] - (fontAscent * Math.cos(angle));
-      }
-      textDiv.style.left = left + 'px';
-      textDiv.style.top = top + 'px';
-      textDiv.style.fontSize = fontHeight + 'px';
-      textDiv.style.fontFamily = style.fontFamily;
-
-      textDiv.textContent = geom.str;
-      // |fontName| is only used by the Font Inspector. This test will succeed
-      // when e.g. the Font Inspector is off but the Stepper is on, but it's
-      // not worth the effort to do a more accurate test.
-      if (PDFJS.pdfBug) {
-        textDiv.dataset.fontName = geom.fontName;
-      }
-      // Storing into dataset will convert number into string.
-      if (angle !== 0) {
-        textDiv.dataset.angle = angle * (180 / Math.PI);
-      }
-      // We don't bother scaling single-char text divs, because it has very
-      // little effect on text highlighting. This makes scrolling on docs with
-      // lots of such divs a lot faster.
-      if (geom.str.length > 1) {
-        if (style.vertical) {
-          textDiv.dataset.canvasWidth = geom.height * this.viewport.scale;
-        } else {
-          textDiv.dataset.canvasWidth = geom.width * this.viewport.scale;
-        }
-      }
     },
 
     setTextContent: function TextLayerBuilder_setTextContent(textContent) {
-      this.textContent = textContent;
+      if (this.textLayerRenderTask) {
-
+        this.textLayerRenderTask.cancel();
-      var textItems = textContent.items;
+        this.textLayerRenderTask = null;
-      for (var i = 0, len = textItems.length; i < len; i++) {
-        this.appendText(textItems[i], textContent.styles);
       }
+      this.textContent = textContent;
       this.divContentDone = true;
     },
 

web/ui_utils.js

@@ -23,57 +23,6 @@ var MAX_AUTO_SCALE = 1.25;
 var SCROLLBAR_PADDING = 40;
 var VERTICAL_PADDING = 5;
 
-// optimised CSS custom property getter/setter
-var CustomStyle = (function CustomStyleClosure() {
-
-  // As noted on: http://www.zachstronaut.com/posts/2009/02/17/
-  //              animate-css-transforms-firefox-webkit.html
-  // in some versions of IE9 it is critical that ms appear in this list
-  // before Moz
-  var prefixes = ['ms', 'Moz', 'Webkit', 'O'];
-  var _cache = {};
-
-  function CustomStyle() {}
-
-  CustomStyle.getProp = function get(propName, element) {
-    // check cache only when no element is given
-    if (arguments.length === 1 && typeof _cache[propName] === 'string') {
-      return _cache[propName];
-    }
-
-    element = element || document.documentElement;
-    var style = element.style, prefixed, uPropName;
-
-    // test standard property first
-    if (typeof style[propName] === 'string') {
-      return (_cache[propName] = propName);
-    }
-
-    // capitalize
-    uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
-
-    // test vendor specific properties
-    for (var i = 0, l = prefixes.length; i < l; i++) {
-      prefixed = prefixes[i] + uPropName;
-      if (typeof style[prefixed] === 'string') {
-        return (_cache[propName] = prefixed);
-      }
-    }
-
-    //if all fails then set to undefined
-    return (_cache[propName] = 'undefined');
-  };
-
-  CustomStyle.setProp = function set(propName, element, str) {
-    var prop = this.getProp(propName);
-    if (prop !== 'undefined') {
-      element.style[prop] = str;
-    }
-  };
-
-  return CustomStyle;
-})();
-
 var NullCharactersRegExp = /\x00/g;
 
 function removeNullCharacters(str) {

web/viewer.css

@@ -1515,7 +1515,27 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
   font-size: 10px;
 }
 
-#viewer.textLayer-visible .textLayer > div,
+#viewer.textLayer-visible .textLayer {
+  opacity: 1.0;
+}
+
+#viewer.textLayer-visible .canvasWrapper {
+  background-color: rgb(128,255,128);
+}
+
+#viewer.textLayer-visible .canvasWrapper canvas {
+  mix-blend-mode: screen;
+}
+
+#viewer.textLayer-visible .textLayer > div {
+  background-color: rgba(255, 255, 0, 0.1);
+  color: black;
+  border: solid 1px rgba(255, 0, 0, 0.5);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
 #viewer.textLayer-hover .textLayer > div:hover {
   background-color: white;
   color: black;

web/viewer.html

@@ -60,7 +60,9 @@ See https://github.com/adobe-type-tools/cmap-resources
     <script src="../src/display/webgl.js"></script>
     <script src="../src/display/pattern_helper.js"></script>
     <script src="../src/display/font_loader.js"></script>
+    <script src="../src/display/dom_utils.js"></script>
     <script src="../src/display/annotation_helper.js"></script>
+    <script src="../src/display/text_layer.js"></script>
     <script>PDFJS.workerSrc = '../src/worker_loader.js';</script>
 <!--#endif-->