Anyway to Create Headers and Footers Such That They Can't Be Selected

[Blaineoreski]

Dr. K & Comfy.n!

Originally Posted by kovidgoyal

With that commit, the simplest I can make it is:

<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);

Looks like a wee level of magic!

In the GUI conversion interface, which tab should I put this code into? What are the steps?

And, would I now SKIP the two cells here entirely?

https://ibb.co/nchV4NP

Many thanks,

Ski

[Comfy.n]

Originally Posted by Blaineoreski

In the GUI conversion interface, which tab should I put this code into? What are the steps?

Ski

Well, as I understand, you can use just _WIDTH_PIXELS_ (or height...) instead of having to guess those values, which vary across different documents.

So, for instance, you can paste this in the Header field:

PHP Code:

<header>
<canvas style="width: _WIDTH_PIXELS_ ; height: _HEIGHT_PIXELS_;">
<script>
canvas = document.currentScript.parentNode
s = window.getComputedStyle(canvas)
ctx = canvas.getContext("2d");
  ctx.font = "12px sans-serif";
ctx.fillStyle = 'grey';
ctx.fillText("_TITLE_", 2, canvas.height / 2 + 3);
ctx.fillText("_SECTION_", 250, canvas.height / 2 + 3); 


instead of

PHP Code:

<header>
<canvas style="width: 1400 ; height: 120;">
<script>
canvas = document.currentScript.parentNode
s = window.getComputedStyle(canvas)
ctx = canvas.getContext("2d");
  ctx.font = "12px sans-serif";
ctx.fillStyle = 'grey';
ctx.fillText("_TITLE_", 2, canvas.height / 2 + 3);
ctx.fillText("_SECTION_", 250, canvas.height / 2 + 3); 


The numbers 2 and 250 represent the x-position, Kovid may want to correct me if this is not accurate.