Under the hood

How spell checkers and word toys work, with JavaScript you can read and reuse.

• Building draggable word tiles with Pointer Events

  How to make draggable tiles that work with mouse, touch and pen using Pointer Events and setPointerCapture, with touch-action, keyboard support, reading tiles back into text and sharing state in the URL hash.

• How spell checkers work: dictionaries, edit distance and suggestions

  A clear tour of spell-checker design: word lists and affix files, detecting errors, generating and ranking suggestions with edit distance, phonetic keys, symmetric delete and context-aware correction.

• Levenshtein and Damerau distance in JavaScript, step by step

  How edit distance works, a readable dynamic-programming implementation in JavaScript, the Damerau transposition variant, a memory-light version with early exit, and how to use it to suggest spelling corrections.

• Spell checker documentation: word list, rules and suggestion ranking

  How the Letterbench spell checker works: where its 72,000-word list comes from, how words are tokenized and matched, how suggestions are generated and ranked, and how to build one for your own page.

• Talking to PHP from JavaScript: fetch, jQuery and JSON done properly

  How a web page and a PHP script exchange data: sending JSON with fetch or jQuery.ajax, reading it in PHP with php://input, answering with json_encode, and handling errors and security.

• The HTML spellcheck attribute and browser spell checking, explained

  How the spellcheck attribute works on textarea, input and contenteditable, how lang chooses the dictionary, related attributes (autocorrect, autocapitalize), privacy concerns with cloud spell check, and when to turn it off.