2e:null 2f:["$","title",null,{"children":"Urdu Letter Identifier | Rini B. Mehta | Observable"}] 34:T2300,viewof urduIdentifier = { const lookup = new Map(urduLetters.map((letter) => [letter.name, letter])); const root = html`

`; root.value = null; const heading = html`

Urdu Letter Identifier

Examine an isolated Urdu letter and answer one visual question at a time.

`; const controls = html`

`; const pathText = html`Start`; const pathBox = html`

Your path:

`; pathBox.append(pathText); const result = html`

`; const buttonRow = html`

`; const backButton = html` `; const resetButton = html` `; buttonRow.append(backButton, resetButton); root.append(heading, controls, pathBox, buttonRow, result); let menuStates = []; let answers = []; function updatePath() { pathText.textContent = answers.length ? answers.join(" → ") : "Start"; } function clearResult() { result.replaceChildren(); root.value = null; } function emitResult(letter) { root.value = letter; root.dispatchEvent( new CustomEvent("input", { bubbles: true }) ); } function showResult(name) { clearResult(); const letter = lookup.get(name); if (!letter) { const error = html`

Letter data could not be found for ${name}.

`; result.append(error); return; } const card = html`

${letter.isolated}

${letter.name}

Isolated	Initial	Medial	Final
${letter.isolated}	${letter.initial}	${letter.medial}	${letter.final}

`; result.append(card); emitResult(letter); } function removeMenusAfter(index) { while (menuStates.length > index + 1) { const removed = menuStates.pop(); removed.block.remove(); } answers = answers.slice(0, index + 1); } function renderNode(node, depth = menuStates.length) { const block = html`

`; const label = document.createElement("label"); label.textContent = `${depth + 1}. ${node.question}`; label.style.display = "block"; label.style.marginBottom = "8px"; label.style.fontWeight = "bold"; label.style.fontSize = "17px"; label.style.color = "#13294B"; const select = document.createElement("select"); select.style.width = "100%"; select.style.boxSizing = "border-box"; select.style.border = "1px solid #7a8694"; select.style.background = "white"; select.style.color = "#222"; select.style.padding = "10px 12px"; select.style.font = "inherit"; select.style.fontSize = "16px"; const placeholder = document.createElement("option"); placeholder.value = ""; placeholder.textContent = "Choose an answer…"; select.append(placeholder); for (const optionText of Object.keys(node.options)) { const option = document.createElement("option"); option.value = optionText; option.textContent = optionText; select.append(option); } block.append(label, select); controls.append(block); const state = { node, block, select }; menuStates.push(state); select.addEventListener("change", () => { const index = menuStates.indexOf(state); removeMenusAfter(index); clearResult(); if (!select.value) { answers = answers.slice(0, index); updatePath(); return; } answers[index] = select.value; updatePath(); const next = node.options[select.value]; if (!next) { const error = html`

This choice has no matching branch.

`; result.append(error); return; } if (next.result) { showResult(next.result); return; } if (next.question && next.options) { renderNode(next, index + 1); return; } const error = html`

This branch is incomplete.

`; result.append(error); }); } backButton.addEventListener("click", () => { clearResult(); if (!menuStates.length) { return; } if (menuStates.length === 1) { menuStates[0].select.value = ""; answers = []; updatePath(); return; } const lastState = menuStates.pop(); lastState.block.remove(); answers.pop(); const previousState = menuStates[menuStates.length - 1]; previousState.select.value = ""; updatePath(); }); resetButton.addEventListener("click", () => { controls.replaceChildren(); menuStates = []; answers = []; clearResult(); updatePath(); renderNode(recognitionTree); }); renderNode(recognitionTree); return root; }35:T12e8,recognitionTree = ({ question: "What kind of distinguishing mark is visible?", options: { "No dot or added mark": { question: "Which overall skeleton best matches the letter?", options: { "A single tall vertical stroke": { result: "alif" }, "An angular or curved hook like د or ر": { question: "Is the shape angular like د or smoothly curved like ر?", options: { "Angular like د": { result: "dāl" }, "Smoothly curved like ر": { result: "re" } } }, "A ح-like open bowl": { result: "baṛī he" }, "An ع-like curved throat shape": { result: "'ain" }, "A long three-toothed baseline": { result: "sīn" }, "A broad ص-like bowl": { result: "swād" }, "A rounded ط-like bowl with a tall upright": { result: "to'e" }, "A ک-like angled upper arm": { result: "kāf" }, "A tall ل-like upright with a sweeping base": { result: "lām" }, "A rounded م-like bowl with a descending tail": { result: "mīm" }, "A ن-like bowl without a dot": { result: "nūn ghunna" }, "A small و-like loop or hook": { result: "vāo" }, "A rounded ہ-like form": { question: "Which rounded form does it resemble?", options: { "Single rounded form ہ": { result: "choṭī he" }, "Double-eye form ھ": { result: "do chashmi he" } } }, "A long boat-like ے shape": { result: "baṛī ye" } } }, "One dot": { question: "Where is the dot?", options: { "Below the main shape": { question: "Which skeleton does it resemble?", options: { "ب-like bowl": { result: "be" }, "ح-like bowl": { result: "jīm" } } }, "Above the main shape": { question: "Which skeleton does it resemble?", options: { "ح-like bowl": { result: "khe" }, "د-like angular hook": { result: "zāl" }, "ر-like curved hook": { result: "ze" }, "ص-like broad bowl": { result: "zwād" }, "ط-like rounded bowl": { result: "zo'e" }, "ع-like curved throat shape": { result: "ghain" }, "ف-like rounded head": { result: "fe" }, "ن-like bowl": { result: "nūn" } } } } }, "Two dots": { question: "Where are the two dots?", options: { "Above the main shape": { question: "Which skeleton does it resemble?", options: { "ب-like bowl": { result: "te" }, "ق-like rounded head": { result: "qāf" } } }, "Below the main shape": { question: "Does it have the long ی-like shape?", options: { "Yes — ی-like shape": { result: "choṭī ye" } } } } }, "Three dots": { question: "Where are the three dots?", options: { "Below the main shape": { question: "Which skeleton does it resemble?", options: { "ب-like bowl": { result: "pe" }, "ح-like bowl": { result: "che" } } }, "Above the main shape": { question: "Which skeleton does it resemble?", options: { "ب-like bowl": { result: "se" }, "ر-like curved hook": { result: "zhe" }, "س-like three-toothed baseline": { result: "shīn" } } } } }, "A small ط-like mark above": { question: "Which base skeleton carries the mark?", options: { "ب-like bowl": { result: "ṭe" }, "د-like angular hook": { result: "ḍāl" }, "ر-like curved hook": { result: "ṛe" } } }, "A short bar above a ک-like shape": { result: "gāf" }, "A madda above a tall vertical stroke": { result: "alif madda" } } })36:T11f4,urduLetters = [ { "name": "alif", "isolated": "ا", "initial": "ا", "medial": "—", "final": "ـا" }, { "name": "alif madda", "isolated": "آ", "initial": "آ", "medial": "—", "final": "—" }, { "name": "be", "isolated": "ب", "initial": "بـ", "medial": "ـبـ", "final": "ـب" }, { "name": "pe", "isolated": "پ", "initial": "پـ", "medial": "ـپـ", "final": "ـپ" }, { "name": "te", "isolated": "ت", "initial": "تـ", "medial": "ـتـ", "final": "ـت" }, { "name": "ṭe", "isolated": "ٹ", "initial": "ٹـ", "medial": "ـٹـ", "final": "ـٹ" }, { "name": "se", "isolated": "ث", "initial": "ثـ", "medial": "ـثـ", "final": "ـث" }, { "name": "jīm", "isolated": "ج", "initial": "جـ", "medial": "ـجـ", "final": "ـج" }, { "name": "che", "isolated": "چ", "initial": "چـ", "medial": "ـچـ", "final": "ـچ" }, { "name": "baṛī he", "isolated": "ح", "initial": "حـ", "medial": "ـحـ", "final": "ـح" }, { "name": "khe", "isolated": "خ", "initial": "خـ", "medial": "ـخـ", "final": "ـخ" }, { "name": "dāl", "isolated": "د", "initial": "د", "medial": "—", "final": "ـد" }, { "name": "ḍāl", "isolated": "ڈ", "initial": "ڈ", "medial": "—", "final": "ـڈ" }, { "name": "zāl", "isolated": "ذ", "initial": "ذ", "medial": "—", "final": "ـذ" }, { "name": "re", "isolated": "ر", "initial": "ر", "medial": "—", "final": "ـر" }, { "name": "ṛe", "isolated": "ڑ", "initial": "ڑ", "medial": "—", "final": "ـڑ" }, { "name": "ze", "isolated": "ز", "initial": "ز", "medial": "—", "final": "ـز" }, { "name": "zhe", "isolated": "ژ", "initial": "ژ", "medial": "—", "final": "ـژ" }, { "name": "sīn", "isolated": "س", "initial": "سـ", "medial": "ـسـ", "final": "ـس" }, { "name": "shīn", "isolated": "ش", "initial": "شـ", "medial": "ـشـ", "final": "ـش" }, { "name": "swād", "isolated": "ص", "initial": "صـ", "medial": "ـصـ", "final": "ـص" }, { "name": "zwād", "isolated": "ض", "initial": "ضـ", "medial": "ـضـ", "final": "ـض" }, { "name": "to'e", "isolated": "ط", "initial": "طـ", "medial": "ـطـ", "final": "ـط" }, { "name": "zo'e", "isolated": "ظ", "initial": "ظـ", "medial": "ـظـ", "final": "ـظ" }, { "name": "'ain", "isolated": "ع", "initial": "عـ", "medial": "ـعـ", "final": "ـع" }, { "name": "ghain", "isolated": "غ", "initial": "غـ", "medial": "ـغـ", "final": "ـغ" }, { "name": "fe", "isolated": "ف", "initial": "فـ", "medial": "ـفـ", "final": "ـف" }, { "name": "qāf", "isolated": "ق", "initial": "قـ", "medial": "ـقـ", "final": "ـق" }, { "name": "kāf", "isolated": "ک", "initial": "کـ", "medial": "ـکـ", "final": "ـک" }, { "name": "gāf", "isolated": "گ", "initial": "گـ", "medial": "ـگـ", "final": "ـگ" }, { "name": "lām", "isolated": "ل", "initial": "لـ", "medial": "ـلـ", "final": "ـل" }, { "name": "mīm", "isolated": "م", "initial": "مـ", "medial": "ـمـ", "final": "ـم" }, { "name": "nūn", "isolated": "ن", "initial": "نـ", "medial": "ـنـ", "final": "ـن" }, { "name": "nūn ghunna", "isolated": "ں", "initial": "—", "medial": "—", "final": "ـں" }, { "name": "vāo", "isolated": "و", "initial": "و", "medial": "—", "final": "ـو" }, { "name": "choṭī he", "isolated": "ہ", "initial": "ہـ", "medial": "ـہـ", "final": "ـہ" }, { "name": "do chashmi he", "isolated": "ھ", "initial": "ھـ", "medial": "ـھـ", "final": "ـھ" }, { "name": "choṭī ye", "isolated": "ی", "initial": "یـ", "medial": "ـیـ", "final": "ـی" }, { "name": "baṛī ye", "isolated": "ے", "initial": "—", "medial": "—", "final": "ـے" } ]37:[] 32:{"id":"9096271168c4654e","slug":"urdu-letter-identifier","title":"Urdu Letter Identifier","thumbnail":"a69c18c19df3204ac756e805eb393a6fdd24be601fca0600120b914d83106c18","access_level":"public","create_time":"$D2026-07-23T20:57:59.697Z","update_time":"$D2026-07-23T21:07:41.473Z","view_time":null,"first_public_time":"$D2026-07-23T21:08:44.320Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9e093f781fb276b6","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":"starter_2024"},"version":18,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2acec808e73ff66d","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":null}],"members":[{"type":"individual","id":"2acec808e73ff66d","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":null,"role":"editor"},{"type":"team","id":"9e093f781fb276b6","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Urdu Letter Identifier","cells":[{"id":0,"value":"# Urdu Letter Identifier","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"