Copy button, I just made a copy button, and this is very useful for those of you who want to auto translate (ex: Google translate Floating / Deepl tr. Floating). Those of you who have English language problems can understand English at the same time or any language contained as long as the provider “Google/Deepl” supports & provide that language.
Ankidrone Essentials V9 (2026)
Ankidrone Essentials | All Japanese All The Time | AJATT
How to use:
You can tap on the Eng, Jap, Kanji for copying text automatically.
CSS
@charset "UTF-8";
@import url("_ajt_japanese_25.4.30.1.css");
@font-face {
font-family: "KanjiStrokeOrders";
src: local("KanjiStrokeOrders"), url("_kso.woff2") format("woff2");
}
@font-face {
font-family: "Local Mincho";
src: local("Yu Mincho"), local("游明朝"), local("Noto Serif CJK JP"), local("IPAexMincho"), local("IPAex明朝"),
local("IPAMincho"), local("IPA明朝"), local("IPAPMincho"), local("IPA P明朝"), local("TakaoExMincho"),
local("TakaoEx明朝"), url("_yumin.woff2") format("woff2");
font-weight: normal;
}
@font-face {
font-family: "Local Mincho";
src: local("Noto Serif CJK JP SemiBold"), local("Noto Serif CJK JP DemiLight"), local("Yu Mincho Demibold"),
local("游明朝 Demibold"), url("_yumindb.woff2") format("woff2");
font-weight: 600;
}
/* ----- Copyable Elements ----- */
.copy-wrapper {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
}
.copy-icon {
font-size: 24px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.1s, transform 0.1s;
user-select: none;
display: inline-block;
line-height: 1;
}
.copy-svg {
width: 24px;
display: inline-block;
vertical-align: middle;
pointer-events: none;
}
.copy-icon:hover {
opacity: 1;
transform: scale(1.0);
}
.copy-icon:active {
opacity: 0.8;
transform: scale(1.1);
}
.copy-notification {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: var(--accent-color);
color: white;
padding: 8px 16px;
border-radius: 30px;
font-size: 1.0rem;
box-shadow: var(--shadow);
z-index: 9999;
animation: fadeInOut 1.5s ease;
}
/* Color schemes
Anki applies .card and .nightMode classes to <body>. */
.card {
--color-side-bars: #e5d7c9;
--color-furigana: #000000;
--color-background: #fffaf0;
--color-text: #2a1b0a;
--color-background-wrap: #fffaf0;
--color-border-wrap: #c9bcbc;
--color-link: #532f2f;
--color-link-hover: #722a2a;
--color-headword: #ad1b82;
--color-hr: #ddd5c8;
/* Tags (pitch, note tags) */
--color-text-tags: #fffaf0;
--color-background-tags: #333;
/* Hints (the English sentence is hidden under a hint) */
--color-text-hint: #555;
--color-hint-border: hsl(0deg 80% 50% / 15%);
--color-text-hint-hover: hsl(20deg 100% 20% / 80%);
--color-background-hint-hover: hsl(0deg 80% 50% / 3%);
/* Summary (labels for "notes" and "image") */
--color-text-summary: hsl(0 80% 10% / 70%);
/* Audio replay button */
--color-play-symbol: #fffaf0;
--color-play-circle: var(--color-background-tags);
--color-play-circle-hover: #6b672f;
--size-small-text: 13px;
--size-medium-text: 17px;
}
.card.nightMode {
--color-side-bars: #272413;
--color-furigana: #ffffff;
--color-background: #2f2f31;
--color-text: #ffffff;
--color-background-wrap: #221f15;
--color-border-wrap: #6d6868;
--color-link: #c7493a;
--color-link-hover: #a33327;
--color-headword: gray;
/* Tags (pitch numbers, note tags) */
--color-text-tags: #2f2f31;
--color-background-tags: #ffffff;
/* Hints (the English sentence is hidden under a hint) */
--color-text-hint: #fff;
--color-hint-border: #fff;
--color-text-hint-hover: gray;
--color-background-hint-hover: rgba(0, 0, 0, 0.2);
/* Summary (labels for "notes" and "image") */
--color-text-summary: hsl(0 80% 100% / 70%);
/* Audio replay button */
--color-play-symbol: #2f2f31;
--color-play-circle: #ffffff;
--color-play-circle-hover: rgba(204, 223, 173, 0.8);
}
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
b,
strong {
font-weight: 600;
}
.jpsentence b,
.jpsentence strong {
color: var(--color-headword, pink);
}
.card {
background-color: var(--color-background, pink);
color: var(--color-text, pink);
font-size: 24px;
text-align: left;
line-height: 1.4;
margin: 0 auto;
}
.card,
ruby rt {
font-family: "Noto Serif", "Noto Serif CJK JP", "IPAexMincho", "Yu Mincho", "Local Mincho", "Liberation Serif",
"Times New Roman", Times, Georgia, Serif;
}
.card1 {
color: inherit;
}
.card2 .jpsentence ruby rt {
opacity: 0;
}
.card2 .jpsentence:hover ruby rt {
opacity: 1;
}
@media screen and (min-width: 820px) {
/* Large screens. */
.card,
.card.nightMode {
/* .card.nightMode fixes Anki's default CSS */
background-color: var(--color-side-bars, yellow);
display: flex;
justify-content: center;
}
.wrap {
width: 800px;
padding: 0 5px 0;
background-color: var(--color-background-wrap, pink);
border-left: 1px solid var(--color-border-wrap, pink);
border-right: 1px solid var(--color-border-wrap, pink);
min-height: 100vh;
}
}
/* HR */
hr {
margin: 8px 0;
clear: both;
border: 0;
border-top: 2px solid var(--color-hr, red);
}
/* links */
a {
color: var(--color-link, pink);
}
a:hover {
color: var(--color-link-hover, pink);
}
a.hint {
text-decoration: none;
text-align: center;
display: block;
}
/* Hide furigana on front
<div class="nokana">{{edit:kanji:SentFurigana}}</div> */
.nokana ruby rt {
opacity: 0;
font-size: 0;
display: none;
}
.notext b,
.notext strong {
background-color: black;
color: transparent;
}
/* Top */
header {
display: flex;
clear: both;
margin: 0 0 8px;
}
header .tags {
border-radius: 0px 0px 3px 3px;
}
header > div:not(:last-child) {
margin-right: 3px;
}
/* Space between elements */
.sent-center {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column nowrap;
}
.sent-center:where(#tsc, #jp1k-tsc):not([visible="true"]) {
/* toggles between JP1K mode and regular TSC mode. */
display: none;
}
/* Japanese sentence */
.jpsentence {
font-size: 35px;
}
.jpsentence b {
display: inline-block;
}
/* Hide the front side when the back is shown. */
body:has(.tsc__answer_revealed) .tsc__front_side {
display: none;
}
/* Hide the back side until the user reveals it. */
body:not(:has(.tsc__answer_revealed)) .tsc__back_side {
display: none;
}
/* Images on front, toggled by JavaScript if "imageonfront" tag is set. */
body:not(:has(.tsc__answer_revealed)) .images-details:not([images_on_front="true"]) {
display: none;
}
/* English */
div.ensentence > a.hint {
color: var(--color-text-hint, pink);
font-size: 14px;
display: block;
border: 1px solid var(--color-hint-border, pink);
border-radius: 2.2px;
padding: 2px 10px;
margin: 0.4rem 0;
}
div.ensentence > a.hint:hover {
color: var(--color-text-hint-hover, pink);
background-color: var(--color-background-hint-hover, pink);
}
/* Definition */
.definitions,
.notes {
font-weight: 300;
}
/* Tags */
.pitch_number,
.tags {
font-family: "Noto Sans", "Droid Sans", "DejaVu Sans", "Liberation Sans", Roboto, Cantarell, "Segoe UI", Arial,
Meiryo, Oxygen, Ubuntu, "Helvetica Neue", Helvetica, "Noto Color Emoji", "Noto Sans CJK JP", IPAGothic,
"Yu Gothic", Sans, sans-serif;
text-align: center;
display: inline-block;
text-transform: lowercase;
background-color: var(--color-background-tags, pink);
color: var(--color-text-tags, pink);
font-weight: bold;
padding: 1px 3px;
margin: 0;
cursor: pointer;
border-radius: 3px;
font-size: 12px;
line-height: 1.4;
user-select: none;
}
/* AnkiDroid replay button = a.replay-button > span > svg
https://github.com/ankidroid/Anki-Android/blob/1994d46b7627bf82b89b054f2b7a5d8f60c33435/AnkiDroid/src/main/java/com/ichi2/libanki/Sound.kt#L130
PC replay button = a.replay-button > svg */
#vocab-audio,
#sent-audio {
/* Fix for flexbox alignment */
display: contents;
}
a.replay-button {
/* Draw a circle around the play symbol */
--replay-button-scale: 0.7rem;
display: inline-grid;
place-items: center;
margin: 0;
user-select: none;
cursor: pointer;
background-color: var(--color-play-circle, pink);
border-radius: 100vmax;
width: calc(2.25 * var(--replay-button-scale));
aspect-ratio: 1 / 1;
}
a.replay-button:hover,
a.replay-button:focus-visible {
background-color: var(--color-play-circle-hover, yellow);
}
a.replay-button > * {
/* Delete the svg icon Anki places inside the link by default. */
display: none;
}
a.replay-button::after {
/* The play symbol ▶️ */
user-select: none;
display: block;
content: "";
width: 0;
height: 0;
margin-left: calc(0.2 * var(--replay-button-scale));
border-top: calc(0.5 * var(--replay-button-scale)) solid transparent;
border-bottom: calc(0.5 * var(--replay-button-scale)) solid transparent;
border-left: calc(0.8 * var(--replay-button-scale)) solid var(--color-play-symbol, pink);
}
/* Footer and links */
footer {
font-size: 16px;
word-break: keep-all;
text-align: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
footer > a {
text-decoration: none;
cursor: pointer;
}
footer > a:not(:last-child)::after {
content: "·";
color: brown;
display: inline-block;
padding: 0 2px;
}
/* Vocab */
.vocab {
display: flex;
flex-flow: row wrap;
margin-top: 2px;
align-items: center;
align-content: flex-start;
justify-content: flex-start;
gap: 5px;
}
.vocab > .reading,
.vocab > .target_word {
word-break: keep-all;
}
.vocab > .target_word::before {
content: "【";
}
.vocab > .target_word::after {
content: "】";
}
.vocab div {
display: inline-block;
}
.vocab br {
display: none;
}
.vocab .pitch_number,
.vocab .tags {
align-self: flex-start;
vertical-align: top;
}
.notes .tags {
vertical-align: bottom;
}
/* Images */
.images {
margin: 3px 0;
display: block;
justify-items: center;
align-items: start;
align-content: start;
justify-content: space-around;
grid-auto-columns: minmax(60px, 1fr);
grid-auto-rows: minmax(60px, auto);
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.images br,
.images > :not(img) {
display: none;
visibility: hidden;
}
.images div {
/* some unfortunate apps insert divs in cards */
display: contents;
visibility: visible;
}
.images img {
display: inline-block;
border-radius: 4px;
filter: sepia(33%);
max-height: 95vh;
width: 48%;
object-fit: contain;
}
.images img:only-of-type {
width: auto;
}
/* Production cards */
.production :is(b, strong):not([visible]) {
visibility: hidden;
}
.production :is(b, strong)::before {
content: "【";
}
.production :is(b, strong)::after {
content: "】";
}
.strokeorder {
text-align: center;
font-size: 150px;
font-family: KanjiStrokeOrders;
}
/* Production cards: Hide the back side until it's revealed. */
body:not(:has(.tsc__answer_revealed)) .production__back_side {
display: none;
}
/* Fix for Rikaitan defs */
.headword_section ul,
.headword_section ol {
list-style-type: none;
display: inline;
margin: 0px;
padding: 0px;
}
/* Fix for Rikaitan pitch accents */
.vocab ol > li {
display: inline;
}
.vocab ol > li:after {
content: "・";
}
.vocab ol > li:last-child:after {
content: "";
}
/* Furigana style */
rt {
color: var(--color-furigana, black);
}
/* Fix: Don't select furigana */
ruby rt {
user-select: none;
}
.jpsentence {
position: relative;
}
.jpsentence > .overlay {
position: absolute;
/* Some versions of Anki don't understand inset. */
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.jpsentence > .background,
.jpsentence > .overlay ruby rt {
visibility: hidden;
pointer-events: none;
}
.jpsentence > .background ruby rt {
visibility: visible;
}
/* Outline editable fields */
div[contenteditable="true"] {
background-color: white;
border: 1px solid gray;
padding: 3px;
box-shadow: 10px 5px 5px gray;
}
/* Details */
details,
.headword_section {
background-color: hsl(0deg 80% 50% / 3%);
border-radius: 4px;
padding: 3px;
margin-block-end: 0.5rem;
border: 1px solid hsl(0deg 80% 50% / 15%);
}
summary {
font-size: 18px;
color: var(--color-text-summary, pink);
font-weight: 500;
user-select: none;
}
/* Toggle furigana button - JP1K mode */
.toggle_furigana_button {
font-size: 14px;
font-weight: bold;
cursor: pointer;
padding: 8px 4px;
border-radius: 4px;
background-color: var(--color-background-tags, yellow);
color: var(--color-text-tags, red);
border: 0;
outline: 0;
margin: 0 0 6px;
}
.toggle_furigana_button:hover,
.toggle_furigana_button:active {
background-color: var(--color-play-circle-hover, #4f4f4f);
background: var(--color-play-circle-hover, #4f4f4f);
border: none;
}
/* Hidden furigana on front - JP1K mode */
#jp1k-tsc ruby rt {
visibility: hidden;
}
#jp1k-tsc ruby:hover rt {
visibility: visible;
}
/* Styles for SVG pitch graphs */
.reading:has(.ajt__pitch_svg) {
font-size: 0px; /* hide reading separators */
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
}
.reading:not(:hover, :active, :focus) .ajt__pitch_svg:nth-child(n + 3) {
height: 0px;
width: 0px;
}
.reading:not(:hover, :active, :focus):has(.ajt__pitch_svg:nth-child(3))::after {
content: "\2807";
display: block;
font-size: 32px;
margin-top: 8px;
color: red;
rotate: 90deg;
}
/* Error reporting. Used to show JS errors.
Under normal circumstances, the user should never see this. */
#error_report {
border: 2px brown solid;
background-color: #ecd4d4;
color: #2e0b0b;
display: none;
font-size: 1rem;
padding: 0.4rem;
overflow-x: auto;
}
#error_report[error_occurred="true"] {
display: block;
}
Front:
<!--
mpvacious cards, version 20.0
Wed Apr 30 11:17:13 AM UTC 2025
-->
<div class="wrap">
<header>
{{#Focus}}
<div class="tags">{{Focus}}</div>
{{/Focus}}
<!-- Tags -->
{{#Tags}}
<div class="tags">{{Tags}}</div>
{{/Tags}}
</header>
<!-- Used to print JS-related errors to the user. -->
<div id="error_report">
<pre class="error_msg"></pre>
</div>
<!-- Front side. This tag is hidden on the back. -->
<div class="tsc__front_side">
<div class="sent-center" id="tsc" visible="true">
<div class="jpsentence" lang="ja">
{{edit:furigana:SentKanji}} <span class="copy-icon" onclick="copyText(this)"><svg viewBox='0 0 24 24' class='copy-svg'><path d='M9 9h-3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-3' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round'/><rect x='9' y='3' width='11' height='11' rx='2' stroke='currentColor' stroke-width='1.8' fill='none'/></svg></span>
<!-- If SentKanji is empty, show SentFurigana with furigana hidden. -->
{{^SentKanji}}
<div class="nokana">{{edit:kanji:SentFurigana}} <span class="copy-icon" onclick="copyText(this)"><svg viewBox='0 0 24 24' class='copy-svg'><path d='M9 9h-3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-3' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round'/><rect x='9' y='3' width='11' height='11' rx='2' stroke='currentColor' stroke-width='1.8' fill='none'/></svg></span></div>
{{/SentKanji}}
</div>
</div>
<div class="sent-center" id="jp1k-tsc" visible="false">
<!-- JP1K mode is active only if note has been tagged as jp1k. -->
<div class="jpsentence" lang="ja">{{furigana:SentFurigana}} <span class="copy-icon" onclick="copyText(this)"><svg viewBox='0 0 24 24' class='copy-svg'><path d='M9 9h-3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-3' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round'/><rect x='9' y='3' width='11' height='11' rx='2' stroke='currentColor' stroke-width='1.8' fill='none'/></svg></span></div>
<button type="button" class="toggle_furigana_button" title="Press P to toggle kanji readings.">
Toggle Readings
</button>
</div>
</div>
<!-- Images (can be shown on both the front side and the back side).
If a card has the "imageonfront" tag set, show images on the front side. -->
{{#Image}}
<details class="images-details">
<summary>Image</summary>
<div class="images">{{Image}}</div>
</details>
{{/Image}}
<!-- Back side. This tag is hidden on the front. -->
<div class="tsc__back_side">
<div class="sent-center">
<div class="jpsentence" lang="ja">
<div class="background">
<!-- Only RT tags are drawn on the background. -->
{{furigana:SentFurigana}} <span class="copy-icon" onclick="copyText(this)"><svg viewBox='0 0 24 24' class='copy-svg'><path d='M9 9h-3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-3' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round'/><rect x='9' y='3' width='11' height='11' rx='2' stroke='currentColor' stroke-width='1.8' fill='none'/></svg></span>
<!-- If SentFurigana is empty, show SentKanji. -->
{{^SentFurigana}}{{furigana:SentKanji}} <span class="copy-icon" onclick="copyText(this)"><svg viewBox='0 0 24 24' class='copy-svg'><path d='M9 9h-3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-3' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round'/><rect x='9' y='3' width='11' height='11' rx='2' stroke='currentColor' stroke-width='1.8' fill='none'/></svg></span>{{/SentFurigana}}
</div>
<div class="overlay">
{{edit:furigana:SentFurigana}} <span class="copy-icon" onclick="copyText(this)"><svg viewBox='0 0 24 24' class='copy-svg'><path d='M9 9h-3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-3' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round'/><rect x='9' y='3' width='11' height='11' rx='2' stroke='currentColor' stroke-width='1.8' fill='none'/></svg></span>
<!-- If SentFurigana is empty, show SentKanji. -->
{{^SentFurigana}}{{edit:furigana:SentKanji}} <span class="copy-icon" onclick="copyText(this)"><svg viewBox='0 0 24 24' class='copy-svg'><path d='M9 9h-3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-3' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round'/><rect x='9' y='3' width='11' height='11' rx='2' stroke='currentColor' stroke-width='1.8' fill='none'/></svg></span>{{/SentFurigana}}
</div>
</div>
{{#SentEng}}
<div><span class="copy-icon" onclick="copyText(this)"><div class="ensentence" lang="en">{{hint:SentEng}}</div><span style="display: none">{{hint:SentEng}}</span></span></div>
{{/SentEng}}
</div>
<!-- Definitions -->
{{#VocabDef}}
<section class="headword_section">
<div class="vocab" id="tsc__headword_section">
<!-- Using JS, insert vocabulary audio and sentence audio here. -->
<div class="reading" id="pitchpattern" lang="ja">
{{VocabPitchPattern}}
<!-- If VocabPitchPattern is empty, show VocabFurigana. -->
{{^VocabPitchPattern}}{{text:kana:VocabFurigana}}{{/VocabPitchPattern}}
</div>
{{#VocabPitchNum}}
<span class="tags" id="pitchnum">{{text:VocabPitchNum}}</span>
{{/VocabPitchNum}}
<!-- Word in kanji -->
{{#VocabKanji}}
<div class="target_word" lang="ja"><span class="copy-icon" onclick="copyText(this)">{{text:kanji:VocabKanji}}</span></div>
{{/VocabKanji}}
</div>
<div class="definitions"><span class="copy-icon" onclick="copyText(this)">{{edit:furigana:VocabDef}}</span></div>
</section>
{{/VocabDef}}
<!-- Fallback location for audio files -->
<div id="tsc__backside_audio"></div>
<!-- Notes -->
{{#Notes}}
<details open class="notes">
<summary>Notes</summary>
<div><span class="copy-icon" onclick="copyText(this)">{{furigana:Notes}}</span></div>
</details>
{{/Notes}}
<!-- Place images here -->
<div id="tsc__backside_images"></div>
<hr>
<footer>
<!-- Sentence links -->
{{#SentKanji}}
<a
href="https://simplytranslate.org/?engine=google&text={{text:kanji:SentKanji}}&sl=ja&tl=en"
title="Translate with SimplyTranslate"
>Translate</a
>
<a href="https://jisho.org/search?keyword={{text:kanji:SentKanji}}" title="Sentence on Jisho">Jisho</a>
<a
href="https://duckduckgo.com/?q={{text:kanji:SentKanji}}&iax=images&ia=images&kp=-2&kl=jp-jp"
title="Search images"
>Images</a
>
{{/SentKanji}}
<!-- Vocab links -->
{{#VocabKanji}}
<a href="http://www.weblio.jp/content/{{text:VocabKanji}}" title="Vocab on Weblio">Weblio</a>
<a href="https://wadoku.de/search/?q={{text:VocabKanji}}" title="Vocab on Wadoku">Wadoku</a>
{{/VocabKanji}}
</footer>
</div>
</div>
<!-- /wrap -->
<div style="display: none">
<div id="vocab_kanji_hidden">{{VocabKanji}}</div>
<div id="pitchnum_hidden">{{VocabPitchNum}}</div>
<div id="kanaword_hidden">{{kana:VocabFurigana}}</div>
</div>
<script>
function copyText(el){
const text = el.parentElement.innerText.replace("<svg viewBox='0 0 24 24' class='copy-svg'><path d='M9 9h-3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-3' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round'/><rect x='9' y='3' width='11' height='11' rx='2' stroke='currentColor' stroke-width='1.8' fill='none'/></svg>","").trim();
navigator.clipboard.writeText(text);
}
</script>
<script>
... same as default
</script>
Back = default