https://romanempire.dev/tags/jyutping/ Recent content in Jyutping 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>