Aujourd’hui, petit coup de main avec Articulate Storyline. Comment régler le problème de rendu des polices avec lors d’un export en HTML5 ?
Tout d’abord, précisons le problème. Je parle ici du problème de rendu des polices personnalisés sur les champs de texte qui affichent des variables. C’est un problème connu par le support Articulate qui s’applique à Storyline 2 et 3, mais, qui n’a pas de solutions actuellement.
Le problème
C’est un problème de rendu de police qui n’existe pas pour les champs de texte classiques, et qui ne se produit pas avec l’export standard, en Flash. En effet, dans ces deux cas, les polices sont en fait « embarquées » dans le module à l’export. De la même manière que les ressources externes du module par exemple.
Seulement, pour l’export HTML5, si votre champ de texte affiche une variable, vous verrez que la police ne s’affiche pas correctement : la police que vous avez choisie est remplacée par une police standard de la machine qui visionne le module, et, très souvent, la police apparaît en très petit (voir image ci-dessous). Le cas le plus fréquent où j’ai rencontré ce problème est dans l’affichage des résultats d’une évaluation, qui fait appel aux variables pour afficher le score de l’apprenant.
Autant vous le dire tout de suite, vous ne pourrez en l’état pas régler ce problème via Storyline, à moins que les équipes d’Articulate n’aient proposé une résolution du problème entre temps.
Par contre, il existe un moyen en allant modifier directement un fichier CSS dans l’export. En effet, une fois votre module exporté au format HTML5, il est possible d’aller modifier les fichiers CSS générés. Le fichier CSS gérant l’apparence du module en HTML5, vous pourrez modifier l’apparence de la police sur votre champ de texte. Cela requiert une petite modification du code CSS, donc, ce sera donc plus facile si vous avez des connaissances en HTML et CSS.
Le contournement de la taille de police
Vous devrez utiliser l’explorateur de code pour afficher dans la page l’élément HTML qui pose problème, en l’occurrence le champ de texte. L’explorateur de code s’affiche avec Ctrl+Shift+I sur Firefox, Ctrl+F12 dans Internet Explorer et Chrome.
Vous allez ensuite repérer la classe CSS de l’élément en question, indiqué dans l’attribut class= »nom-de-classe » (voir ci-dessous). Attention, pour être sûr de ne modifier que l’élément posant problème, on va préciser notre déclaration un peu plus : on va cibler aussi l’élément parent de notre champ de texte.
Une fois que vous avez le nom de l’élément champ de texte et de son parent, vous pouvez aller modifier le fichier CSS nommé player.css dans votre export. C’est lui qui se charge du rendu graphique des contenus du module. Il est situé dans votre export dans le dossier /mobile.
Descendez en bas du fichier et modifiez la propriété de police pour l’élément avec le CSS font-size. Mettez la police à 200%, 300% ou 400% par exemple.
Et voilà, la taille de police est réglée !
La taille de la police est réglée, c’est très bien. Maintenant, voyons maintenant comment on peux régler le problème de police.
Remettre la bonne police
Ici, on fait appel à une méthode de CSS un peu plus avancée. Voici le processus étape par étape :
- Mettre vos polices au format web grâce à un convertisseur de police (exemple : https://www.web-font-generator.com/)
- Mettre ses polices dans un dossier dans votre export Storyline. Je recommande de mettre le dossier des polices au même niveau que le fichier player.css, soit dans /mobile/font.
- Modifier de nouveau le fichier player.css pour :
- définir votre nouvelle police,
- mettre en forme le champ de texte avec la police nouvellement définie.
Et voilà, si tout est bien réglé, la police est maintenant prise en compte. Ce processus peut demander un peu de débuggage, intégrer les polices en CSS étant un petit peu plus complexe que la modif détaillée plus haut.
Attention, les méthode de modification du CSS présentées ici seront écrasées si vous republiez votre module ! En effet, à la publication Storyline régénère des nouveaux fichiers et les anciens ne sont pas conservés. Donc, vous devrez copier-coller vos modifs et les ré-intégré à chaque nouvelle publication.
J’espère que ce petit contournement d’un problème connu (vu de nombreuses fois sur les forums Articulate) pourra vous aider !