μLetras

Dan Mailman

2026-03-30

Language

μLex/μLetras Demo

μLetras

Overview

μLetras extends μTeclas by making the key-to-character correspondence continuously visible. Each special Spanish character is paired with a familiar QWERTY key, so the user can produce the desired character either by keyboard press duration or by mouse press duration on the corresponding cell. Short versus long left-click parallels short versus long keypress, while right-click or Shift+left-click selects the uppercase variant where one exists. The display below presents those pairings directly in a rectangular grid. As in many other apps, v stands for umlauted u, yielding ü.

QWERTY	a / A	e / E	i / I	o / O	u / U	v / V	n / N	c / C	!	?	<	>	$	P
μLetras	á / Á	é / É	í / Í	ó / Ó	ú / Ú	ü / Ü	ñ / Ñ	ç / Ç	¡	¿	«	»	€	₧

Interactive Demo

Long-press QWERTY to type μLetras.

Demo inactive. Click the output area to start typing.

To Demonstrate μLetras Functionality

Type o then e to get oe.
Longpress o, then press f to get óf.
Tap a versus longpress a to compare a and á.
Try Shift + a for tap versus longpress: A and Á.

μLetras Display

μLetras keys: a e i o u v n c ! ? < > $ P

Typing Area

Characters are inserted at the textarea caret position.

Behind the Scenes

Pending key: none
Duration: 0 ms
Display state: idle
Selected: (empty)
Last selected: none

Interaction Model

Older methods for entering accented characters rely on modes, keyboard-layout switching, dead keys, or memorized sequences. These approaches impose cognitive overhead and interrupt typing flow.

μLetras preserves the μTeclas interaction model while adding a display that makes the mapping legible at a glance. Instead of asking the user to remember special-key associations, the interface keeps those associations in view throughout interaction.

The underlying input logic remains duration-based. A short press yields the base QWERTY character, while a longer press yields the accented or alternate character associated with that key. The same distinction is available by mouse: a short left-click resolves to the base character, a long left-click resolves to the special character, and right-click or Shift+left-click provides the uppercase form when relevant. No layout switching, dead keys, or memorized sequences are required.

Each μLetras cell also serves as a state display. When a key enters a temporary pending state, the corresponding cell changes appearance to show that the key is being held; once the long-press threshold has been crossed, the same cell changes again to indicate that the special character will be emitted on release. Mouse interaction uses the same visual logic, with distinct hover and left/right button states. In this way, the display links the physical key or cell, the pending state, and the resolved output within a single visual unit.

The following state diagram summarizes the mouse behavior for a single μLetras cell. It tracks how hover, left-button timing, and right-button timing change both the display state and the emitted output.

stateDiagram
    direction LR

    classDef idle fill:#f5f1e7,stroke:#ccb892,color:#2e2618
    classDef hover fill:#f3e4c6,stroke:#b88d44,color:#7b4914
    classDef leftPre fill:#ead8f1,stroke:#8a63a5,color:#5d3577
    classDef leftPost fill:#cfe9ff,stroke:#5a94c5,color:#1b4f79
    classDef rightPre fill:#ffd6d9,stroke:#c46a78,color:#8b2636
    classDef rightPost fill:#d4f0d5,stroke:#619067,color:#244f2d

    [*] --> Idle

    Idle --> Hover: Hover
    Hover --> Idle: Leave

    Hover --> LeftPretimer: Left Dn
    LeftPretimer --> LeftPosttimer: Timer
    LeftPretimer --> Hover: Left Up<br/>SEND n
    LeftPosttimer --> Hover: Left Up<br/>SEND ñ

    Hover --> RightPretimer: Right Dn
    RightPretimer --> RightPosttimer: Timer
    RightPretimer --> Hover: Right Up<br/>SEND N
    RightPosttimer --> Hover: Right Up<br/>SEND Ñ

    Idle: (Idle)<br/>ñ
    Hover: (Hover)<br/>ñ
    LeftPretimer: {ñ}
    LeftPosttimer: ñ
    RightPretimer: {Ñ}
    RightPosttimer: Ñ

    class Idle idle
    class Hover hover
    class LeftPretimer leftPre
    class LeftPosttimer leftPost
    class RightPretimer rightPre
    class RightPosttimer rightPost

If a second key is pressed before the first is released, the first key is resolved immediately. This preserves character order even when key presses overlap.

There are no modes, no dead keys, and no layout switching, only key-down duration.

Dissertation Context

My dissertation argues that gesture-efficient input methods for global languages can be generated algorithmically and evaluated in terms of gestures per lexeme. μLetras serves as a compact example in that broader family by showing not only the gesture-to-output relation but also the display logic that can make such systems easier to learn and demonstrate.

Because the mapping is one-to-one, μLetras can teach the system through stable visual correspondence. Each cell pairs a QWERTY key with its special-character outcome and also marks the transition from pre-threshold to post-threshold state. Because the same display supports both keyboard and mouse interaction, it can explain the system across input modes rather than only for typists already committed to the keyboard. The display therefore acts both as a legend and as a live explanation of the interaction.

This browser demo is therefore useful in the dissertation not only as a functional prototype but also as an explanatory figure. It shows how an input method can remain gesture-efficient while still offering visual scaffolding for novice users, and how the same mapping can be surfaced through both keyboard timing and mouse-button timing. It does so without depending on a fixed hardware marking scheme or a single peripheral type.