{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreifra5ia6swwbce7b2qbmmswcnmxerriiiqyipr7fu65nj3rw4duhq",
    "uri": "at://did:plc:jo3wjj2gx46alocis4wubmwr/app.bsky.feed.post/3mj4tk75tll22"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreidjvwtvz37fpivjczelv2hq5lcwzecbtg2sckce7igxytrjifqida"
    },
    "mimeType": "image/jpeg",
    "size": 1297180
  },
  "path": "/2026/04/10/the-gballi-browser-designing-for-the-dagbanli-alphabet/",
  "publishedAt": "2026-04-10T07:00:00.000Z",
  "site": "https://diff.wikimedia.org",
  "tags": [
    "A Gballi panel crafted from dried elephant grass, traditionally\nused in Dagbaŋ architecture.",
    "previous post",
    "https://dagbanli.info/?action=browse",
    "Screenshot of the Gballi browser with the full alphabet grid,\nshowing all 36 letter buttons including digraphs.",
    "Screenshot of the Gballi browser after selecting “B”, showing the\n3‑column word listing with “1031 words” count.",
    "Powerful filters for exploring Dagbanli Lexemes starting with kp,\nincluding options for morphology, pronunciation audio, images,\nusage examples, and visual‑contexts.",
    "repository"
  ],
  "textContent": "\nA Gballi panel crafted from dried elephant grass, traditionally\nused in Dagbaŋ architecture.\n\n_The Dagbanli alphabet has 35 letters. Digraphs like ‘gb’ and ‘ŋm’ are single letters, but standard software doesn’t know that. So we built one that does: the_ **_Gballi browser_** _._\n\n## Introduction\n\nIn Dagbanli, the word _gballi_ /gbal:i/ describes something familiar to anyone who has spent time in the hinterlands of Northern Ghana. A gballi is a roofing material or a fence, woven tightly from dry elephant grass or guinea corn stalks. It may be used to encircle a compound, a barn on a farm, or even a private washroom. It is a simple but essential structure. It does not dominate the landscape, but it defines it. It creates a boundary that says: _what is inside here belongs together, and it is protected._\n\nJust as a gballi encloses a physical space and gathers everything within it into a single, protected area, our Gballi Browser is designed to enclose the entire Dagbanli language. Every word, every letter, every digraph is gathered inside this digital fence. When you open the browser, you are standing inside that enclosure, surrounded by the full richness of the Dagbanli language.\n\nIn our \nprevious post, we explored how we built the audio pipeline to bring pronunciation to life. Now we turn to the visual side of discovery: the Gballi Browser itself.\n\nThe letters of the alphabet are not just scattered arbitrarily like stones in a field. In a gballi, each stalk is woven together with the next to create a coherent whole. In our browser, each letter button, Gb, Kp, Ŋm, Ɛ, Ɔ, is a stalk in that fence. They are placed in their proper order, the order that Dagbanli speakers recognize, not the order that Unicode imposes. The fence is built according to Dagbanli rules.\n\nFor generations, the gballi has been a symbol of home, of belonging, of things gathered and kept safe. For us, it is also a symbol of what a digital dictionary can be: not just a tool, but a place. A place where the Dagbanli language is contained, protected, and celebrated. A place where every word has its proper spot in the fence.\n\nWelcome inside the Gballi Browser: https://dagbanli.info/?action=browse\n\n\nScreenshot of the Gballi browser with the full alphabet grid,\nshowing all 36 letter buttons including digraphs.\n\n## 1. The Dagbanli Alphabet\n\nDagbanli uses 35 graphemes in its writing system. A grapheme is the smallest unit of writing that represents a meaningful sound distinction in a language. This term is more precise than “characters,” which can refer to any symbol in modern digital text, including punctuation or Unicode code points. The 35 Dagbanli graphemes are grouped into 7 vowels (a, e, ɛ, i, o, ɔ, u), 21 single‑letter consonants, 6 digraph consonants (Ch, Gb, Kp, Ny, Ŋm, Sh), and a glottal stop symbol (‘).\n\nHere is the complete alphabet in its correct order with examples:\n\n**#** | **Letter** | **Example word**\n---|---|---\n1 | A | akarima\n2 | B | baamaaya\n3 | Ch | chakpandi\n4 | D | daafumaata\n5 | E | * eka\n6 | Ɛ | * ɛmbasi\n7 | F | fibigi\n8 | G | gambee\n9 | Gb | gbungbuŋ\n10 | Ɣ | ^ ba’lɔɣu\n11 | H | haŋko\n12 | I | * iimaani\n13 | J | jahinjesabinli\n14 | K | kahili\n15 | Kp | kpaakpaanyom\n16 | L | laali\n17 | M | makaawe\n18 | N | naalɔŋ\n19 | Ny | nyaandolitaba\n20 | Ŋ | ŋiliginli\n21 | Ŋm | ŋmanchee\n22 | O | ooho\n23 | Ɔ | * ɔfisa\n24 | P | paɣafaa\n25 | R | * rɔkɛti\n26 | S | saabunleeŋa\n27 | Sh | shinshenyee\n28 | T | takparikpaɣsi\n29 | U | ^ guliŋguɣu\n30 | V | vibi\n31 | W | wuruŋpiŋ\n32 | Y | yaandi\n33 | Z | zaadali\n34 | Ʒ | ʒiɛgbaŋ\n35 | ʼ | ^ zab’piɛla\n\n  * * Dagbanli has no native sound or word that starts with this letter. Any word that begins with it is borrowed.\n  * ^ This grapheme cannot begin a word.\n\n\n\n## 2. The Browser UI\n\nWhen you open the Gballi browser, you see the full alphabet grid. Each letter is a clickable button. The digraphs are right there alongside the single characters: Gb next to G, Kp next to K, Ŋm next to Ŋ. The fence is whole.\n\nTapping a letter takes you inside that section of the enclosure. You see all the words that begin with that letter, displayed in a responsive 3‑column grid. Next to each letter in the alphabet grid, we show the count of words it contains. For example, “B > 1031 words”. This gives you a sense of which parts of the fence are most densely packed.\n\nEach word in the listing shows its lemma (the headword) and an abbreviated part of speech (e.g., “n.” for noun, “v.” for verb). This helps you quickly identify whether the word you are looking for is the one you want. Tapping any word opens its full detail card, with Senses, Forms, audio, and images.\n\nThe layout is designed to work on any device. On a phone, the three columns adjust to two or one as needed. On a tablet or desktop, you get the full three‑column view, letting you scan many words at once.\n\n\nScreenshot of the Gballi browser after selecting “B”, showing the\n3‑column word listing with “1031 words” count.\n\nThe experience is meant to feel like walking through a village of gbala. Each letter is its own compound, and inside each compound, the words are gathered like family members. You move from one compound to another, exploring the language at your own pace.\n\n## 3. Filters That Understand the Data\n\nThe Gballi browser is not just a static index. It is a discovery tool, and its power comes from filters that let you ask specific questions about the words inside the fence.\n\nAll of these filters are possible because of the rich data we harvest from Wikidata and the pre‑computed indexes we build during the sync process.\n\n**Filter** | **What It Does** | **Why It Matters**\n---|---|---\nPart of Speech | Shows only nouns, verbs, adjectives, etc. | Helps you focus on specific word classes\nHas Forms | Shows words that have grammatical variants | Useful for studying morphology\nHas Wikidata Form Pronunciation Audio | Shows forms with pronunciation audio (P443) | Lets you find words you can hear spoken\nHas Sense Image | Shows words with at least one image (P18) on a Sense | Helps you discover words with visual context from the Wikidata Lexeme\nHas Wikidata Usage Examples | Shows words with usage example sentences (P5831) | Lets you see how words are used in context\nHas Mozilla Usage Example Audio | Shows words matched to Mozilla Common Voice sentences | Lets you hear how native speakers use the word in everyday speech\nVisual Context | Shows words matched to the University of Ghana Human-Computer Interaction dataset | Lets you hear how a native speaker would describe an image containing the word\n\nThe filters combine with letter selection. You can, for example:\n\n  * Select the letter Kp, then filter for Nouns that have pronunciation audio. This gives you a list of all noun entries beginning with Kp that you can listen to.\n  * Select the letter Gb, then filter for Verbs that have Sense images. This shows you all verbs starting with Gb that include an image in the word’s Sense.\n\n\n\nThese combinations turn the Gballi browser into a powerful research tool. A linguist could use it to study the phonological patterns of words with audio. A learner could use it to find visually illustrated words for vocabulary building. A native speaker could use it to explore the full depth of their language.\n\n\nPowerful filters for exploring Dagbanli Lexemes starting with kp,\nincluding options for morphology, pronunciation audio, images,\nusage examples, and visual‑contexts.\n\nBecause the entire dataset is stored locally in IndexedDB, these filters work instantly, even when you are offline. The fence holds everything, and you can open whatever gate you choose.\n\n## 4. How It Works: A Quick Technical Glance\n\nThe foundation of the Gballi browser is the custom alphabet order we defined for Dagbanli. As we explained in the \nprevious post, we created a constant array that lists Dagbanli’s letters in their correct sequence. This array is the blueprint for our fence.\n\n**The Letter Detection Algorithm**\n\nWhen a user types a word, or when we need to know which letter group it belongs to, we cannot simply take the first character. We must look ahead to see if the word begins with a digraph.\n\nThe algorithm is straightforward: for each possible digraph in the alphabet (ordered from longest to shortest), we check if the word starts with it. If a match is found, that is the first letter. If not, we fall back to the single character.\n\n\n    javascript\n\n    // Simplified version of the detection logic\n\n    function getFirstLetter(word) {\n\n      // Check digraphs first (longest match)\n\n      if (word.startsWith('ŋm')) return 'ŊM';\n\n      if (word.startsWith('gb')) return 'GB';\n\n      if (word.startsWith('kp')) return 'KP';\n\n      if (word.startsWith('ny')) return 'NY';\n\n      if (word.startsWith('ch')) return 'CH';\n\n      if (word.startsWith('sh')) return 'SH';\n\n      // Then check single characters\n\n      const firstChar = word.charAt(0).toUpperCase();\n\n      if (DAGBANLI_ALPHABET.includes(firstChar)) {\n\n        return firstChar;\n\n      }\n\n      // Fallback for punctuation or unexpected characters\n\n      return null;\n\n    }\n\nThis is why:\n\n  * “`gballi`” –> first letter is “`Gb`“, not “`G`“\n  * “`ŋmani`” –> first letter is “`Ŋm`“, not “`Ŋ`“\n  * “`kpɛŋ`” –> first letter is “`Kp`“, not “`K`“\n\n\n\nThe algorithm is simple but essential. Without it, words would scatter across the wrong letter groups, and the gballi would have holes where words leak through. With it, every word finds its proper place inside the fence.\n\n## Sorting Words Inside the Fence\n\nOnce we know the first letter, we need to sort all words within a letter group. The sorting function uses the same alphabet array as a custom comparator, guaranteeing that words appear in the order Dagbanli speakers expect.\n\n\n    javascript\n\n    function sortByDagbanliAlphabet(words) {\n\n      return words.sort((a, b) => {\n\n        const letterA = getFirstLetter(a.lemma);\n\n        const letterB = getFirstLetter(b.lemma);\n\n        const indexA = DAGBANLI_ALPHABET.indexOf(letterA);\n\n        const indexB = DAGBANLI_ALPHABET.indexOf(letterB);\n\n        if (indexA !== indexB) {\n\n          return indexA - indexB;\n\n        }\n\n        // If same first letter, sort normally\n\n        return a.lemma.localeCompare(b.lemma);\n\n      });\n\n    }\n\n## Lazy Loading and File Structure\n\nThe Gballi browser is built as a lazy‑loaded component within our React application. It only loads when the user navigates to the browse page, keeping the initial bundle size small.\n\nThe core logic lives in a few key files, all open source and available in our repository:\n\n  * `src/lib/constants.ts` — Defines the alphabet array and related constants.\n  * `src/lib/gballi.ts` — Contains utility functions for letter detection, sorting, and grouping.\n  * `src/pages/Browse.tsx` –The main browse page component.\n  * `src/components/GballiGrid.tsx` — Renders the alphabet grid.\n  * `src/components/WordList.tsx` — Renders the word listing with filtering.\n\n\n\nThis ensures that the _gballi_ stands strong, with every stalk in its proper place.\n\n##  **Con** c**lusion**\n\nThe Gballi browser is named after something deeply familiar to every Dagbanli speaker: the woven fence that defines a home, that gathers a family, that protects what is inside. In the same way, our digital gballi gathers the entire Dagbanli language into a single, coherent space.\n\nIt treats digraphs as first‑class letters because they are. It sorts words according to Dagbanli rules, not Unicode’s. It gives users the power to filter and explore, to find exactly the words they need, whether they are online or offline.\n\nThis is more than an alphabet browser. It is a declaration that the Dagbanli writing system deserves to be represented on its own terms. It is a fence built by Dagbanli hands, for Dagbanli speakers.\n\nIn the next post, we will explore how we connected Mozilla Common Voice audio to bring usage example sentences to life, adding yet another layer to the richness inside the gballi.",
  "title": "The Gballi Browser: Designing for the Dagbanli Alphabet"
}