https://romanempire.dev/categories/cantonese/ Recent content in Cantonese on Roman Empire Hugo -- gohugo.io en contact@romanempire.dev (Roman) contact@romanempire.dev (Roman) 🦆 Thu, 16 Apr 2026 00:00:00 +0000 https://romanempire.dev/posts/cantonese/jyutping/ Thu, 16 Apr 2026 00:00:00 +0000 contact@romanempire.dev (Roman) https://romanempire.dev/posts/cantonese/jyutping/ <div class="lead text-neutral-500 dark:text-neutral-400 !mb-9 text-xl"> Jyutping is the romanization system for Cantonese. It uses initials, finals, and 6 tones. </div> <h2 class="relative group">Syllable Structure <div id="syllable-structure" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#syllable-structure" aria-label="Anchor">#</a> </span> </h2> <p>Every Jyutping syllable follows this pattern:</p> <div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">[initial] + [final] + [tone number]</span></span></code></pre></div></div> <ul> <li><strong>initial</strong> - the opening consonant: <code>g</code>, <code>s</code>, <code>ng</code>, etc.</li> <li><strong>final</strong> - the vowel nucleus plus any closing consonant: <code>aa</code>, <code>aam</code>, <code>ik</code>, etc.</li> <li><strong>tone number</strong> - a digit 1-6 appended at the end</li> </ul> <p>For example: <code>g</code> + <code>aau</code> + <code>3</code> = <style> .jp-phrase { display: inline-flex; align-items: baseline; gap: 0.4rem; } .jp-play { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; border-radius: 50%; border: 1.5px solid rgb(var(--color-neutral-300)); background: rgb(var(--color-neutral-50)); cursor: pointer; transition: all 0.2s; flex-shrink: 0; padding: 0; } html.dark .jp-play { border-color: rgb(var(--color-neutral-600)); background: rgb(var(--color-neutral-800)); } .jp-play:hover { border-color: rgb(var(--color-neutral-400)); } html.dark .jp-play:hover { border-color: rgb(var(--color-neutral-500)); } .jp-play svg { width: 0.6em; height: 0.6em; fill: rgb(var(--color-neutral-500)); margin-left: 1px; } html.dark .jp-play svg { fill: rgb(var(--color-neutral-400)); } .jp-play.jp-locked { opacity: 0.4; pointer-events: none; } .jp-word-wrap { position: relative; display: inline-block; } .jp-has-curve { padding-top: 5px; } .jp-curve { display: block; overflow: visible; position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%); pointer-events: none; } .jp-curve path { fill: none; stroke-width: 2; stroke-linecap: round; } .jp-curve .cc-dot { opacity: 0; } .jp-curve.cc-animating .cc-dot { opacity: 1; } .jp-word { cursor: pointer; font-weight: 600; border-bottom: 2px solid transparent; border-radius: 2px; padding: 0 2px; transition: border-color 0.2s, opacity 0.2s; } .jp-word:hover { opacity: 0.8; } .jp-word.jp-playing { border-bottom-color: currentColor; } </style> <span class="jp-phrase" id="jp-2287e78a5e9195d56fdc0a5039ad403f" data-text="gaau3" data-graph="true"></span> <script> document.addEventListener('DOMContentLoaded', () => { const { TONES, DUR_MS, toneColor, playSound, buildCurve, animateCurve } = CantoneseCommon; function playTone(tone, wordEl, curve) { playSound(tone); wordEl.classList.add('jp-playing'); setTimeout(() => wordEl.classList.remove('jp-playing'), DUR_MS); if (curve) animateCurve(curve); } function parseTone(word) { const m = word.match(/(\d)/); const num = m ? parseInt(m[1]) : 0; return (num >= 1 && num <= 6) ? TONES[num - 1] : null; } const container = document.getElementById('jp-2287e78a5e9195d56fdc0a5039ad403f'); const showGraph = container.getAttribute('data-graph') === 'true'; const words = container.getAttribute('data-text').split(/\s+/); const entries = []; const playBtn = document.createElement('button'); playBtn.className = 'jp-play'; playBtn.innerHTML = '<svg viewBox="0 0 24 24"><polygon points="6,4 20,12 6,20"/></svg>'; container.appendChild(playBtn); words.forEach((word, i) => { if (i > 0) container.appendChild(document.createTextNode(' ')); const tone = parseTone(word); const wrap = document.createElement('span'); wrap.className = 'jp-word-wrap'; let curve = null; if (showGraph && tone) { curve = buildCurve(tone); curve.classList.add('jp-curve'); wrap.classList.add('jp-has-curve'); wrap.appendChild(curve); } const span = document.createElement('span'); span.className = 'jp-word'; span.textContent = word; if (tone) { span.style.color = toneColor(tone); span.addEventListener('click', () => playTone(tone, span, curve)); } wrap.appendChild(span); container.appendChild(wrap); entries.push({ el: span, tone, curve }); }); let playing = false; playBtn.addEventListener('click', () => { if (playing) return; playing = true; playBtn.classList.add('jp-locked'); let i = 0; (function next() { while (i < entries.length && !entries[i].tone) i++; if (i >= entries.length) { playing = false; playBtn.classList.remove('jp-locked'); return; } const { el, tone, curve } = entries[i++]; playTone(tone, el, curve); setTimeout(next, DUR_MS + 100); })(); }); new MutationObserver(() => { entries.forEach(({ el, tone, curve }) => { if (!tone) return; const c = toneColor(tone); el.style.color = c; if (curve) { curve.querySelector('path').setAttribute('stroke', c); curve.querySelector('.cc-dot').setAttribute('fill', c); } }); }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); }); </script> </p> https://romanempire.dev/posts/cantonese/tones/ Wed, 08 Apr 2026 00:00:00 +0000 contact@romanempire.dev (Roman) https://romanempire.dev/posts/cantonese/tones/ <p>I want to learn cantonese, but what keeps making me confused are the tones. So thought it would be nice to have something interactive that allows to hear the tone and test how well I can tell those apart</p> <h2 class="relative group">The Six Tones <div id="the-six-tones" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#the-six-tones" aria-label="Anchor">#</a> </span> </h2> <p>Cantonese has six tones. Click any tone line or card to hear its pitch contour.</p>