2025, 18 mai
#anki #ankidroid
J'ai entrepris de créer un jeu de cartes d'après Kanji & Kana - Manuel et Lexique des 2141 Caractères Officiels de l'Écriture Japonaise - Éditions Maisonneuve, 2021. Au bout de quelques notes, je me suis rendue compte que la disposition habituelle, verticale, ne convenait pas ; je voulais quelque chose qui ressemble au livre : le kanji à gauche et les détails à droite. Après en avoir discuté ici et là, j'ai fini par opter pour la création d'un tableau en HTML. Ça a été beaucoup plus simple que j'imaginais ; je croyais devoir y passer le weekend mais finalement une heure a suffi.
Le détail du code :
Front :
/*Application du CSS styling*/
<recto>{{Kanji}}</recto>
Back :
/*Code HTML du tableau*/
<html>
<style>
td {
border: 2px solid #00273e;
border-radius: 10px;
}
</style>
<body>
<table style="width:100%">
<tr>
<td style ="width:34%">{{FrontSide}}</td>
<td rowspan="3">
<cat>Traits :</cat><br>{{Traits}}<br><br><hr>
<cat>On'yomi :</cat><onyomi lang="ja">{{On'yomi}}</onyomi><br><br><hr>
<cat>Kun'yomi :</cat><onyomi lang="ja">{{Kun'yomi}}</onyomi><br><br></td>
</tr>
</table>
</body>
</html>
/*Fin du code HTML du tableau*/
/*Application du CSS styling*/
{{#Sens}}
<hr size=4px color=#00273e>
<cat>Sens</cat><br>
<fr_blockquote lang="fr">{{Sens}}</fr_blockquote>
<br>
{{/Sens}}
/*Code pour activer et désactiver*/
/*les furigana*/
<input type="checkbox" id="check"/>
<label for="check">
/*Application du CSS styling*/
{{#Exemples}}
<hr size=3px color=#00273e>
<cat>Exemples</cat>
<ex_blockquote lang="ja">
{{furigana:Exemples}}</ex_blockquote>
<br>
{{/Exemples}}
CSS styling :
.card {
font-family: "";
text-align: center;
font-size: 12px;
color: #140405;
background-color: #f8e9d9;
}
@font-face {
font-family: NotoSerifLight;
src: url("_NotoSerifJP-Light.ttf");
}
@font-face {
font-family: NotoSerifMedium;
src: url("_NotoSerifJP-Medium.ttf");
}
@font-face {
font-family: NotoSans;
src: url("_NotoSansJP-Medium.ttf");
}
@font-face {
font-family: SourceSans3;
src: url("_SourceSans3-Medium.ttf");
}
:lang(ja) {
font-family: NotoSerifMedium;
}
:lang(fr) {
font-family: SourceSans3;
}
recto {
font-family: NotoSerifLight;
font-size: 64px;
color: darkmagenta;
}
onyomi {
font-size: 24px;
color: #AD6044;
}
kunyomi {
font-size: 23px;
color: #AD6044;
}
fr_blockquote {
display: block;
font-family: SourceSans3;
font-size: 19px;
margin-left: 15px;
margin-right: 15px;
color: #004953;
}
cat {
display: block;
text-align: left;
font-size: 12px;
font-style: italic;
}
ex_blockquote {
display: block;
font-size: 22px;
margin-left: 35px;;
margin-right: 0px;
text-align: left;
color: darkmagenta;
}
français {
font-size: 19px;
color: #004953;
}
/*===========*/
/*start furigana*/
/*===========*/
/* hide the checkbox */
#check{
display:none;
}
/* when checkbox is active, show for furigana */
#check:checked + label
ruby rt {
font-family: NotoSans;
color: black;
visibility: visible;
}
/* furigana hidden by default*/
ruby rt {
visibility: hidden;
}
/*==========*/
/*end furigana*/
/*==========*/
Le résultat en photo :