Utiliser des polices de caractères dans son deck Anki

Dans le cadre de ces révisions de japonais il peut être intéressant d'utiliser des polices de caractères qui ne sont pas les standards.

Comme entre un smartphone, un ordinateur on ne peut pas garantir d'avoir la police installée partout, la solution va être d'intégrer la police dans notre deck Anki, ainsi elle sera disponible quel que soit l'appareil.

Attention : le processus est un peu technique, je vais me contenter d'indiquer comment effectuer les modifications et expliquer le fonctionnement dans les grandes lignes. Malheureusement je n'ai pas trouvé le moyen de faire les modifications en dehors d'un ordinateur, donc il vous faut Anki Desktop installé sur un poste avec votre deck synchronisé dessus.

Principes

Le principe de base est le suivant : Anki utilise un navigateur Web pour afficher les flashcards, avec une technologie web HTML classique. Cette technologie sait afficher une police non standard (c'est-à-dire non installée sur l'appareil qui exécute le navigateur) grâce à la technologie CSS (ce qu'on appelle les "styles" dans les modèles de cartes de Anki).

On va donc appliquer tout ça dans Anki, avec les étapes suivantes :

  • ajouter le fichier de la police de caractère dans le deck
  • modifier nos type de cartes pour ajouter des informations dans le style CSS pour lui indiquer où trouver la police
  • modifier les styles pour CSS pour utiliser la police là où ça nous intéresse

Récupération des polices de caractères

La première chose est d'obtenir le fichier qui contient la police de caractères qui vous intéresse. Pour le japonais j'ai suivi les conseils de Gilles de Japonais Naturel qu'il avait diffusé sur une newsletter concernant deux polices de caractères:

Trouvez les fichiers de Anki

Mes manipulations se font sous Windows, mais si vous avez un Mac ou que vous utilisez Linux je vous renvoie à la documentation pour trouver le dossier de stockage des fichiers de Anki.

La première chose à faire est d'ouvrir le dossier Anki, sous Windows il suffit d'ouvrir un explorateur de fichier et saisir dans la barre d'adresse "%APPDATA%\Anki2".

open-anki-folder

Dans ce dossier vous trouverez un dossier portant le nom de votre profil Anki (celui qui s'affiche dans la barre de titre de Anki), dans ce dossier se trouve un dossier collection.media qui va nous intéresser. Comme son nom l'indique ce dossier contient tous les médias de notre deck Anki (images, son, etc...), c'est dans ce dossier que l'on va mettre nos fichiers de polices de caractère.

Copier les fichiers de polices dans ce dossier et renommer avec un nom simple, tout en minuscule et commençant obligatoirement par le tiret souligné "_" (underscore) souvent appelée "tiret du 8" sous Windows (je ne sais pas pour Mac).

Dans mon cas je vais renommer ainsi:

  • KleeOne-Regular.ttf => _kleeone.ttf
  • KanjiStrokeOrders_v4.004.ttf => _kso.ttf

copy-font-files

FYI: le fait de mettre un "_" devant le nom d'un fichier est important pour Anki, car celà lui indique qu'il ne doit pas supprimer ces fichiers quand on utilise l'outil "Vérifier les médias". Si vous ne le faites pas, vos polices disparaitront lors du prochain nettoyage de fichier.

Intégrer les polices dans notre deck

Chargement des polices

La première chose à faire c'est de "charger" la police. Dans l'onglet "Style" d'un modèle de carte on va ajouter un code de cette forme:

@font-face {
  font-family: <<<NOM>>>;
  src: url("<<<FICHIER>>>");
}

Où

  • NOM est le nom de la police que l'on charge, ce nom sera utilisé ensuite pour indiquer quelle police on veut utiliser.
  • FICHIER est le nom du fichier de la police que l'on a copié dans les médias.

Utilisation des polices

Une fois chargée, on peut utiliser la police comme n'importe qu'elle autre police dans les styles là où on utilise la propriété font-family, par exemple:

.monstyle { font-family: <<<NOM>>> }

Mise en application

Mettons en application par l'exemple l'utilisation des deux polices.

Base de travail

Pour celà je vais partir d'un type de note basé sur "Japanese (recognition)" (qui est créé par le plugin ANKI). Ce type de note possède un modèle de carte constitué des trois éléments suivants:

Recto

<div class=jp> {{Expression}} </div>

Verso

{{FrontSide}}

<hr id=answer>

<div class=jp> {{furigana:Reading}} </div><br>
{{Meaning}}

Style

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}
.jp { font-size: 30px }
.win .jp { font-family: "MS Mincho", "ＭＳ 明朝"; }
.mac .jp { font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro"; }
.linux .jp { font-family: "Kochi Mincho", "東風明朝"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }

Ce qui donne une carte de ce type:

card-sample-ori

Intégration des polices

Comme indiqué précédemment, on va déjà "charger" les deux polices, on ajoute dans Styles le code suivant :

Par exemple dans mon cas je charge les deux polices:

@font-face {
  font-family: kleeone;
  src: url("_kleeone.ttf");
}
@font-face {
  font-family: kso;
  src: url("_kso.ttf");
}

Ensuite on va créer 2 classes de styles pour utiliser ces polices:

.klee { font-family: kleeone; font-size: 42px; }
.kso { font-family: kso; font-size: 64px; }

En faisant nous avons:

  • une classe klee qui utilise la police KleeOne d'une taille de 42 pixels
  • une classe kso qui utilise la police Kanji Stroke Order d'une taille de 64 pixels

Note: attention le "." qui précède le nom est important, si la suite ne fonctionne pas, vérifier que vous avez bien un point.

Affichage d'exemple

Pour montrer la différence de police, nous allons ajouter le mot en kanji avec les deux autres police.

Dans Recto on ajoute :

<div class="klee"> {{Expression}} </div>
<div class="kso"> {{Expression}} </div>

En faisant cela nous ajoutons un "bloc de texte" qui va utiliser le style qui se trouve dans "class" (attention cette fois il ne faut pas de "."), ainsi le premier bloc va afficher le mot avec la classe klee utilisant la police KleeOne de 42 pixels et le second bloc la classe kso.

On obtient l'affichage suivant:

card-sample-after

Configuration finale

Au final la configuration est la suivante

Recto

<div class=jp> {{Expression}} </div>
<div class="klee"> {{Expression}} </div>
<div class="kso"> {{Expression}} </div>

Verso

{{FrontSide}}

<hr id=answer>

<div class=jp> {{furigana:Reading}} </div><br>
{{Meaning}}

Style

@font-face {
  font-family: kleeone;
  src: url("_kleeone.ttf");
}
@font-face {
  font-family: kso;
  src: url("_kso.ttf");
}

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}
.jp { font-size: 30px }
.win .jp { font-family: "MS Mincho", "ＭＳ 明朝"; }
.mac .jp { font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro"; }
.linux .jp { font-family: "Kochi Mincho", "東風明朝"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }

.klee { font-family: kleeone; font-size: 42px; }
.kso { font-family: kso; font-size: 64px; }

Conclusion

Ce qui importe c'est le fait de charger la police dans un "nom". Ce nom est réutilisable là où on a des noms de police dans la propriété de style font-family.

Vous n'êtes pas obligé de créer des styles et de manipuler le HTML pour l'appliquer. Vous pouvez par exemple vouloir la KleeOne pour tout ce qui est en japonais, et dans notre exemple on irait changer les polices prédéfinies dans les styles:

.win .jp { font-family: klee, "MS Mincho", "ＭＳ 明朝"; }
.mac .jp { font-family: klee, "Hiragino Mincho Pro", "ヒラギノ明朝 Pro"; }
.linux .jp { font-family: klee, "Kochi Mincho", "東風明朝"; }
.mobile .jp { font-family: klee, "Hiragino Mincho ProN"; }

Vous pouvez constater qu'on a ajouté notre police en premier de la liste. A savoir que le navigateur charge les polices dans l'ordre donné, il s'arrête dés qu'il a trouvé une police, sinon il continue. Cette technique nous permet de nous protéger en cas de problème avec la police klee, on aura malgré tout une police "standard" en fonction de l'appareil utilisateur.