From e858c031acc0c53a2d0cd01c7e0757634d6b76c9 Mon Sep 17 00:00:00 2001
From: lrorpilla <leorafaelorpilla@gmail.com>
Date: Sat, 12 Jun 2021 15:25:41 +1000
Subject: [PATCH] Update TEMPLATE.md

---
 TEMPLATE.md | 112 ++++++++++++++++++++--------------------------------
 1 file changed, 42 insertions(+), 70 deletions(-)

diff --git a/TEMPLATE.md b/TEMPLATE.md
index 8d9675c53..acc6dcbc7 100644
--- a/TEMPLATE.md
+++ b/TEMPLATE.md
@@ -1,34 +1,24 @@
 # jidoujisho Anki Template
 
-This page documents the HTML and CSS used in the Anki templates for any users that might already have an existing template and wish to update.
-
-There are two templates, one used for video playback and the other used for the card creator.
+This page documents the HTML and CSS used in the Anki templates for any users that might already have an existing template and wish to update. **There are three templates**, one used for video playback, one for using the card creator from inside the app, and one for reading when sharing to the app.\
 
+* **jidoujisho Anki cards have six fields in order:** Image, Audio, Sentence, Word, Meaning, Reading
 * You may edit the template on AnkiDroid by **editing any jidoujisho exported card**
-* **Select the card type** `jidoujisho Default` or `jidoujisho (Creator) Default` at the bottom of the AnkiDroid editor
+* **Select the card type** `jidoujisho Default` or `jidoujisho (Creator) Default` or `jidoujisho (Reader) Default` at the bottom of the AnkiDroid editor
 * This will take you to the template editor where you can **replace the text from the ones below**
 
-**jidoujisho Anki cards have six fields in order:**
-* Image
-* Audio
-* Sentence
-* Word
-* Meaning
-* Reading
-
-<br>
+<p align="center" style="margin:0">
+<img src="https://i.postimg.cc/pT655HZW/1.jpg" height="400"/>
+<img src="https://i.postimg.cc/5yQYwR7w/2.jpg" height="400"/>
+<img src="https://i.postimg.cc/gr9w4HQ1/3.jpg" height="400"/>
+</p>
 
-# Video playback template
-* `jidoujisho Default`, used when watching a video
-* **Intended for video immersion sentence mining**: audio, image and sentence in the front, back has reading, word and meaning
-* Recommended change for pro users, removing video and audio context from front and putting them at the back
+# CSS Template
+The CSS template is the same for the player, creator and reader templates, except that the Creator default maximum height is higher, as it is intended to be used out-of-the-box for cards with the image in the front, for manga readers or quick vocabulary cards.
 
-### Front Template
-```html
-<p id="sentence">{{Sentence}}</p>
-```
+* The **player and reader** template maximum image height is `250px` by default.
+* The **creator template** maximum image height is `400px`  by default.
 
-### CSS Template
 ```css
 p {
     margin: 0px
@@ -55,6 +45,12 @@ small {
     font-size: 30px
 }
 
+.image img {
+  position: static;
+  height: auto;
+  width: auto;
+  max-height: 250px;
+}
 .pitch{
   border-top: solid red 1px;
   padding-top: 1px;
@@ -71,9 +67,18 @@ small {
 }
 ```
 
+# Video playback template
+* `jidoujisho Default`, used when watching a video
+* **Intended for video immersion sentence mining**: sentence and word in the front, audio, image, reading, word, meaning and sentence in the back.
+
+### Front Template
+```html
+<p id="sentence">{{Sentence}}</p><div id="word">{{Word}}</div>
+```
+
 ### Back Template
 ```html
-<p id="sentence">{{Sentence}}</p><br>{{Audio}}<br>{{Image}}<br><br><hr id=reading><p id="reading">{{Reading}}</p><h2 id="word">{{Word}}</h2><br><p><small id="meaning">{{Meaning}}</small></p>
+<p id="sentence">{{Sentence}}</p><div id="word">{{Word}}</div><br>{{Audio}}<div class="image">{{Image}}</div><hr id=reading><p id="reading">{{Reading}}</p><h2 id="word">{{Word}}</h2><br><p><small id="meaning">{{Meaning}}</small></p>
 ```
 
 <br>
@@ -84,60 +89,27 @@ small {
 
 ### Front Template
 ```html
-{{Audio}}<div class=\"image\">{{Image}}</div><br><p id="sentence">{{Sentence}}</p>
+{{Audio}}<div class="image">{{Image}}</div><br><p id="sentence">{{Sentence}}</p>{{Word}}
 ```
 
-### CSS Template
-```css
-p {
-    margin: 0px
-}
-
-h2 {
-    margin: 0px
-}
-
-small {
-    margin: 0px
-}
-
-.card {
-  font-family: arial;
-  font-size: 20px;
-  white-space: pre-line;
-  text-align: center;
-  color: black;
-  background-color: white;
-}
+### Back Template
+```html
+{{Audio}}<div class="image">{{Image}}</div><br><p id="sentence">{{Sentence}}</p>{{Word}}<hr id=reading><p id="reading">{{Reading}}</p><h2 id="word">{{Word}}</h2><br><p><small id="meaning">{{Meaning}}</small></p>
+```
 
-#sentence {
-    font-size: 30px
-}
+<br>
 
-.image img {
-    position: static;
-    height: auto;
-    width: auto;
-    max-height: 300px;
-}
+# Reader template
+* `jidoujisho (Reader) Default`, used when sharing text to the app
+* **Intended for novel readers and general reading, i.e. in a web browser or reader application**: sentence and word in the front, audio, image, reading, word, meaning and sentence in the back.
+* Identical to the video playback template, but separate to allow flexibility for user customisation
 
-.pitch{
-  border-top: solid red 1px;
-  padding-top: 1px;
-}
-
-.pitch_end{
-  border-color: red;
-  border-right: solid red 1px;
-  border-top: solid red 1px;  
-  line-height: 1px;
-  margin-right: 1px;
-  padding-right: 1px;
-  padding-top:1px;
-}
+### Front Template
+```html
+<p id="sentence">{{Sentence}}</p><div id="word">{{Word}}</div>
 ```
 
 ### Back Template
 ```html
-{{Audio}}<div class=\"image\">{{Image}}</div><br><p id="sentence">{{Sentence}}</p><br><hr id=reading><p id="reading">{{Reading}}</p><h2 id="word">{{Word}}</h2><br><p><small id="meaning">{{Meaning}}</small></p>
+<p id="sentence">{{Sentence}}</p><div id="word">{{Word}}</div><br>{{Audio}}<div class="image">{{Image}}</div><hr id=reading><p id="reading">{{Reading}}</p><h2 id="word">{{Word}}</h2><br><p><small id="meaning">{{Meaning}}</small></p>
 ```