I’d like to build a simulator for an old LGP-30 computer. This includes in- and output on an – also simulated – Friden Flexowriter typewriter.

One of the characteristics of the typewriter is, that when you press the backspace key, it just moves the print head one position to the left (or, to be precise, it moves the drum one position to the right), without erasing the last printed character. That allows it to print overlapping characters. For example, if you press O, backspace, /, you would get a “Ø” character. Likewise, if you want underlined text, you could type “text”, then 4x backspace and 4x _.

The best I could achieve so far is this CSS class:

  .bs {
    letter-spacing: -0.6em;
  }

This lets me write html like <span class="bs">O</span>/ to get the desired output. The drawback is, that I’d need to have an array of overlapping characters for every position in the output div, so I can generate the html for overlapping characters.

For example, for the underlined word “text”, the generated output would look like this:

<span class="bs">t</span>_
<span class="bs">e</span>_
<span class="bs">x</span>_
<span class="bs">t</span>_

What I’d like to have would be something like this:

text&bksp;&bksp;&bksp;&bksp;____

Or some other substitution for a backspace character that leads to letters being painted overlapping.

Do you know any CSS-tricks, or maybe some typescript code or a node.js library, that helps me implementing that behavior without too much struggle? The font will be a monospace font, so all I need is a “negative space symbol” or a “move the cursor 0.6em left” command.