Anki subs2srs card template, with optional hint and note

00_README.md

To use these templates, you'll need to create a new Anki "note type" with the following fields:

• Sound
• Time
• Source
• Image
• Target: line
• Base: line
• Target: line before
• Base: line before
• Target: line after
• Base: line after
• Hint
• Note

Set the "Time" column as the default sort column. Note that the "Sound" and "Source" columns are reversed, because we want to use "Sound" as our unique key field. This means that when you import *.tsv files, you'll need to correct those two columns manually.

01_front.txt

<div class="image">{{Image}}</div>
<div class="media">{{Sound}}</div>
{{#Hint}}<div class="hint">{{Hint}}</div>{{/Hint}}

02_style.css

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}

.target, .base {
  margin-top: 1em;
  font-size: 75%;
}

.target .line {
  font-size: 20px;
}

.context {
  color: grey;
}

.hint, .note {
  margin-top: 15px;
  font-size: 15px;
  color: #777;
}

.source {
  margin-top: 1em;
  font-size: 75%;
  color: grey;
}

03_back.txt

{{FrontSide}}

<hr id=answer>

{{#Target: line}}
<div class="target">
<div class="context">{{Target: line before}}</div>
<div class="line">{{Target: line}}</div>
<div class="context">{{Target: line after}}</div>
</div>
{{/Target: line}}

{{#Base: line}}
<div class="base">
<div class="context">{{Base: line before}}</div>
<div class="line">{{Base: line}}</div>
<div class="context">{{Base: line after}}</div>
</div>
{{/Base: line}}

{{#Note}}<div class="hint">{{Note}}</div>{{/Note}}

<div class="source">{{Source}} {{Time}}</div>