1 0 Sign in to rate

Japanese Text Scrambler

34.51MB. 0 audio & 0 images. Updated 2020-04-28.

This item is large, and may take some time to download.

Description

## INTRODUCTION This is a "soft plugin" (font pack + JavaScript) that scrambles the visual style of Japanese text. I made this after realizing that I could only read kanji in the exact font my phone uses. Pretty useless. When it came to hand writing, product packaging, logos, etc. I couldn't even recognize the most basic kanji. So I assembled a collection of 9 clean fonts that aim to represent a variety of everyday text Japan. I then wrote a javascript that randomizes the font and some other visual aspects of any text field in Anki. I chose to do it like this instead of a plugin since I only use AnkiMobile, which doesn't support plugins. This script has immensely improved my recognition of Japanese text. ## EXAMPLES Default Settings Everything Enabled ## FONT LIST HAND WRITTEN Rako Font (CORPORATE/LOGO/PACKAGING Corporate Logo Maru (BRUSH Otsutome (MARKER HonyaJi Re (SANS SERIF Komorebi Gothic (SERIF Appli Mincho (Note: all of these fonts are listed as free for non-commercial use, and are linked both here and in the deck for confirmation. ## FEATURES This is for intermediate users since it requires you to modify your card templates. This script scrambles the visual style of (Japanese) text fields. It can randomize the following attributes: * Font Face * Size * Alignment (left/right/center) * Padding * Styling (bold/italic) * Color Furigana is also supported. ## INSTRUCTIONS Download the deck, open it in the Browser, check the card template, and follow the instructions there. In short: 1. Open the template for the deck that has the japanese text you want to scramble. 2. Give your japanese text html element an id (in this case "kanji"): <div id="kanji">色は匂へど散りぬるを我が世誰ぞ常ならん有為の奥山今日越えて浅き夢見じ酔ひもせず.</div> 3. Paste the core script at the bottom of your template (script is in the card template of this deck): <script> //---------prepare fonts----------// function importFont(fontName, fontURL, fontFormat) { var _s = document.createElement('style'); _s.appendChild(document.createTextNode("\ @font-face {\ font-family: " + fontName + ";\ src: url('" + fontURL + "') ;\ //format('"+ fontFormat + "');\ }\ ")); document.head.appendChild(_s); } importFont("DejimaMincho","_dejima-mincho-r227.ttf", "truetype"); importFont("KomorebiGothic","_komorebi-gothic.ttf", "truetype"); importFont("Othutome","_OthutomeFont_Ver2.ttf", "truetype"); importFont("MkPOP851","_851MkPOP_001.ttf", "truetype"); importFont("CorpMaruGo","_corpmarugo_v1.ttf", "truetype"); importFont("AppliMincho","_AppliMincho.otf", "opentype"); importFont("HonyaJiRe","_HonyaJi-Re.ttf", "truetype"); importFont("JKGothicM","_JKG-M_3.ttf", "truetype"); importFont("RakoFont","_RakoFont.ttf", "truetype"); //------------helpers-------------// function getRandom(a) { return a[Math.floor(Math.random()*a.length)]; } function randRange(low, high) { return (low + Math.random() * (high - low)); } function forceStyle(el, sub, str, val) { el.style.setProperty(str, val); for (i=0;i<sub.length;++i) sub[i].style.setProperty(str, val); } function randColor(src, palette) { if (palette.length == 0) palette = src; return palette.splice(Math.floor(Math.random()*palette.length), 1); } //------------start-------------// function scramble(id, font=true, size=true, align=true, pad=true, style=true, color=true) { el = document.getElementById(id); sub = el.getElementsByTagName("*"); if (style) { if (Math.random() < 0.33) { forceStyle(el, sub, 'font-weight', 'bold'); } else { forceStyle(el, sub, 'font-weight', 'normal'); } if (Math.random() < 0.33) { forceStyle(el, sub, 'font-style', 'italic'); } else { forceStyle(el, sub, 'font-style', 'normal'); } } if (font) { fonts = [ 'DejimaMincho', 'KomorebiGothic', 'Othutome', //'MkPOP851', //too hard to read 'CorpMaruGo', 'AppliMincho', 'HonyaJiRe', 'JKGothicM', 'RakoFont', ]; el.style.fontFamily = getRandom(fonts); } if (size) { min = 0.75; max = 1.15; c = window.getComputedStyle(el, null); s = parseInt(c.getPropertyValue('font-size')); r = randRange(min, max); el.style.fontSize = Math.floor(s * r) + 'px'; } if (align) { aligns = ['left','center','right']; el.style.textAlign = getRandom(aligns); } if (pad) { el.style.marginLeft = randRange(0,10)+'%'; el.style.marginRight = randRange(0,10)+'%'; } if (color) { palettes = [ [ '#000000', '#f5ad58', '#1e90ff', ], [ '#000000', '#f5ad58', '#ad58f5', ], ] src = getRandom(palettes); available = []; used = {}; el.style.setProperty("color", randColor(src, available)); /* // background color (not used) el.style.setProperty("background-color", randColor(src, available)); el.style.paddingTop = '10px'; el.style.paddingBottom = '10px'; */ for (i=0;i<sub.length;++i) { subcol = window.getComputedStyle(sub[i]).getPropertyValue('color'); newcol = (subcol in used) ? used[subcol] : randColor(src, available); sub[i].style.setProperty("color", newcol); used[subcol] = newcol; } } } </script> 4. Paste this script underneath the above code, and change "kanji" to the name of your html field. Then, you can customize the true/false values depending on your preferences. <script>scramble("kanji", font=true, size=false, align=false, pad=false, style=true, color=false);</script> ## ADDING FONTS If you want to add custom fonts, the process goes something like this; 1. Sync this deck to your computer. 2. Add your custom font to your media folder. The filename needs to begin with an underscore or it won't be recognized. 3. Add some text to the demo card in this deck, using the custom font. This should link it to the deck (might not be needed but that's how I did it). 4. Under the //---------prepare fonts----------// part of this script, add a new line for your font, entering a name for the font, the font's filename, and it's type; importFont("MyNewFont","_my_new_font.ttf", "truetype"); 5. Under the if (font) { part of this script, add a new line for your new font, entering the name the same way as the previous step; 'MyNewFont', 6. Test the script, sync to your phone, and let me know which font you added so I can add it here! This is a "soft plugin" (font pack + JavaScript) that scrambles the visual style of Japanese text. I made this after realizing that I could only read kanji in the exact font my phone uses. Pretty useless. When it came to hand writing, product packaging, logos, etc. I couldn't even recognize the most basic kanji. So I assembled a collection of 9 clean fonts that aim to represent a variety of everyday text Japan. I then wrote a javascript that randomizes the font and some other visual aspects of any text field in Anki. I chose to do it like this instead of a plugin since I only use AnkiMobile, which doesn't support plugins. This script has immensely improved my recognition of Japanese text.Default SettingsEverything EnabledRako Font ( https://www.freejapanesefont.com/rako-font-download/ ) MkPOP851 (disabled by default) ( http://pm85122.onamae.jp/851mkpop.html Corporate Logo Maru ( https://www.freejapanesefont.com/corporate-logo-maru-download/ Otsutome ( https://www.freejapanesefont.com/otsutome-font-download/ HonyaJi Re ( https://www.freejapanesefont.com/honyaji-re-download/ Komorebi Gothic ( https://www.freejapanesefont.com/komorebi-gothic-download/ ) JK Gothic M ( https://www.freejapanesefont.com/jk-gothic-m-free-download/ Appli Mincho ( https://www.freejapanesefont.com/appli-mincho/ ) Dejima Mincho ( https://code.google.com/archive/p/dejima-fonts/downloads This is for intermediate users since it requires you to modify your card templates. This script scrambles the visual style of (Japanese) text fields. It can randomize the following attributes: * Font Face * Size * Alignment (left/right/center) * Padding * Styling (bold/italic) * Color Furigana is also supported.Download the deck, open it in the Browser, check the card template, and follow the instructions there. In short: 1. Open the template for the deck that has the japanese text you want to scramble. 2. Give your japanese text html element an id (in this case "kanji"):3. Paste the core script at the bottom of your template (script is in the card template of this deck):4. Paste this script underneath the above code, and change "kanji" to the name of your html field. Then, you can customize the true/false values depending on your preferences.If you want to add custom fonts, the process goes something like this; 1. Sync this deck to your computer. 2. Add your custom font to your media folder. The filename needs to begin with an underscore or it won't be recognized. 3. Add some text to the demo card in this deck, using the custom font. This should link it to the deck (might not be needed but that's how I did it). 4. Under thepart of this script, add a new line for your font, entering a name for the font, the font's filename, and it's type;5. Under thepart of this script, add a new line for your new font, entering the name the same way as the previous step;6. Test the script, sync to your phone, and let me know which font you added so I can add it here!

Sample (from 1 notes)

Cards are customizable! When this deck is imported into the desktop program, cards will appear as the deck author has made them. If you'd like to customize what appears on the front and back of a card, you can do so by clicking the Edit button, and then clicking the Cards button.

Front Font list Back Instructions Tags

After the file is downloaded, double-click on it to open it in the desktop program.

At this time, it is not possible to add shared decks directly to your AnkiWeb account - they need to be added from the desktop then synchronized to AnkiWeb.

Reviews

Excellent, thank you for sharing.



Is there an easy way for me to add my own fonts to the list?