Changement de langue

    Le menu de changement de langue est utilisé pour traduire des pages de contenus ou de services dans une langue autre que le français ou l’anglais.

    Exemple

    Quand l’utiliser

    Le menu de changement de langue s’utilise lorsque l’information diffusée s’adresse à des clientèles étrangères ou aux personnes nouvellement arrivées au Québec. Les orientations sur la traduction doivent être appliquées.

    Comment l’utiliser

    Tout contenu doit d’abord exister en français, qui est la langue officielle et de référence du Québec.

    Un ministère ou organisme qui souhaite diffuser des contenus traduits doit le faire dans le respect de sa politique linguistique.

    Seules les pages ciblées sont traduites. Le chemin de navigation depuis la page d’accueil ne l’est pas.

    La langue par défaut, dans le bandeau d’entête et la navigation générale, est toujours le français.

    Aucun mécanisme n’a été prévu afin d’inclure un menu de traduction dans le bandeau d’en-tête du PIV autre que les liens Français ou English pour basculer d’une langue à l’autre. Ce menu est donc contextualisé en haut de la page du contenu à traduire, sous le titre de niveau 1.

    Informations techniques

    Indications sur le contenu

    Les libellés de langues sont écrits dans leur propre langue (exemple : écrire « English » pour le libellé de traduction vers l’anglais). Le mot est écrit idéalement avec l’alphabet utilisé dans la langue (exemple: utiliser le Hangeul pour le libellé du mot « Coréen »).

    Les libellés sont en Open Sans en taille 14 px avec un interligne de 20 px.

    Positionnement

    Le menu de changement de langue est positionné directement sous le titre de niveau 1.

    Il y a un espacement de 32 px entre la décoration (soulignement rose) du titre de niveau 1 et le menu de changement de langue.

    Les libellés de langues sont disposés côte à côte. Si la taille de l’écran est trop étroite pour contenir tous les libellés sur une seule ligne, les libellés excédentaires peuvent s’ajouter sur une ligne supplémentaire.

    Ordre

    Le libellé « Français » est toujours en premier, suivi du libellé « English » si la page existe en anglais. Les autres libellés de langue sont ordonnancés selon l’importance des publics cibles visés par le contenu.

    Dimensions

    Le menu de changement de langue occupe 100 % de la largeur de la zone de contenu, dont la limite est 825 px de large.

    La hauteur est déterminée par le nombre de lignes sur lesquelles les libellés sont disposés, généralement entre 1 et 3 lignes, selon la largeur de l’écran. La hauteur d’un menu dont les libellés tiennent sur une ligne est de 56 px.

    Chaque libellé a un dégagement de 16 px à droite ainsi que de 2 px en haut et en bas. Si les libellés se retrouvent disposés sur plus d’une ligne, entre l’étiquette supérieure et l’étiquette inférieure.

    Espacements et dégagements

    Il y a 32 px au-dessus et en-dessous du menu de langue.

    Il y a 15 px entre les libellés et les lignes de 1 px qui se trouvent au-dessous et en-dessous du menu de changement de langue.

    Chaque libellé a un dégagement de 16 px à droite ainsi que de 2 px en haut et en bas. Si les libellés se retrouvent disposés sur plus d’une ligne, entre l’étiquette supérieure et l’étiquette inférieure.

    États

    Actif

    Le libellé de la page en cours est écrit en bleu foncé et en gras. Il est non cliquable et n’a donc pas d’état de survol.

    CSS du menu de changement de langue par défaut
    font-family: Open Sans
    font-weight: regular
    font-size: 14px
    line-height: 20px
    font-color: #095797
    border-top: 1px solid #D6DADF
    border-bottom: 1px solid #D6DADF

    CSS du menu de changement de langue sélectionné
    font-weight: bold
    font-color: #223654

    Au survol

    Au survol, les libellés deviennent soulignés.

    CSS du menu de changement de langue au survol
    text decoration: underline

    Au focus

    Au focus, les libellés ont un contour bleu clair.

    CSS du menu de changement de langue au focus
    outline: 2px solid #4a98d9
    outline-offset: 2px

    Dernière mise à jour : 14 décembre 2022