Jump to content
Chinese-forums.com
Learn Chinese in China

Anki: Add Tone Colours to Pinyin Automatically


markhavemann
 Share

Recommended Posts

I couldn't find any solutions that I liked on the internet, so I made my own to do this.

 

From:

image.thumb.png.a24f5275ddf78892f5be8748fd41dbce.png

To:

image.thumb.png.8a177a9abdd4ea50527663ab0cc1b2fc.png
 

 

What it can add colours to:

  • pòfǔchénzhōu (no spaces between syllables)
  • pò fǔ chén zhōu (spaces between syllables)
  • pòfǔ chénzhōu (a combination of the two)
  • pòfǔchén<b>zhōu</b> (also works with html tags, but not thoroughly tested)

 

What it doesn't work for:

  • My chengyu is: pòfǔ chénzhōu  (other text mixed in with pinyin - you will get weird results. I might fix this later and make it more flexible)

 

I also made as youtube video showing the process of doing this: https://www.youtube.com/watch?v=TGpXhZ4wjjU

 

The Code:

 

Pinyin Field:

Spoiler

<span id="pinyin">{{ChangeThisToYourPinyinFieldName}}</span>

 

Main Code:

Spoiler

<script>

syllables = [

"a",

"ai",

"an",

"ang",

"ao",

"ba",

"bai",

"ban",

"bang",

"bao",

"bei",

"ben",

"beng",

"bi",

"bian",

"biao",

"bie",

"bin",

"bing",

"bo",

"bu",

"ca",

"cai",

"can",

"cang",

"cao",

"ce",

"cei",

"cen",

"ceng",

"cha",

"chai",

"chan",

"chang",

"chao",

"che",

"chen",

"cheng",

"chi",

"chong",

"chou",

"chu",

"chua",

"chuai",

"chuan",

"chuang",

"chui",

"chun",

"chuo",

"ci",

"cong",

"cou",

"cu",

"cuan",

"cui",

"cun",

"cuo",

"da",

"dai",

"dan",

"dang",

"dao",

"de",

"dei",

"den",

"deng",

"di",

"dian",

"diao",

"die",

"ding",

"diu",

"dong",

"dou",

"du",

"duan",

"dui",

"dun",

"duo",

"e",

"ei",

"en",

"er",

"fa",

"fan",

"fang",

"fei",

"fen",

"feng",

"fo",

"fou",

"fu",

"ga",

"gai",

"gan",

"gang",

"gao",

"ge",

"gei",

"gen",

"geng",

"gong",

"gou",

"gu",

"gua",

"guai",

"guan",

"guang",

"gui",

"gun",

"guo",

"ha",

"hai",

"han",

"hang",

"hao",

"he",

"hei",

"hen",

"heng",

"hm",

"hng",

"hong",

"hou",

"hu",

"hua",

"huai",

"huan",

"huang",

"hui",

"hun",

"huo",

"ji",

"jia",

"jian",

"jiang",

"jiao",

"jie",

"jin",

"jing",

"jiong",

"jiu",

"ju",

"juan",

"jue",

"jun",

"ka",

"kai",

"kan",

"kang",

"kao",

"ke",

"kei",

"ken",

"keng",

"kong",

"kou",

"ku",

"kua",

"kuai",

"kuan",

"kuang",

"kui",

"kun",

"kuo",

"lü",

"la",

"lai",

"lan",

"lang",

"lao",

"le",

"lüe",

"lei",

"leng",

"li",

"lia",

"lian",

"liang",

"liao",

"lie",

"lin",

"ling",

"liu",

"long",

"lou",

"lu",

"luan",

"lun",

"luo",

"m",

"ma",

"mai",

"man",

"mang",

"mao",

"me",

"mei",

"men",

"meng",

"mi",

"mian",

"miao",

"mie",

"min",

"ming",

"miu",

"mo",

"mou",

"mu",

"n",

"nü",

"na",

"nai",

"nan",

"nang",

"nao",

"ne",

"nüe",

"nei",

"nen",

"neng",

"ng",

"ni",

"nian",

"niang",

"niao",

"nie",

"nin",

"ning",

"niu",

"nong",

"nou",

"nu",

"nuan",

"nuo",

"o",

"ou",

"pa",

"pai",

"pan",

"pang",

"pao",

"pei",

"pen",

"peng",

"pi",

"pian",

"piao",

"pie",

"pin",

"ping",

"po",

"pou",

"pu",

"qi",

"qia",

"qian",

"qiang",

"qiao",

"qie",

"qin",

"qing",

"qiong",

"qiu",

"qu",

"quan",

"que",

"qun",

"ran",

"rang",

"rao",

"re",

"ren",

"reng",

"ri",

"rong",

"rou",

"ru",

"rua",

"ruan",

"rui",

"run",

"ruo",

"sa",

"sai",

"san",

"sang",

"sao",

"se",

"sei",

"sen",

"seng",

"sha",

"shai",

"shan",

"shang",

"shao",

"she",

"shei",

"shen",

"sheng",

"shi",

"shou",

"shu",

"shua",

"shuai",

"shuan",

"shuang",

"shui",

"shun",

"shuo",

"si",

"song",

"sou",

"su",

"suan",

"sui",

"sun",

"suo",

"ta",

"tai",

"tan",

"tang",

"tao",

"te",

"teng",

"ti",

"tian",

"tiao",

"tie",

"ting",

"tong",

"tou",

"tu",

"tuan",

"tui",

"tun",

"tuo",

"wa",

"wai",

"wan",

"wang",

"wei",

"wen",

"weng",

"wo",

"wu",

"xi",

"xia",

"xian",

"xiang",

"xiao",

"xie",

"xin",

"xing",

"xiong",

"xiu",

"xu",

"xuan",

"xue",

"xun",

"ya",

"yan",

"yang",

"yao",

"ye",

"yi",

"yin",

"ying",

"yong",

"you",

"yu",

"yuan",

"yue",

"yun",

"za",

"zai",

"zan",

"zang",

"zao",

"ze",

"zei",

"zen",

"zeng",

"zha",

"zhai",

"zhan",

"zhang",

"zhao",

"zhe",

"zhei",

"zhen",

"zheng",

"zhi",

"zhong",

"zhou",

"zhu",

"zhua",

"zhuai",

"zhuan",

"zhuang",

"zhui",

"zhun",

"zhuo",

"zi",

"zong",

"zou",

"zuan",

"zui",

"zun",

"zuo",

"zu"

]

 

