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:
octocorvus 2023-03-18 10:00:25 +00:00 committed by Daniel Micay
parent 2dea11799c
commit 69696ae2a9
2 changed files with 22 additions and 2 deletions

View File

@ -93,3 +93,13 @@ canvas, .textLayer {
.textLayer .endOfContent.active { .textLayer .endOfContent.active {
top: 0; top: 0;
} }
[data-main-rotation="90"] {
transform: rotate(90deg);
}
[data-main-rotation="180"] {
transform: rotate(180deg);
}
[data-main-rotation="270"] {
transform: rotate(270deg);
}

View File

@ -150,8 +150,18 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
render(); render();
newTextLayerDiv.style.height = newCanvas.style.height; // We use CSS transform to rotate a text layer div of zero
newTextLayerDiv.style.width = newCanvas.style.width; // 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) { if (useRender) {
textLayerDiv.replaceWith(newTextLayerDiv); textLayerDiv.replaceWith(newTextLayerDiv);
textLayerDiv = newTextLayerDiv; textLayerDiv = newTextLayerDiv;