use CSS transform to rotate text layer
Newer pdf.js versions don't automatically rotate text layer based on viewport's rotation, instead they now set the value of the attribute "data-main-rotation" to value of rotation in degrees. So, we now apply CSS transformation to the text layer depending on the value of that attribute.
This commit is contained in:
parent
2dea11799c
commit
69696ae2a9
@ -93,3 +93,13 @@ canvas, .textLayer {
|
||||
.textLayer .endOfContent.active {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
[data-main-rotation="90"] {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
[data-main-rotation="180"] {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
[data-main-rotation="270"] {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
@ -150,8 +150,18 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
|
||||
|
||||
render();
|
||||
|
||||
// We use CSS transform to rotate a text layer div of zero
|
||||
// degrees rotation. So, when the rotation is 90 or 270
|
||||
// degrees, set width and height of the text layer div to the
|
||||
// height and width of the canvas, respectively, to prevent
|
||||
// text layer misalignment.
|
||||
if (orientationDegrees % 180 === 0) {
|
||||
newTextLayerDiv.style.height = newCanvas.style.height;
|
||||
newTextLayerDiv.style.width = newCanvas.style.width;
|
||||
} else {
|
||||
newTextLayerDiv.style.height = newCanvas.style.width;
|
||||
newTextLayerDiv.style.width = newCanvas.style.height;
|
||||
}
|
||||
if (useRender) {
|
||||
textLayerDiv.replaceWith(newTextLayerDiv);
|
||||
textLayerDiv = newTextLayerDiv;
|
||||
|
Loading…
Reference in New Issue
Block a user