Olle Linge's post on his wonderful website www.hackingchinese.com inspired me to create this web site. After reading his post, I felt the idea had a lot of merit for me, because remembering the tones of Chinese words is probably my main weakness with Chinese (beside vocabulary).
Olle's page listed some solutions, but I found all of them either defunct, hard to use, or produced fairly ugly results. I thought maybe I could improve on the existing solutions.
Knowing SVG from a previous project, and after some research into HTML5, it seemed like the best way to deal with placing tonemarks on top of Chinese characters was put each character in a separate table, with the first row containing the tonemark SVG graphic, and the second row containing the actual character. That method, combined with understanding how to make the tables flow across the page essentially gives the ability you see. There are other details, such as how to get punctuation, and non-chinese characters lined up vertically, which is handled with some jQuery scripting. This about covers the graphical aspect.
There's also the system for looking up the tones to assign to each Chinese character. I implemented that using the publicly available Chinese-English dictionary database from mdbg.net. I processed the entries in that dictionary to extract the tones for each word, and handle the case of different tones depending on meaning. The algorithm finds the longest possible match from the dictionary at each point, and uses that match to assign the tones. This leads (I hope) to a more accurate assignment than a character-by-character approach.
All of this code is hosted on Amazon's AWS system, using a pretty simple combination of CloudFront hosting pages on S3, Lambda for the backend code written in Python, and Route 53 for DNS.
This web site are hosted via https, and when your text is submitted and processed, https is used, meaning that your content is encrypted when going over the net. Apart from that:
If you have any feedback or would like to report a bug with this site, please feel free to email me, Corey Ashford, at firstname.lastname@example.org