Tutorial on how to use this Cantonese romanization HTML markup tool

This tutorial will teach you how to use this Cantonese romanization HTML markup tool to mark up Chinese characters with Jyutping or Yale Cantonese

Step 1: Enter romanization

Enter corresponding romanization in the first input box.

Step 2: Enter Chinese characters

Enter Chinese characters in the second input box.

Step 3: Complete markup

Click “Generate HTML” to complete the mark up process.

After that, you can get the HTML source code from the input box in the right.

Step 4: Design your marked-up characters

After you have copied those HTML code, you can then write your own CSS code to design it.

What is this Cantonese romanization markup tool for?

This Cantonese romanization HTML markup tool can help you mark up Chinese characters in Jyutping or Yale, in order to promote either form of Cantonese romanization.

What is the difference between this markup tools and others?

Since some Chinese characters are multibyte, markup tools for Japanese or other language would not work for Cantonese.

Besides, unlike other markup tools, this markup tools use <span> instead of <rb> and <rt> for markup, in order to fix the layout issue and overcome the design constraint for <ruby> with CSS.

Lastly, this markup tool marks up words by words, instead of marking up the whole sentence, so that you can prevent layout issue when the some romanization are particularly long or short.