OverType

The Over-The-Top Typewriter Simulator

Font:



Brokenness

Ribbon Ink

Welcome to OverType, the Over-The-Top Typewriter Simulator! This is, to my knowledge, the first typewriter sim on the web that faithfully re-creates the manual typewriter experience, eschewing all modern computer conveniences like easy deletion and editing, and providing authentic features such as overtyping, wobbly and unevenly-inked characters, and only being allowed to press one key at a time.

Instructions

  • You need to be on a computer with a keyboard. Mobile touchscreen devices won't work (see Known Bugs below).
  • Make sure you have your sound turned on for the fully-immersive experience!
  • Just like a real manual typewriter, you can only press one character key at a time. You must release each key before pressing the next. Most people naturally overlap keypresses when typing on a computer keyboard - you may need to change your typing style to avoid skipping characters when typing at speed (see FAQ for more info).
  • As well as just typing normal text, you might like try these:
    • You can use the cursor keys to move around. The up and down cursors move the roller by a quarter-line.
    • Use [tab] and [shift][tab] to jump forward or back to the nearest tab stop.
    • Hold down [esc] for "colour shift", which gives you red text. Or, sometimes, only partly so...
    • [shift] and/or [esc] can be locked down by holding one or both and pressing [caps lock] (effectively "shift lock"). Press [caps lock] again to unlock.
    • Move the sliders (see "Sliders" below)
    • Use the correction paper to erase your mistakes (see "Correction Paper" below)
    • Make a dollar sign by overtyping a capital S with a | (vertical bar/pipe)
  • Ready? Just start typing, or click here if you prefer:

Sliders

Try out the sliders at the top of the screen. The ribbon ink reduces linearly, which is not how a real typewriter would work but gives a more pleasing result. The "brokenness" controls how uneven the vertical alignment, ink density and colour shift are, and higher settings cause keys to start breaking (once a particular key has broken, it will never work again until you reduce the brokenness back down).

Correction Paper

OverType provides virtual correction paper to help correct your inevitable typing errors. To use it, move the cursor to the character you want to erase, click the "Load correction paper" button, and type the same character. Its effectiveness varies depending on brokenness and ink level. This is an initial implementation and improvements are planned - your feedback is welcome.

Known Bugs

  • As it stands, this site is unlikely ever to work on a touchscreen device without a real keyboard, due to the problems of dealing with an on-screen keyboard. If I use the device's own on-screen keyboard there are issues with forcing it to appear without a visible input field, keeping it there, working around it etc. I've tried making my own virtual keyboard instead (a bunch of <button>s with handlers attached to touch events) which kinda works but is rather sluggish, and there are issues with the sounds. I think for mobile use it will need to be a full-blown app with its own input handler, rather than a web app. I may attempt it at some point, if anyone really wants it.
  • If shift lock is on, and you press a non-alphabetic character key that you have not yet pressed in conjunction with shift, the program has no way of knowing what the shifted character should be for your particular keyboard, so it will default to using the shift characters from my UK Apple keyboard. Once you have pressed a key in conjunction with shift, the program remembers the correct shift character for that key and will use it when shift lock is on.

Planned Improvements

  • The correction paper needs some tweaks to make it more realistic - eg if you reuse a bit that you've already used, it should be less effective in the shape of the previous character typed there. In general it should probably be more "all or nothing" - patchy at low ink levels rather than faded. This is just a first draft of the feature.
  • If you type too fast or try to type two keys at once, the mechanism should sometimes jam, rather than just ignoring the latter keypress. Amazingly, this is the most commonly requested feature from the beta testers of this program. The only reason I haven't implemented it is the problem of designing a UI to represent unjamming it by picking the mechanism apart, and how to make your fingers inky and oily when you do it.
  • Choice of paper backgrounds (but of course you are free to choose the paper you feed into your printer anyway!).
  • Further suggestions welcome (please read the FAQ below first, and remember this is just for fun!) to ben@uniqcode.com.

FAQ

Why did you write this?

