2 Associés est une agence web de Montréal spécialisée en développement web et mobile, stratégie de contenu SEO, SEM et les technologies langagières.

Vous voulez discuter?

Gestion des images dans un contexte multilingue

2 Associés développement web et mobile à Montréal

Solutions simples pour la gestion des images, contenant du texte ou non, dans un contexte de site web multilingue.

Lors de mes mandats en intégration Web, je suis souvent confronté aux contenus multilingues. Il m’arrive de devoir intégrer des images, avec ou sans texte, pour une langue spécifique, et dans ce cas je dois évaluer les options qui me sont offertes dépendemment du délais et/ou technologie en place. Dans tous les cas, les solutions sont multiples et c’est au moment de la production que je décide de la meilleure option. Personnellement, l’attribut lang est possiblement la meilleure pratique à adopter.

  • Utilisation d’un attribut lang

    Certaines plateformes de blogue ou CMS vont utiliser cet attribut sur l’élément html avec une valeur :

    <html lang="en-CA">

    Dans ce cas, il sera facile de retrouver cet élément grâce au sélecteur CSS :lang(en-CA) pour ensuite formuler la déclaration CSS spécifique pour celui-ci :

            html:lang(en-CA) {
            	background-image: url("fichier-en-CA.png");
            }
            html:lang(fr-CA) {
            	background-image: url("fichier-fr-CA.png");
            }
  • Utilisation d’une class

    Similaire à l’attribut précédent. Par expérience je vois celui-ci principalement sur l’élément body avec une valeur :

            <body class="en-CA">

    Toujours avec le sélecteur CSS .en-CA, je retrouve l’élément pour formuler la déclaration CSS :

            .en-US {
            	background-image: url("fichier-en-CA.png");
            }
            .fr-CA {
            	background-image: url("fichier-fr-CA.png");
            }
  • Utilisation d’un id

    Similaire à l’utilisation de l’attribut class mais cette fois avec un id. J’ai rarement vu cette façon de faire dans les systèmes modernes et je préfère de loin l’attribut lang à id :

            <body id="en-CA">

    Toujours avec le sélecteur CSS #en-CA, je retrouve l’élément pour formuler la déclaration CSS :

            #en-US {
            	background-image: url("fichier-en-CA.png");
            }
            #fr-CA {
            	background-image: url("fichier-fr-CA.png");
            }
  • Attribut lang ou class à l’intérieur d’un élément

    Cette solution est possiblement la moins élégante mais parfois mon rôle est limité à intégrer du code html dans un éditeur, par exemple un client qui utilise un SaaS ne pourra pas accéder au code source de l’application pour ajouter un attribut lang, une class ou un id.

            <div lang="en-CA">
            <div class="en-CA">

    Toujours avec les sélecteur CSS :lang(en-CA) ou .en-CA, je retrouve l’élément pour formuler la déclaration CSS :

            div:lang(en-CA) {
            	background-image: url("fichier-en-CA.png");
            }
            div:lang(fr-CA) {
            	background-image: url("fichier-fr-CA.png");
            }
    
            div.en-CA {
            	background-image: url("fichier-en-CA.png");
            }
            div.fr-CA {
            	background-image: url("fichier-fr-CA.png");
            }

Commentez cet article

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles reliés