Colour code characters according to tone on iPhone/Android

Question

I use wechat to talk with Chinese friends, and try to type Chinese to help me learn. I would like Chinese characters to appear colour coded according to tone.

How could I go about this? Assuming it's not possible with any current product, how could one build an app or similar to achieve this? My phone is an iPhone 7 but also interested in Android.

Answer 1

This is not possible with existing products. You'd need a special input method, like the Multiling Keyboard, that would specifically format the input. There are a few difficulties with this:

• Many hanzi have multiple tones. Which one to pick? To be (possibly, but never 100%) accurate, you'd need a dictionary. Which means the input method would have to backtrack when the tone of the first character changes tone.
• WeChat doesn't allow colour formatting. So your new input method won't be able to colour the text anyway.

In WeChat's web interface, one might be able to develop a Chrome extension that reads all messages, and colours them. That wouldn't be that hard, but I expect it would be time consuming, and resource hungry.

EDIT

After giving it some thought, here is what I think would required:

• The CEDICT dictionary. Probably edited to fit a database.
• Alternatively, if you only care about character tones, a database based on Unihan.
• Some Javascript and jQuery to lookup the messages and color them.

Something like this [I am using Cantonese tones as I am much more comfortable with them]:

VERY COARSE CODE

var db={};
db["行"]=4;
db["有"]=5;
db["人"]=4;
db["嗎"]=3;

var myColors= new Array("nil", "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF");

for (n in x) {
  myString="";
  if(x.hasOwnProperty(n)) {
    if(x[n].innerText!=undefined) {
      s=x[n].innerText;
      console.log(n, s);
      j=s.length;
      for(i=0; i<j; i++) {
        z=s.charAt(i);
        t=myColors[db[z]];
        console.log(" .",z, t);
        if(t!=undefined) {
          myString+="<span style='color: "+t+"'>"+z+"</span>";
        } else {
          myString+=z;
        }
      }
      x[n].innerHTML=myString;
    }
  }
}