Efficient way to colour code text?

Question

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.

Answer 1

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.

Answer 2

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:

   (\p{Han}+)

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.)