Skip to content

Commit

Permalink
Use <span> instead of <div> for the textlayer
Browse files Browse the repository at this point in the history
  • Loading branch information
@jviereck
jviereck committed Jul 1, 2014
1 parent 0ac8380 commit 47b97bf
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 45 deletions.
74 changes: 37 additions & 37 deletions web/text_layer_builder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,46 +32,46 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
function TextLayerBuilder(options) {
this.textLayerDiv = options.textLayerDiv;
this.layoutDone = false;
this.divContentDone = false;
this.spanContentDone = false;
this.pageIdx = options.pageIndex;
this.matches = [];
this.lastScrollSource = options.lastScrollSource || null;
this.viewport = options.viewport;
this.isViewerInPresentationMode = options.isViewerInPresentationMode;
this.textDivs = [];
this.textSpans = [];
this.findController = window.PDFFindController || null;
}

TextLayerBuilder.prototype = {
renderLayer: function TextLayerBuilder_renderLayer() {
var textLayerFrag = document.createDocumentFragment();
var textDivs = this.textDivs;
var textDivsLength = textDivs.length;
var textSpans = this.textSpans;
var textSpansLength = textSpans.length;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// 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) {
if (textSpansLength > MAX_TEXT_DIVS_TO_RENDER) {
return;
}

for (var i = 0; i < textDivsLength; i++) {
var textDiv = textDivs[i];
if (textDiv.dataset.isWhitespace !== undefined) {
for (var i = 0; i < textSpansLength; i++) {
var textSpan = textSpans[i];
if (textSpan.dataset.isWhitespace !== undefined) {
continue;
}

ctx.font = textDiv.style.fontSize + ' ' + textDiv.style.fontFamily;
var width = ctx.measureText(textDiv.textContent).width;
ctx.font = textSpan.style.fontSize + ' ' + textSpan.style.fontFamily;
var width = ctx.measureText(textSpan.textContent).width;
if (width > 0) {
textLayerFrag.appendChild(textDiv);
var textScale = textDiv.dataset.canvasWidth / width;
var rotation = textDiv.dataset.angle;
textLayerFrag.appendChild(textSpan);
var textScale = textSpan.dataset.canvasWidth / width;
var rotation = textSpan.dataset.angle;
var transform = 'scale(' + textScale + ', 1)';
transform = 'rotate(' + rotation + 'deg) ' + transform;
CustomStyle.setProp('transform' , textDiv, transform);
CustomStyle.setProp('transformOrigin' , textDiv, '0% 0%');
CustomStyle.setProp('transform' , textSpan, transform);
CustomStyle.setProp('transformOrigin' , textSpan, '0% 0%');
}
}

Expand Down Expand Up @@ -102,10 +102,10 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {

appendText: function TextLayerBuilder_appendText(geom, styles) {
var style = styles[geom.fontName];
var textDiv = document.createElement('div');
this.textDivs.push(textDiv);
var textSpan = document.createElement('span');
this.textSpans.push(textSpan);
if (!/\S/.test(geom.str)) {
textDiv.dataset.isWhitespace = true;
textSpan.dataset.isWhitespace = true;
return;
}
var tx = PDFJS.Util.transform(this.viewport.transform, geom.transform);
Expand All @@ -117,19 +117,19 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
var fontAscent = (style.ascent ? style.ascent * fontHeight :
(style.descent ? (1 + style.descent) * fontHeight : fontHeight));

textDiv.style.position = 'absolute';
textDiv.style.left = (tx[4] + (fontAscent * Math.sin(angle))) + 'px';
textDiv.style.top = (tx[5] - (fontAscent * Math.cos(angle))) + 'px';
textDiv.style.fontSize = fontHeight + 'px';
textDiv.style.fontFamily = style.fontFamily;
textSpan.style.position = 'absolute';
textSpan.style.left = (tx[4] + (fontAscent * Math.sin(angle))) + 'px';
textSpan.style.top = (tx[5] - (fontAscent * Math.cos(angle))) + 'px';
textSpan.style.fontSize = fontHeight + 'px';
textSpan.style.fontFamily = style.fontFamily;

textDiv.textContent = geom.str;
textDiv.dataset.fontName = geom.fontName;
textDiv.dataset.angle = angle * (180 / Math.PI);
textSpan.textContent = geom.str;
textSpan.dataset.fontName = geom.fontName;
textSpan.dataset.angle = angle * (180 / Math.PI);
if (style.vertical) {
textDiv.dataset.canvasWidth = geom.height * this.viewport.scale;
textSpan.dataset.canvasWidth = geom.height * this.viewport.scale;
} else {
textDiv.dataset.canvasWidth = geom.width * this.viewport.scale;
textSpan.dataset.canvasWidth = geom.width * this.viewport.scale;
}
},

Expand All @@ -140,7 +140,7 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
for (var i = 0, len = textItems.length; i < len; i++) {
this.appendText(textItems[i], textContent.styles);
}
this.divContentDone = true;
this.spanContentDone = true;
this.setupRenderLayoutTimer();
},

Expand Down Expand Up @@ -201,7 +201,7 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
}

var bidiTexts = this.textContent.items;
var textDivs = this.textDivs;
var textSpans = this.textSpans;
var prevEnd = null;
var isSelectedPage = (this.findController === null ?
false : (this.pageIdx === this.findController.selected.pageIdx));
Expand All @@ -216,12 +216,12 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {

function beginText(begin, className) {
var divIdx = begin.divIdx;
textDivs[divIdx].textContent = '';
textSpans[divIdx].textContent = '';
appendTextToDiv(divIdx, 0, begin.offset, className);
}

function appendTextToDiv(divIdx, fromOffset, toOffset, className) {
var div = textDivs[divIdx];
var div = textSpans[divIdx];
var content = bidiTexts[divIdx].str.substring(fromOffset, toOffset);
var node = document.createTextNode(content);
if (className) {
Expand Down Expand Up @@ -249,9 +249,9 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
var end = match.end;
var isSelected = (isSelectedPage && i === selectedMatchIdx);
var highlightSuffix = (isSelected ? ' selected' : '');

if (isSelected && !this.isViewerInPresentationMode) {
scrollIntoView(textDivs[begin.divIdx],
scrollIntoView(textSpans[begin.divIdx],
{ top: FIND_SCROLL_OFFSET_TOP,
left: FIND_SCROLL_OFFSET_LEFT });
}
Expand All @@ -275,7 +275,7 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
appendTextToDiv(begin.divIdx, begin.offset, infinity.offset,
'highlight begin' + highlightSuffix);
for (var n0 = begin.divIdx + 1, n1 = end.divIdx; n0 < n1; n0++) {
textDivs[n0].className = 'highlight middle' + highlightSuffix;
textSpans[n0].className = 'highlight middle' + highlightSuffix;
}
beginText(end, 'highlight end' + highlightSuffix);
}
Expand All @@ -295,7 +295,7 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {

// Clear all matches.
var matches = this.matches;
var textDivs = this.textDivs;
var textSpans = this.textSpans;
var bidiTexts = this.textContent.items;
var clearedUntilDivIdx = -1;

Expand All @@ -304,7 +304,7 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
var match = matches[i];
var begin = Math.max(clearedUntilDivIdx, match.begin.divIdx);
for (var n = begin, end = match.end.divIdx; n <= end; n++) {
var div = textDivs[n];
var div = textSpans[n];
div.textContent = bidiTexts[n].str;
div.className = '';
}
Expand Down
16 changes: 8 additions & 8 deletions web/viewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,20 +124,20 @@ select {
display: none;
}

:-webkit-full-screen .textLayer > div {
:-webkit-full-screen .textLayer > span {
cursor: none;
}

:-moz-full-screen .textLayer > div {
:-moz-full-screen .textLayer > span {
cursor: none;
}

:fullscreen .textLayer > div {
:fullscreen .textLayer > span {
cursor: none;
}

#viewerContainer.presentationControls,
#viewerContainer.presentationControls .textLayer > div {
#viewerContainer.presentationControls .textLayer > span {
cursor: default;
}

Expand Down Expand Up @@ -1027,7 +1027,7 @@ html[dir='rtl'] .verticalToolbarSeparator {
}

.horizontalToolbarSeparator {
display: block;
display: block;
margin: 0 0 4px 0;
height: 1px;
width: 100%;
Expand Down Expand Up @@ -1310,7 +1310,7 @@ canvas {
overflow: hidden;
}

.textLayer > div {
.textLayer > span {
color: transparent;
position: absolute;
white-space: pre;
Expand Down Expand Up @@ -1489,7 +1489,7 @@ canvas {
}

.dialog .separator {
display: block;
display: block;
margin: 4px 0 4px 0;
height: 1px;
width: 100%;
Expand Down Expand Up @@ -1672,7 +1672,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
background: url(images/toolbarButton-menuArrows@2x.png) no-repeat;
background-size: 7px 16px;
}

html[dir='ltr'] .toolbarButton#sidebarToggle::before {
content: url(images/toolbarButton-sidebarToggle@2x.png);
}
Expand Down

0 comments on commit 47b97bf

Please sign in to comment.