Diakritikós est une méthode frugale pour afficher un site en plusieurs langues grâce à JavaScript.
Diakritikós fonctionne avec les principaux navigateurs, y compris Internet Explorer à partir de la version 9. Quand le navigateur ne supporte pas les méthodes mises en œuvre ou si JavaScript n'est pas disponible, la langue par défaut s'affiche.
Diakritikós utilise deux méthodes :
- en ligne ;
- par bloc.
Chaque texte à traduire doit comprendre un identifiant associée à la classe translate-d10s-text pour les textes ou translate-d10s-img pour les images.
Diakritikós recourt à l'attribut data-text-[langue] où langue correspond à la norme Iso 639-1 (https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). Cet attribut peut être appelé soit en ligne, soit par bloc.
L'appel en ligne s'écrit sous la forme...
<p id="days" class="translate-d10s-text" data-text-es="Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado" data-text-fr="Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
L'appel par bloc s'écrit sous la forme...
<p id="days">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
<script>
document.getElementById('days').setAttribute('data-text-es', 'Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado');
document.getElementById('days').setAttribute('data-text-fr', 'Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi');
</script>
Les deux méthodes peuvent être utilisées en même temps. Par exemple, la traduction dans la langue de Molière peut s'écrire en ligne et la traduction dans la langue de Cervantès par bloc.
Quand une traduction est indisponible ou incomplète, le texte par défaut, en dur, s'affiche.
Les attributs alt ou title des images sont traduits avec la méthode data-image-[langue] : la traduction doit être appelée dans le parent.
Des textes d'alertes peuvent être utilisés. fallback correspond à la langue par défaut.
Les sinogrammes et autres alphabets cyrilliques fonctionnent correctement.
Il est possible (d'essayer) de reconnaître la langue par défaut du navigateur. Ainsi, au chargement de la page, la langue de l'utilisateur s'affichera. Si la langue est incorrecte, l'utilisateur pourra la modifier d'un clic de souris. Cette reconnaissance, quelque peu hasardeuse (!), est désactivable en attribuant la valeur false à onLoadDiakritikos.
Dans le fichier d'exemple, nous proposons à l'utilisateur de choisir sa langue, uniquement si son navigateur supporte les propriétés mises en œuvre.
(Il est déconseillé de recourir à un drapeau pour symboliser une langue : par exemple, on ne parle pas le français qu'en France !)
Il aurait été intéressant de prévoir une écriture de droite à gauche pour l'arabe, l'hébreu, l'ourdou et le pachtoune, mais nous n'avons pas (encore !) trouvé de solution satisfaisante.
<script>
var rtlLangs = ['ar', 'he', 'ps', 'ur'];
...
function d10scheckRtlLang(d10sLang) {
for (i = 0; i < rtlLangs.length; i++) {
if (rtlLangs[i] === d10sLang) {
return true;
}
}
}
...
if (d10scheckRtlLang(d10sLang)) {
document.getElementById(item).setAttribute('dir', 'rtl');
} else {
document.getElementById(item).setAttribute('dir', 'ltr');
}
</script>
La méthode querySelectorAllaurait pu être préférée, mais elle semble nettement plus lente. Nous la présentons néanmoins comme deuxième exemple.
- Using data attributes
- The element.dataset API
- Don't use data attributes to find HTML elements with JS
Diakritikós signifie en grec "qui distingue".
Onze caractères séparent le d du s.
Copyright © 2016 384400 william.top@384400.com
This work is free. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2, as published by Sam Hocevar. See http://www.wtfpl.net/ for more details.