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

horizontally and vertically center canvas and text layer

Browse Source 
Also fixes an issue where text layer is not exactly on top of the canvas when
canvas width is less than screen width (which happens often in landscape mode or
when fully zoomed out)
This commit is contained in:
loryeam 2022-11-20 15:21:13 +00:00 committed by Daniel Micay
parent ac4aa0bbb9
commit 1cf1c7ec28
2 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/src/main/assets/viewer.css
View File

@ -1,24 +1,36 @@
html, body {
height: 100%;
}
body, canvas { body, canvas {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
canvas {
margin: auto;
display: block;
}
body { body {
background-color: #c0c0c0; background-color: #c0c0c0;
} }
#container {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
#container canvas, #container .textLayer {
/* overlay child elements on top of each other */
grid-row-start: 1;
grid-column-start: 1;
}
canvas, .textLayer {
display: inline-block;
position: relative;
}
.textLayer { .textLayer {
position: absolute;
text-align: initial; text-align: initial;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden; overflow: hidden;
opacity: 0.2; opacity: 0.2;
line-height: 1; line-height: 1;

6
app/src/main/assets/viewer.html
View File

@ -7,8 +7,10 @@
<script src="pdf.js"></script> <script src="pdf.js"></script>
</head> </head>
<body> <body>
<canvas id="content"></canvas> <div id="container">
<div id="text" class="textLayer"></div> <canvas id="content"></canvas>
<div id="text" class="textLayer"></div>
</div>
<script src="viewer.js"></script> <script src="viewer.js"></script>
</body> </body>
</html> </html>