Pop-up dictionary browser extension for language learning. Successor to Yomichan. (PERSONAL FORK)
at lambda-fork/main 159 lines 9.2 kB view raw
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Quick Start Guide</title> 7 <link rel="icon" type="image/png" href="/images/icon16.png" sizes="16x16"> 8 <link rel="icon" type="image/png" href="/images/icon19.png" sizes="19x19"> 9 <link rel="icon" type="image/png" href="/images/icon32.png" sizes="32x32"> 10 <link rel="icon" type="image/png" href="/images/icon38.png" sizes="38x38"> 11 <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> 12 <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> 13 <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> 14 <link rel="stylesheet" type="text/css" href="/css/material.css"> 15 <link rel="stylesheet" type="text/css" href="/css/settings.css"> 16 <script src="/js/pages/generic-page-main.js" type="module"></script> 17</head> 18<body hidden> 19 20<!-- Main content --> 21<div class="content-outer"><div class="content scrollbar"> 22<div class="content-left"></div> 23<div class="content-center"> 24 25 <span tabindex="-1" id="content-scroll-focus"></span> 26 27 <h1>Yomitan Quick Start Guide</h1> 28 29 <!-- Content --> 30 <h2>Quick Actions</h2> 31 32 <div class="settings-group"> 33 <div class="settings-item"> 34 <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> 35 Clicking the <img src="/images/yomitan-icon.svg" class="inline-icon" alt=""> <em>Yomitan</em> button in the browser bar will open the quick-actions popup. 36 </div></div></div> 37 <div id="action-popup-container"> 38 <img id="action-popup" src="/images/browser-action-popup.webp" alt="browser-action-popup"> 39 <div class="settings-item-children settings-item-children-group"> 40 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> 41 The <img src="/images/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the <a href="/settings.html" target="_blank" rel="noopener">Settings</a> page. 42 </div></div></div></div> 43 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> 44 The <img src="/images/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open the <a href="/search.html" target="_blank" rel="noopener">Search</a> page, 45 enabling text and terms to be looked up using the installed dictionaries. 46 This can even be used in offline mode! 47 </div></div></div></div> 48 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> 49 The <img src="/images/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open the <a href="/info.html" target="_blank" rel="noopener">Information</a> page, 50 which has some helpful information and links about Yomitan. 51 </div></div></div></div> 52 </div> 53 </div> 54 </div> 55 </div> 56 57 <h2>Installing Dictionaries</h2> 58 59 <div class="settings-group"> 60 <div class="settings-item"> 61 <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> 62 Yomitan requires one or more dictionaries to be installed in order to look up terms, kanji, and other information. 63 64 <br><br> 65 66 To get started, first select your desired language in the <a href="/settings.html#general" rel="noopener">Settings</a> page. 67 Then, click on <i>Get recommended dictionaries</i> under the <a href="/settings.html#dictionaries" rel="noopener">Dictionaries</a> section to find dictionaries for your language. 68 You can also visit <a href="https://yomitan.wiki/dictionaries/" target="_blank" rel="noopener noreferrer">Yomitan Wiki</a> to learn more about Yomitan dictionaries. 69 Once downloaded, dictionaries can be configured and managed from the same <a href="/settings.html#dictionaries" rel="noopener">Settings</a> page. 70 71 <br><br> 72 73 <img class="quick-start-img" src="/images/settings-dictionaries-popup.webp" alt="settings-dictionaries-popup"> 74 75 </div></div></div> 76 </div> 77 </div> 78 79 80 <h2>Scanning Text</h2> 81 82 <div class="settings-group"> 83 <div class="settings-item"> 84 <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> 85 After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key. 86 The default key is <kbd>Shift</kbd>, which can be disabled or configured in the <a href="/settings.html#backup">Settings</a> page. 87 </div></div></div> 88 89 <img class="quick-start-img" src="/images/scanning-popup.webp" alt="scanning"> 90 91 <div class="settings-item-children settings-item-children-group"> 92 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> 93 Clicking the <img src="/images/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the search results 94 will play an audio clip of a term's pronunciation using an online dictionary, if available. 95 </div></div></div></div> 96 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> 97 Clicking on a kanji character in a term's definition will show additional information about that character. 98 <span class="light">(Requires a kanji dictionary to be installed.)</span> 99 </div></div></div></div> 100 </div> 101 </div> 102 </div> 103 104 <h2>Migrating to Yomitan</h2> 105 106 <div class="settings-group"> 107 <div class="settings-item"> 108 <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> 109 You can also import an exported collection of dictionaries from the <a href="/settings.html#backup">Backup section of the Settings</a> page. 110 111 <br><br> 112 113 If you are migrating from Yomichan, you may be interested in importing your data into Yomitan. 114 Please follow instructions from <a href="https://yomitan.wiki/yomichan-migration/#migrating-from-yomichan" target="_blank" rel="noopener noreferrer">Yomitan Wiki</a> for that. 115 116 <br><br> 117 118 If you are using or planning to use custom templates for Anki note creation, note that <a href="https://yomitan.wiki/yomichan-migration/#custom-templates" target="_blank" rel="noopener noreferrer">some syntax has changed from Yomichan and Yomibaba.</a> 119 Please ensure that your custom templates are using the updated syntax. 120 </div></div></div> 121 </div> 122 </div> 123 124 <h2>Links</h2> 125 126 <div class="settings-group"> 127 <a href="/welcome.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner"> 128 <div class="settings-item-left"> 129 <div class="settings-item-label">Go to Welcome page</div> 130 </div> 131 <div class="settings-item-right open-panel-button-container"> 132 <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button> 133 </div> 134 </div></a> 135 <a href="/info.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner"> 136 <div class="settings-item-left"> 137 <div class="settings-item-label">Go to Info page</div> 138 </div> 139 <div class="settings-item-right open-panel-button-container"> 140 <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button> 141 </div> 142 </div></a> 143 <a href="https://yomitan.wiki/" rel="noopener noreferrer" class="settings-item settings-item-button"><div class="settings-item-inner"> 144 <div class="settings-item-left"> 145 <div class="settings-item-label outer-link"><strong>New to Yomitan? Head to Yomitan Wiki!</strong></div> 146 </div> 147 <div class="settings-item-right open-panel-button-container"> 148 <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button> 149 </div> 150 </div></a> 151 </div> 152 153 <div class="footer-padding"></div> 154 155</div> 156<div class="content-right"></div> 157</div></div> 158</body> 159</html>