For the purposes of learning Chinese, I want to write every character in a short novel in a colour that corresponds to its tone (pronunciation thing). The book is an epub, and I've been doing the html inside it like this:

<span style="color:#64B4FF"> 今 </span>

This works to display the colours correctly, but the file is now so big and unwieldy that highlighting and dictionary lookup has become unacceptably slow. Is there a more efficient way to do this, or a better file format to use? I don't want to convert to pdf because then I would lose the ability to do dictionary lookups.

Possibly relevant info: the characters are in utf-8 right now, there are only five possible colours, and I'm using moon+ reader on Android with the goldendict dictionary.


If you want to stick with EPUB, you can save space by giving each tone a class with a short name and defining the class's color in the CSS. So the example you gave would look something like this:

<span class="a"> 今 </span>

The CSS file, named something like stylesheet.css, would define the class like this:

span.a {
    color: #64B4FF

You'd need to add a link to the stylesheet in the head element of each HTML file like this:

<link href="stylesheet.css" type="text/css" rel="stylesheet"/>

The path in href is relative, and this example assumes stylesheet.css is in the same directory as the HTML file.

I don't know if this approach will save enough space to speed up highlighting and dictionary lookups, but it's something to try.


You could easily highlight all Chinese characters with Sigil.

  1. Create a new ePub.

  2. Add the HTML page.

  3. Activate Regex mode.

  4. Search for:


  5. Replace with:

    <‌span style="color:#64B4FF">\1<‌/span>

You might be able to modify the regex to select specific Chinese characters. If you can't automatically select characters that get a tone in Chinese via regular expressions, you could define 5 custom clips in Sigil.

  1. Select Tools > Clip Editor > Add Entry.
  2. Enter Tone 1 into the Name box and <‌span style="color:red">\1<‌/span> in the Text box.
  3. Repeat this step for the remaining 4 tones with different names and colors.
  4. Click Save and Close, when you're done.

Once you've set up the clips, you can highlight a Chinese letter and press CTRL+ALT+1 for the first tone, CTRL+ALT+2 for the second tone etc. (You could also select them via a toolbar, if you select View > Toolbars > Clip Bar.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.