Chinese Language Learning – I made a free online tool to annotate text (pinyin, IPA, bopomofo, etc), add tone colors and other other useful functions!

# Description

This is a simple proof-of-concept tool where you can paste in some Chinese text and the tool will allow you to annotate it with various types of information, space the characters out based on words to increase readability, color based on tones, show some stats (like what percentage is HSK1, HSK2, …), etc.

## Links:

Current online version: https://kerfufflev2.github.io/mandarin-webutil/

Github repo: https://github.com/kerfufflev2/mandarin-webutil/

It is an open source project with a permissive license. You can take it and build off it if you want.

## Features

You can annotate characters with:

1. Pinyin
2. Zhuyin
3. IPA
4. Pinyin initials only (“xiang” would be “x”)
5. Pinyin finals (“xiang” would be “iang”)
6. Tone numbers
7. HSK numbers
8. Raw (basically pinyin except without the weird exceptions like “u” sometimes meaning “ü”, etc)

It can color the characters/annotations based on the tone and show a colored mark below based on the HSK number for the word. It’s also possible to over words to see the definition, HSK level, etc.

It can convert text to Traditional characters. (Unfortunately support for Traditional input is mediocre, it _may_ work but isn’t really tested well.)

You can click a word to open the MDBG dictionary definition in a new tab. Hovering words will also show you the definitions.

## Motivation

I feel like it’s generally most helpful when trying to remember a character, or what the correct tone is, or the definition, etc if a person gets the least amount of help possible. Most existing tools will just give you the whole answer and there’s really nothing left to figure out yourself.

If I see “睡觉” and I know I recognize the characters but can’t quite get it, then seeing “睡 sh 觉 j” may be enough to jog my memory. If I see “睡 shui 觉 jiao” then I just read the pinyin and it’s probably not going to help me recall the character as much as having to work for it.

It general, it’s just going to be a testbed for stuff that I think would help with learning but that I couldn’t find available or didn’t fit my needs.

## Limitations

The biggest limitation right now is the way it pulls in word definitions has some problems. It doesn’t always choose the most common reading for a character, and matches words can sometimes group them in an unexpected way.

This is also a project under active development with little testing, so it may have other bugs.

Please submit an issue if you find a problem. Note though, I can’t deal with incorrect character readings or definitions individually and I plan to replace the dictionary/word lookup part when I get a chance.

## Future

This tool is obviously very simple right now but is just reaching the point where it could actually be useful. I hope to add features in the future if I get some time. Here are things I’ve been thinking about (in no particular order):

1. Being able to control the type of hint based on a word list or HSK level. For example, you could show more detailed hints for characters that are rare and disable or minimize hints for easy characters.
2. Being able to configure theme, character size, font, etc.
3. A better dictionary/word matching algorithm.
4. More annotation types?
5. I wanted to allow adding both top and bottom annotations (which could be set to different values) but it doesn’t seem like there’s an easy way to do this.
6. Allow controlling coloring characters/hints independently.
7. Auto-paste? i.e. it’ll grab stuff out of your clipboard automatically. There are some video player plugins that can do stuff like auto-copy subtitles.
8. Color annotations based on other types of information rather than only tones.
9. Filter the text in various ways (either as entered, or just results). For example, remove lines without any Chinese characters would be handy when pasting in something with Chinese text interspersed.
10. Show hints for tone changes (third tone characters, 一, 不)
11. Generate some text by itself. For example, I think it shouldn’t be _too_ hard to generate a house with some rooms and objects in the rooms. This would help with learning locations, common objects, spacial relations between objects…

If any of those are of particular interest, or if you have other useful ideas that are relatively easy to implement, please let me know!

## Privacy

All processing occurs locally. The data you write or paste in will never be transmitted anywhere.

There’s no tracking or data collection (unless GitHub pages where it’s published adds something in. I can’t control that.)

## Notes

As mentioned, it’s open source and the license will basically let you do whatever you want with it.

The framework it uses (Dioxus) also allows creating desktop and mobile applications, so it should be relatively easy for someone to make a mobile app based on the project. (As of posting this, only the web version currently builds.)

Also one other thing I’d like to mention: Traditional isn’t supported very well, and that’s only because I’m personally learning Simplified. In no way does this imply any statement about the relative importance of Traditional Chinese vs Simplified, value of countries or cultures, etc.



View Reddit by KerfuffleV2View Source

2 Comments

  1. feibenren September 7, 2022
  2. why-do-we-even-exist September 7, 2022
The English Alphabet (Beginner, Level 1, ESL for Adult Learners)
Chinese Language Learning – Etiquette around approaching chinese-speaking strangers
TPR for Kids | English Game for Kids | Action Game for Kids | ESL/EFL for Kids | Fun English
Warm up activities & games for young learners! ESL
Learn To Talk – Toddler Learning Video – Learn Colors with Crayon Surprises – Speech Delay – Baby
250 रोज़ काम आने वाले English Sentences For Daily Use | English Speaking Practice Through Imitation
Learn Formal Business English 🔥 English With Geet #ashortaday #shorts #speakenglish #learnenglish
[NEW] Dialogue collection | Learn English | Collection of Easy conversation
"Delicious" in Chinese 😋 #shorts #chinese #learnchinesein1minute #learnchinese #mandarin #中文 #汉语
Chinese Language Learning – Etiquette around approaching chinese-speaking strangers
芬兰人:谢邀,离我远点…… #涨知识 #科普 #地理 #Shorts
Chinese Language Learning – Books, webnovels, tools and methods I’ve used from intermediate to advanced
Learn Spanish or Vanish Episodio Uno/One
Build a Memory Palace to Learn Spanish | Learning Strategies
Two Pennies Learning Spanish ! #offgrid #spain
Spanish Adverbs And Phrases 1. Learn Spanish With Pablo