Introduction

Jyutping (粵拼) is the Cantonese pinyin. The project is inspired by Visual Cantonese Fonts.

Chinese Input:
<textarea id="chineseInput" rows="5" cols="30">秋曉乍來禾已熟，聖泉永溢液偏甘。</textarea>

Rendered output

Customize Display

Ruby Font Size:

<label for="rtFontSize">RT (Jyutping) Font Size:</label>
<input type="range" id="rtFontSize" min="8" max="32" value="20" oninput="updateStyles()"><br>

<label for="rubyMargin">Ruby Margin:</label>
<input type="range" id="rubyMargin" min="0" max="20" value="8" oninput="updateStyles()">

Background color:

<label for="rubyColor">Text color:</label>
<input type="color" id="rubyColor" value="#000000" oninput="updateColors()"><br>
<label for="rtColor">Jyutping color:</label>
<input type="color" id="rtColor" value="#404040" oninput="updateColors()">

<script src="https://unpkg.com/to-jyutping@3.1.1/dist/index.js" defer></script> <script src="./assets/js/script.js"></script>