Hi Squiffy tinkerers,

I have an input where you type letters over an image. I want the output to appear over the same image on the same spots later in the toy/game. However <pre> causes the output to stretch almost twice as wide as the input.

<input id="test"> [[go]]

[[go]]:
    var test = document.getElementById("test").value;
       squiffy.set("test", test);


<pre>{test}</pre> Why is is this so stretchy compared to the input?

<pre><span style="font-stretch:ultra-condensed">{test}</pre></span> Why does this make no difference?

I appreciate the help!

font-stretch allows you to select a wider or narrower variant of a font.
It only works for fonts that actually have those variants.

If you want the text in two elements to match width, you will need to display them using the same font and size.

For example, these should be the same width:

<input style="font-family: mono; font-size: 12pt; padding: 3px;" value="Here is a test">
<pre style="font-family: mono; font-size: 12pt; padding: 3px;">Here is a test</pre>

Not sure if the forum will let me post that here; but it would look something like:

Here is a test

Hello again mrangel,

Whoever owns Squiffy now should pay you a percentage of ad revenues.

I read yesterday that in some cases "white-space: pre-wrap;" works better than <pre>.

My problem now is that it gets the spacing correct, but it doubles the number of return spaces. (Not in the Squiffy editor but in the browser). The text gets shoved way below the picture.

I'm going to try your suggestion with pre today.

Paste an image link here: <input id=pic> and [[click]]

[[click]]:
    var pic = document.getElementById("pic").value;
    squiffy.set("pic", pic);

Type some stuff below and click "result".
<div id="graffiti" contenteditable="true" style="padding:20px; font-family: mono; height:auto; max-width:auto; max-height:100%; background-repeat: no-repeat; background-size: cover; background-image: url('{pic}');"></div>

[[result]]

[[result]]:
     var graffiti = document.getElementById("graffiti").innerText;
     squiffy.set("graffiti", graffiti);

<div id="identical" contenteditable="true" style="padding:20px; white-space: pre-wrap; font-family: mono; height:auto; max-width:auto; max-height:100%; background-repeat: no-repeat; background-size: cover; background-image: url('{pic}');">{graffiti}</div>

I ended up using .replace(/\n\n/g,"<br>") to get rid of the doubled linebreaks. I have no idea why this is happening, still.

Your mono font idea works much better than pre-wrap. Your way is shorter code, and allows the input and output to be almost identical except for the tag. It's easier to track down typos and things I want to tweak. Thanks for that!

Monospaced fonts tend to be wider than proportional ones, because all the characters are the same width, so the i has to be as wide as an m.

<pre> in old-school HTML had two purposes. It changes the font to a monospaced one, and prevents the usual collapsing of any amount of whitespace into a single space. I wasn't sure which of those effects you're most interested in. These days tags like that are less useful, as you can make both of those changes using CSS.