Quote:
Originally Posted by kovidgoyal
With that commit, the simplest I can make it is:
Code:
<header><canvas style="width: _WIDTH_PIXELS_px; height: _HEIGHT_PIXELS_px;" width="_WIDTH_PIXELS_" height="_HEIGHT_PIXELS_"><script>
canvas = document.currentScript.parentNode
s = window.getComputedStyle(canvas)
ctx = canvas.getContext("2d");
ctx.font = s.font
ctx.fillStyle = 'black';
ctx.fillText("section: _SECTION_", 5, 5 + canvas.height / 2);
|
upon a quick test I confirm it is working fine, here's the output:
header after new commit - Nineteen eighty-four - George Orwell.pdf
On current version I found these settings to look fine, with a
white transparent background and grey text:
PHP Code:
<header>
<canvas>
<script>
canvas = document.currentScript.parentNode;
canvas.height = 120;
canvas.width = 1400;
ctx = canvas.getContext("2d");
ctx.font = "12px sans-serif";
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'grey';
ctx.fillText("_TITLE_", 2, canvas.height / 2 + 3);
ctx.fillText("_SECTION_", 250, canvas.height / 2 + 3);
ctx.fillText("_AUTHOR_", 500, canvas.height / 2 + 3);
PHP Code:
<footer>
<canvas>
<script>
canvas = document.currentScript.parentNode;
canvas.height = 120;
canvas.width = 1400;
ctx = canvas.getContext("2d");
ctx.font = "12px sans-serif";
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'grey';
ctx.fillText("_PAGENUM_/_TOTAL_PAGES_", 260, canvas.height / 2 + 3);
looks like this:
header and footer white bg grey text - Nineteen eighty-four - George Orwell.pdf
I've attached the trimmed EPUB I used if someone wants to do further testing