hardcoresushi/libpdfviewer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

use CSS transform to rotate text layer

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/main/assets/viewer.css
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);
}

14
app/src/main/assets/viewer.js
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;