It started because I was trying to tell my kids about how typewriters worked (because of course they'd never seen one), so I looked for a typewriter simulator on the web, but all the existing ones that I could find get one very basic thing wrong - when you press backspace, they erase the character you just typed, like a computer. On a real typewriter, backspace simply moves the carriage back one space, allowing you to overtype a previously typed character. Erasing requires Tipp-Ex or suchlike.

One day my youngest son suggested I should write one that works the right way and allows overtyping. This seemed like it would be an interesting challenge... and indeed it was. The first version took me about an hour.

Since then it's all got a bit out of hand as I strive to make the program's output "worse" by trying to faithfully re-create some of the other interesting eccentricities of typewriters that have been eliminated in the computer age, such as wobbly and unevenly-inked characters. Thanks to all the beta testers for their great suggestions and feedback.

Why are some of my keypresses being ignored? / Why can't I type at my usual speed?

On a manual typewriter, only one (striking) key may be pressed at a time, otherwise at best the second key's hammer gets blocked by the first, and at worst the hammers may get tangled together and require picking apart. OverType replicates this (just the blocking, not the tangling, for now...) by ignoring any keypresses that happen when a character key is already being held down. Because you are used to typing on a computer, you almost certainly overlap your keypresses without even realising it. Be sure to release each key before pressing the next.

Likewise, you cannot type during a carriage return. You have to wait for it to finish.

How do I print what I've typed?

Just use your browser's standard Print function. It will use the print stylesheet, which omits all the on-screen controls, page border and background, and just prints the contents of the page.

How do I save/export?

You can use your operating system's "Print to file" function (on a Mac, the "PDF" button in the bottom-left of the Print dialog). As with printing to an actual printer, this will just render the contents of the page, not the controls or background. Alternatively, if you want the background and your text fits on the screen, take a screenshot.

How can I save as plain text or in Word format for later editing?

You can't, for two reasons. Firstly, it's completely against the spirit of a manual typewriter. Secondly, the whole purpose of this program is to replicate features of a manual typewriter that computer programs such as word processors and text editors cannot replicate, such as overtyped, unevenly inked, and wobbly characters. If you could export as text you would lose all of that. If you want editable text, use a word processor or text editor like a sane person...

Are you watching what I type? / Can I save files on the server?

No. The code runs entirely on your machine; no data is sent back to the server.

I love this so much I want to give you some money / hire you to write code for me!

That's great, thanks! Donations of any size are always welcome to my Paypal account, ben@qolc.net (please don't email me about OverType at this address - use the one above).

I'm a freelance full-stack LAMP developer with 20 years' experience. My specialities include PHP, Perl, jQuery, Linux sysadmin and MySQL; if you have a job offer to discuss, I'd love to hear from you - please email info@uniqcode.com.

Credits

Created by Ben Wheeler @ UniqCode, using jQuery and IonSound. Typewriter sound effects from Freesound and SoundJay, some of them edited by me. Dedicated to Archie.

Changelog

version 1.34 (2015-08-12)

  • New font available: GNUTypewriter.
  • Add button to hide/show the topbar controls.

version 1.33 (2015-08-09)

  • Fix offset page when printing.

version 1.32 (2015-08-09)

  • The correction paper will be automatically unloaded for any vertical movement, not just CR.
  • Add info about how to use the correction paper.
  • Accordionise the info page, and a new introduction written in OverType itself.

version 1.31 (2015-08-09)

  • Virtual Correction Paper is here at last! This is just a first draft of it; it needs tweaking to be more realistic.

version 1.30 (2015-08-05)

  • Always scroll the viewport to the current typing position when typing - useful if you've been scrolling through the instructions.
  • Replace the simplistic keydown and keypress mutexes with records of *which* keys are being held down; this allows us to ignore keyboard auto-repeat, and only advance and allow further typing when all keys have been released.
  • Upgrade Ion.Sound to 3.0.6

version 1.29 (2015-08-04)

  • Fixed crash in Safari when enter was pressed twice in a row.
  • Upgrade Ion.Sound to 3.0.5

version 1.28 (2015-08-03)

  • Don't let the sliders or font selector keep focus. This avoids them reacting to certain keypresses (eg cursor keys). Apologies if this causes accessibility problems for anyone.
  • Rearrange instructions page and add FAQ.

version 1.27 (2015-05-15)

  • Choice of fonts. Improved appearance of header. Fix an issue with redshift. Textured page background on screen.

