/blog

Following on from yesterday's revelation I started thinking how I could improve the handwriting experience on the site.

The main issue was things being a bit cramped. As the post textarea fills and expands there is nowhere left to write and easily see what you are doing — you have to write within the confines of the field. What if I could create some space?

I decided to create an overlay that covers part of the textarea but still allows any input to pass through to the textarea itself.

An event listener on the textarea for the pointerdown event (e) checks if e.pointerType === "pen" — tapping in the textarea with a stylus causes an overlay div to become visible.

The overlay has the CSS property pointer-events: none applied so that everything is passed through to the textarea below. It also has a repeating background that mostly obscures the text underneath with nice neat guide lines for writing.

Tap away from the textarea, or anywhere not using a stylus, and the overlay is no longer shown.

I'm adding this to anywhere on the site that I might write — blog, journal, notes — but am still working out the best placement for each scenario.

If supported by the browser, the following should hide the on-screen keyboard on a mobile device:

if ('virtualKeyboard' in navigator) {
    navigator.virtualKeyboard.hide();
}

The if statements returns true on my phone but the hide() method just doesn't dismiss the keyboard.

Instead, I'm having to change the inputmode attribute of the relevant textarea to 'none' when tapping with the stylus to force hide the keyboard, then back to 'text' when not.