I am interested in creating a simulation for the vintage LGP-30 computer. This will involve input and output on a simulated Friden Flexowriter typewriter.
One unique feature of the typewriter is that pressing the backspace key merely shifts the print head one position to the left, without actually erasing the last character. This allows for printing overlapping characters. For instance, typing O, backspace, / would result in a "Ø" character. Similarly, for underlined text, one could type "text", then press backspace four times followed by _ four times.
So far, the best solution I have come up with involves this CSS class:
.bs {
letter-spacing: -0.6em;
}
This enables me to use HTML like
<span class="bs">O</span>/For example, for the word "text" with underline, the generated output would be:
<span class="bs">t</span>_
<span class="bs">e</span>_
<span class="bs">x</span>_
<span class="bs">t</span>_
What I envision is something like this:
text&bksp;&bksp;&bksp;&bksp;____
Or any other substitution for a backspace character that results in letters appearing as if they are painted over one another.
Do you know any CSS tricks, or perhaps some TypeScript code or a Node.js library, that can assist me in implementing this functionality without much difficulty? The font used will be monospace, so all I need is a "negative space symbol" or a command to "move the cursor 0.6em to the left."