version 1.26 (2015-03-07)

  • While a CR is in progress, ignore all other keys. Previously it was possible to prematurely type characters at the beginning of the next line before the CR had completed.

version 1.25 (2015-03-07)

  • Upgraded Ion.Sound to 3.0.0 (and use latest jQuery and jQueryUI while we're at it).
  • The Ion.Sound upgrade fixes the problems with sound synchronisation on Safari, so removed all the warnings about not using it.

version 1.24 (2014-03-16)

  • Fix printing, which got broken in a previous version.

version 1.23 (2014-03-05)

  • Do away with the off-screen textarea altogether; just bind the event handlers to $(document).

version 1.22 (2014-02-27)

  • Don't play the motion part of the CR sound if we are already at the beginning of the line (otherwise it was playing a tiny bit of it, which sounded bad).
  • Animate a little wobble at the stop part of a CR. It just seemed like the sound demanded it.

version 1.21 (2014-02-26)

  • Separated carriage return sound into motion and stop sounds. The motion sound length depends on the line length, while the stop sound is the same for all.

version 1.20 (2014-02-26)

  • Fix certain symbol characters not working since 1.19 (or possibly earlier on Chrome).
  • Fix colourshift lock always acting as caps lock too.
  • Fix shift lock. We have no way of determining in advance which symbols are produced by which shifted key on your particular keyboard layout; so, shift-lock starts off using my keyboard layout (UK Mac), but whenever you use shift (unlocked), it will learn the real symbol on the shift position of that key, and will thenceforth use that in shift-lock too.
  • Fix releasing shift/colourshift lock not working properly on Chrome/Mac. The fix for this is slightly shonky but can't be helped due to the insane differences between browsers on which events capslock fires.
  • Tweaks to timing and keydown/keyup sounds to try to improve responsiveness and make it a bit harder to type far too fast for the sounds to keep up.

version 1.19 (2014-02-24)

  • Moved handling of all printing characters to a keypress handler. This means I no longer have to manually map keycodes to characters, which in turn means that you should now get the correct symbol characters according to your own keyboard layout.
  • Movement keys (space, backspace, tab, and cursor keys) now all move on keydown, not keyup.
  • Provide a button to get the instructions page back.
  • Fix the Safari warning being shown to Chrome users (hopefully). Browser detection sucks.

version 1.18 (2014-02-24)

  • Bail if no rbga() support, and try to warn Safari users

version 1.17 (2014-02-23)

  • Renamed from "Ben's Super-Realistic Typewriter Simulator" to "OverType - The Over-The-Top Typewriter Simulator"
  • The '#' symbol is now available by pressing alt-3 (the standard, stupid as it is, for the Mac UK keyboard layout)
  • Vary the inkiness within each character, rather than just from one character to the next, by overlaying two random partial clips of each character atop itself with an opacity that depends on the sliders.
  • Somewhat refactored the keydown handler into more digestible chunks.

version 1.16 (2014-02-18)

  • Colour shift is now achieved by holding [esc], as holding [alt] caused unwanted side-effects from the OS acting on the key combo. Make sure the page has fully loaded before you press [esc], as otherwise the browser will interpret it as a "stop loading" command.
  • When colour shift partially "fails", instead of printing the whole character in red and then overprinting part of it in black, which sometimes meant the red was somewhat visible beneath the black part, each part of the character is now clipped so they do not overlap.
  • Improved the algorithm for deciding how often, and by how much, colour shift "fails".
  • Shift, colour shift, or both, can now be locked on by holding them down and pressing caps lock. Press caps lock again to release the lock. Note that unlike a computer's caps lock, a typewriter's shift lock behaves exactly as if shift were held down, so for example number keys produce symbols.

version 1.15 (2014-02-15)

  • A better algorithm for mapping Brokenness to vertical offset. Rather than having a fixed offset for each character, and simply adding more random offset when Brokenness is increased, we now choose an offset and threshold for each character. If Brokenness is above the threshold for that char, it will be offset by its consistent amount. This offset may then be randomly boosted (or not) by 1 or 2px at high Brokenness levels.
  • Brokenness now maxes at 99%, given that 100% brokenness would imply being completely non-functional.
  • Show the values of the sliders as numbers below them.
  • Reduce max inkiness.

version 1.14 (2014-02-12)

  • 2-colour ribbon. Hold [alt] to type red characters. Sometimes these will randomly be only partially red, to simulate failing to press the colour shift key hard enough. The frequency and amount of this failure is affected by the Brokenness control.

version 1.13 (2014-02-12)

  • Sliders to control brokenness and inkiness.
  • A high brokenness setting results in more wobbly and unevenly-inked text. Above 75%, the keys start to randomly break as you type, either failing to work at all (broken armature) or occasionally printing a solid block (armature works but letter has fallen off). A broken key never recovers until the brokenness is reduced back below this threshold, which unbreaks all of them.
  • The inkiness slider also monitors your current ink level - ie it reduces as you type.
  • Start from the centre of the top line of the page, instead of the top-left.

version 1.12 (2014-02-12)

  • Cursor key support. Left and right are the same as backspace and space. Up and down feed the paper by a quarter of a line height at a time.
  • Use a position:absolute div for each character within position:relative output block. I had hoped this would allow me to do away with the input textarea altogether and bind the key handlers to $(document), but alas even with preventDefault(), some keypresses were still occasionally being passed through to the browser, causing it to scroll (space), go back a page (backspace) etc. Still, this way of positioning seems more flexible so I kept it.

version 1.11 (2014-02-12)

  • Change alpha level instead of colour to vary ink level. This seems to look more realistic and also means that if you overtype characters they get darker as they should.
  • Reduce the likelihood of characters having vertical offset (while keeping the range the same at +/- 1px).
  • Play the CR bell for tabs and spaces as well as normal keys.
  • Fix lines sometimes wrapping if you overtype a lot after a lot of backspaces.

version 1.10 (2014-02-11)

  • fix CSS font-family (whoops)
  • per-char vertical offset was not being used consistently

version 1.9 (2014-02-11)

  • Stylesheet for printing
  • Increased space between lines

version 1.8 (2014-02-11)

  • The ribbon ink now gradually runs out, so the text becomes lighter the more characters you type.
  • Reduced vertical offset, as it was just a tad too wibbly-wobbly.

version 1.7 (2014-02-11)

  • Prevent the hidden textarea from losing focus. It should now be safe to click anywhere on the page.
  • Implemented tab stops every 8 chars - press TAB to jump to the next tab stop, SHIFT-TAB jumps to the previous one.

version 1.6 (2014-02-11)

  • If both shift keys are pressed, don't do the keyup sound until both are released.
  • Round the vertical offset to an integer number of pixels.
  • Don't release the keydown mutex until animations have finished. This limits typing speed and prevents being able to type a character onto the next line while a carriage return is in progress.

version 1.5 (2014-02-11)

  • Use a separate mutex for the shift key.
  • Position the page on load so it doesn't jump after the first keypress.

version 1.4 (2014-02-11)

  • Move paper on keyup, not keydown.
  • Use a mutex to ensure only one keypress is handled at a time, instead of a timeout (also fixes a long-held key generating two characters).
  • Each character now has a consistent vertical offset (randomly chosen at the start), instead of randomly changing each time.
  • Drop shadow on page.
  • Fix page moving too far vertically on CR.

version 1.3 (2014-02-10)

  • The typed character now always appears in the centre of the screen; the "paper" moves. Movement of paper and carriage return are animated.
  • A basic cursor to show where the next character will appear. This could eventually become an animated print head.
  • Wibbly-wobbly text: A small random vertical offset is added to each character (suggested by David Gosnell)

version 1.2 (2014-02-10)

  • Don't allow backspacing past the beginning of the line.

version 1.1 (2014-02-10)

  • Separate sounds when keys are pressed and released, and for the shift key.
  • Better (manual) carriage return sound.
  • Limit the speed at which you can type.
  • If you keep typing past the bell and hit the end of the line (80 characters), the carriage stops instead of continuing. In other words there is now a hard line length limit.
  • Punctuation characters are handled (these are based on my UK Mac keyboard; unless you have the same keyboard some characters will probably be "wrong" for you.).
  • Random variation of colour to simulate variations in key pressure and uneven ribbon ink.
  • Hide all the informational text when you start typing, partly to give more space for both information and typing, but mostly to dodge the problem of trying to work out where to position the typewriter output so it doesn't crash the info.

version 1.0 (2014-02-09)