Forum d'entraide PHPFrance

Salut à tous!

Parfois, on est amené à afficher un lien pointant vers une page ou un site rédigés dans une langue différente.

Par souci d'accessibilité aux personnes susceptibles d'avoir un handicap linguistique et pour éviter, par conséquent, un clic frustrant en même temps qu'inutile, il est recommandé d'utiliser l'attribut hreflang de l'élement a.
Il est tout à fait possible d'afficher le code de la langue dans laquelle est rédigé le contenu du lien, et ce sans toucher au code HTML, grâce aux CSS.

CSS prévoit l'emploi de pseudo-éléments comme :before et :after.

Pour afficher le code de la langue après l'intitulé du lien et avant la fin de l'élément a, on récupère la valeur de l'attribut hreflang au moyen de la propriété content: attr(), les parenthèses enfermant le code de la langue.

Pour faire plus joli, on entourera le code de la langue récupéré de parenthèses, le tout précédé d'un espace insécable. C'est tout à fait possible, puisque la propriété content admet comme valeur une chaîne de caractères saisie entre guillemets, l'espace insécable étant saisie sous forme de son code hexadécimal (à 6 chiffres) conforme à la norme ISO 10646, précédé d'un antislash.

Autrement dit, la feuille de style comportera la déclaration suivante (on utilisera également le sélecteur d'attributs afin d'exclure les éléments a dépourvus d'attribut hreflang):
Ainsi, le code généré ressemblera à ça:

Voici un lien vers le W3C (en).

Seule ombre au tableau, Internet Explorer n'implémente pas les pseudo-éléments :before et :after, même dans sa version 7.

Dans ce cas, pour donner l'illusion aux inconditionnels d'IE tout en évitant les doublons aux autres navigateurs, il existe les commentaires conditionnels. Le code HTML ressemblera finalement à ça:
Les navigateurs autres qu'IE (Firefox, Opera, Safari...) n'interpréteront pas le bout de code ajouté (de <!--[ à ]-->), comme si c'était un commentaire HTML.

Excellente astuce ! Merci, Victor ! =D>

Et vivement qu'IE reconnaisse les :before et :after

Heu... Si on doit mettre un commentaire conditionnel ça signifie qu'il faut quand-même faire apparaître le "(en)" dans la source. Dans ce cas, autant ne pas utiliser de CSS, et ne pas mettre de commentaire conditionnel mais directement "(en)" à la suite du lien. Ou alors on n'utilise que la CSS et IE va se faire voir. Mais les deux en même temps, aucun intérêt à mon avis...

Heu... Si on doit mettre un commentaire conditionnel ça signifie qu'il faut quand-même faire apparaître le "(en)" dans la source. Dans ce cas, autant ne pas utiliser de CSS, et ne pas mettre de commentaire conditionnel mais directement "(en)" à la suite du lien. Ou alors on n'utilise que la CSS et IE va se faire voir. Mais les deux en même temps, aucun intérêt à mon avis...

Je n'oblige personne à employer les commentaires conditionnels en plus de CSS. Ce n'était que pour montrer les richesses insoupçonnées de CSS 2 et, une fois de plus, les lacunes du navigateur détenteur des plus grosses parts de marché.

Complétons l'astuce.

Il est possible d'afficher certains codes de langue et pas d'autres. Pour cela, il suffit de faire suivre la déclaration CSS indiquée plus haut par celle-ci, qui va annuler l'effet de la première pour un(des) code(s) langue(s) qu'on aura choisi(s) (par exemple, "fr"):
On emploie le sélecteur d'attribut complété de la valeur concernée par la déclaration; autrement dit, la déclaration ne concerne que les éléments a ayant un attribut hreflang dont la valeur est "fr".

Je ne vous présente plus le pseudo-élément :after.

Quant à la propriété content, la valeur "normal" correspond à son comportement par défaut, ce qui veut dire qu'aucun contenu ne sera généré.

Ainsi, le code suivant
sera affiché comme suit:

Voici un lien dans la même langue que le reste de la page.

Ce peut être utile lorsqu'on utilise un CMS qui renseigne quasi systématiquement la langue des liens, comme DotClear. Quant à Internet Explorer, c'est comme si de rien n'était, bien entendu.

Tiens du coup histoire de faire le tour de la question, je complète avec une solution alternative : on peut aussi utiliser JavaScript.

Une fonction tout ce qu'il y a de plus cross-browser : hreflang.js

function afficher_hreflang(dom, ignore)
{
    var links = dom.getElementsByTagName('A');
    for (var i=0; i<links.length; i++) {
        var lang = links[i].getAttribute('hreflang');
        if (lang && lang != ignore) {
            links[i].innerHTML += ' <span class="lang">('+lang+')</span>';
        }
    }
}

Il suffit d'insérer ce bout de script, et d'ajouter soit dans l'entête window.onload = function(){ afficher_hreflang(document) }; soit juste avant </body> afficher_hreflang(document);.

Et on peut simplement ajouter en 2e paramètre la langue de la page (par exemple , "fr") pour ignorer les liens de cette langue (ne pas faire apparaître la langue).

Bien entendu, il faut garder à l'esprit que cette solution alternative pose un problème d'accessibilité aux utilisateurs de navigateurs qui ignorent le JavaScript ou sont paramétrés de façon à désactiver JavaScript.