var pinyinContent = document.getElementById("pinyin").innerText;

pinyinContent = pinyinContent.toString();

pinyinContent = pinyinContent.replace(/\u00a0/g, " "); //replace nbsp with space char - necessary in Anki

pinyinContent = pinyinContent.split(' ');

pinyinContent = pinyinSplit(pinyinContent);

console.log(pinyinContent)

 

output = '';

 

for (i = 0; i < pinyinContent.length; i++) {

if(pinyinContent.match(/.*[āēīōūǖĀĒĪŌŪǕ].*/g))

output = output + '<span class="t1">' + pinyinContent + '</span> ';

else if(pinyinContent.match(/.*[áéíóúǘÁÉÍÓÚǗ].*/g))

output = output + '<span class="t2">' + pinyinContent + '</span> ';

else if(pinyinContent.match(/.*[ǎěǐǒǔǚǍĚǏǑǓǙ].*/g))

output = output + '<span class="t3">' + pinyinContent + '</span> ';

else if(pinyinContent.match(/.*[àèìòùǜÀÈÌÒÙǛ].*/g))

output = output + '<span class="t4">' + pinyinContent + '</span> ';

else

output = output + '<span class="t5">' + pinyinContent + '</span> ';

}

document.getElementById("pinyin").innerHTML = output;

 

// Pinyin plitter adapted from:

// https://github.com/pepebecker/pinyin-split

 

function normalizePinyin(text){

text = text.normalize('NFD').replace(/\u0304|\u0301|\u030c|\u0300/g, '')

return text.normalize('NFC').replace(/(\w|ü)[1-5]/gi, '$1').toLowerCase()

}

 

function pinyinSplit(text, everything=false, wrapInList=false) {

const list = Array()

text = text.toString();

let prevWordFound = false

let wordEnd = text.length

while (wordEnd > 0) {

let count = wordEnd

let wordFound = false

while (count > 0) {

const word = text.substring(wordEnd - count, wordEnd)

if (syllables.includes(normalizePinyin(word))) {

wordFound = true

list.push(wrapInList ? [word] : word)

wordEnd -= (count - 1)

break

}

count--

}

if (!wordFound && everything) {

const prevIndex = list.length - 1

const prevEntry = list[prevIndex]

if (wordEnd === text.length || typeof prevEntry === 'object' || prevWordFound) {

list.push(text[wordEnd - 1])

}

else if (typeof prevEntry === 'string') {

list[prevIndex] = text[wordEnd - 1] + prevEntry

}

}

wordEnd --

prevWordFound = wordFound

}

return list.reverse()

}

</script>

 

Styles:

Spoiler

.t1{ color: #FF6666; display: inline;}

.t2{ color: #02B31C; display: inline;}

.t3{ color: #1510F0; display: inline;}

.t4{ color: #E299FF; display: inline;}

.t5{ color: #777; display: inline;}

 

.nightMode .t1{ color: #FF6666; display: inline;}

.nightMode .t2{ color: #02B31C; display: inline;}

.nightMode .t3{ color: #ACABF8; display: inline;}

.nightMode .t4{ color: #E299FF; display: inline;}

.nightMode .t5{ color: #B0B0B0; display: inline;}

 

 

 

How To Do It:

Use an existing note type, or create a new note with a pinyin field. You don't need to call it "Pinyin", you can call it whatever you want and just use your own field name. image.thumb.png.bf560482d59c8272d2724f89afaf2045.png Edit the card type that you want to add colours to. Go to the side that you want to (front or back) Add the pinyin field like this: <span id="pinyin">{{YourPinyinFieldName}}</span>  change "YourPinyinFieldName" to whatever you called your pinyin field in Anki. image.png.bfbb8fb0249f1adb7dc23d20978a5221.png At the very bottom of this section, paste the "main code" content: image.thumb.png.d01c17bf404740d47be2f9fcf6681a2d.png Go to the "styling" section. Add the styling code from above image.thumb.png.865b0f2b7624c2950c16ad06579fb26a.png Enjoy coloured pinyin.

 

  • Like 2
Link to comment
Share on other sites

Site Sponsors:
Pleco for iPhone / Android iPhone & Android Chinese dictionary: camera & hand- writing input, flashcards, audio.
Study Chinese in Kunming 1-1 classes, qualified teachers and unique teaching methods in the Spring City.
Learn Chinese Characters Learn 2289 Chinese Characters in 90 Days with a Unique Flash Card System.
Hacking Chinese Tips and strategies for how to learn Chinese more efficiently
Popup Chinese Translator Understand Chinese inside any Windows application, website or PDF.
Chinese Grammar Wiki All Chinese grammar, organised by level, all in one place.

Join the conversation

You can post now and select your username and password later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Click here to reply. Select text to quote.

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...