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.
- CSS hyphens: auto, soft hyphens and the lang attribute, explained
How CSS hyphenation works: hyphens none, manual and auto, the ­ soft hyphen, why hyphens: auto does nothing without a lang attribute, hyphenate-character and hyphenate-limit-chars, and browser support by language.
- 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.
- Soundex in JavaScript: phonetic matching for names and misspellings
How the Soundex code works, rule by rule from the National Archives guide, a tested JavaScript implementation, where it fails, and how Daitch-Mokotoff, Metaphone and edit distance fill the gaps when you match names or suggest spellings.
- 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.
