From 2a8eea6cfc71b6bbd223c0faa70b04b0bc4e1fef Mon Sep 17 00:00:00 2001 From: Patrick Schurig Date: Thu, 15 Oct 2026 07:15:46 +0200 Subject: [PATCH] =?UTF-8?q?style(i18n):=20un=20drapeau=20dans=20le=20s?= =?UTF-8?q?=C3=A9lecteur=20de=20langue,=20=C3=A0=20la=20place=20du=20?= =?UTF-8?q?=E6=96=87A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Material affiche son icône `translate` : un idéogramme 文 collé à un A. Elle dit « traduire », pas « vous êtes en français », et à la taille du bandeau on n'y voit qu'un symbole asiatique — remarque de Patrick, et elle est juste. Le bouton affiche désormais le drapeau de la langue courante et son code, comme sur etm-powersync.fr. Dans la liste déroulante, la langue courante passe en gras et en couleur d'accent : les trois lignes étaient identiques, on ne savait pas d'où l'on partait. Fait entièrement en CSS, sur `html[lang]` que mkdocs-static-i18n pose déjà par locale (`fr` à la racine, `de` sous /de/, `en` sous /en/). Aucun gabarit du thème n'est surchargé : rien à reprendre à chaque mise à jour de Material, et l'icône d'origine est masquée, pas supprimée. Trois points qui ne sont pas des détails : - Les drapeaux sont des SVG en `data:`, pas des emojis — un emoji drapeau ne se rend pas sous Windows, où Chrome affiche « FR » dans un carré. - Chaque drapeau porte un liseré : sans lui la bande blanche du français se perd dans le bandeau clair, et le noir de l'allemand dans le bandeau sombre. - Le `aria-label` du bouton (« Sélectionner la langue ») est inchangé et porte seul le sens pour les lecteurs d'écran ; il l'emporte sur le contenu, donc le « FR » du `::after` ne sera pas annoncé en double. Vérifié avant le push, faute de mkdocs installé en local : les trois pages réellement servies ont été rechargées dans Chrome headless avec cette feuille de style en remplacement, bandeau capturé dans les trois langues, plus la liste déroulante forcée ouverte pour contrôler les drapeaux et la mise en évidence. Co-Authored-By: Claude Opus 5 (1M context) --- README.md | 15 ++++++++++ docs/stylesheets/extra.css | 61 ++++++++++++++++++++++++++++++++++++-- 2 files changed, 73 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f4260ab..d4b0c83 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,21 @@ python3 scripts/gen_device_reference.py --src .plugins-src --docs docs \ --lang fr --locales fr,de,en --check ``` +### Le sélecteur de langue + +Material affiche son icône `translate` — l'idéogramme 文 collé à un A. Elle dit +« traduire », pas « vous êtes en français », et à la taille du bandeau on y voit un +symbole asiatique plutôt qu'une langue. Depuis le 2026-10-15, `stylesheets/extra.css` +la masque et affiche à la place **le drapeau de la langue courante plus son code**, +comme sur etm-powersync.fr. La langue courante est aussi mise en évidence dans la +liste déroulante, où les trois lignes étaient jusque-là identiques. + +Le drapeau se choisit sur `html[lang]`, que `mkdocs-static-i18n` pose déjà par locale. +**Aucun gabarit du thème n'est surchargé** — rien à reprendre à chaque mise à jour de +Material. Les drapeaux sont des SVG en `data:` (les emojis drapeaux ne se rendent pas +sous Windows) et le `aria-label` du bouton est inchangé : c'est lui qui porte le sens +pour les lecteurs d'écran, le code « FR » du `::after` restant décoratif. + ⚠️ `mkdocs build --strict` **échoue sur un simple avertissement**. C'est pour cela que `navigation.instant` est retiré de `theme.features` : il est incompatible avec le lien contextuel du sélecteur de langue de `mkdocs-static-i18n`. Le commentaire est dans diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 5798bf7..fed057c 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -108,7 +108,62 @@ .md-select__link[hreflang="de"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23FFCE00'/%3E%3Crect width='5' height='2' fill='%23DD0000'/%3E%3Crect width='5' height='1' fill='%23000000'/%3E%3C/svg%3E")} .md-select__link[hreflang="en"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23FFFFFF' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")} -/* le bouton du sélecteur : l'icône « traduction » de Material ne dit pas dans - quelle langue on est. On le laisse tel quel (c'est le gabarit du thème), mais - on lui donne de l'air pour qu'il ne colle pas à la recherche. */ +/* ────────────────────────────────────────────────────────────────────────── + LE BOUTON DU SÉLECTEUR — drapeau de la langue courante (2026-10-15) + + Material affiche son icône `translate` : un idéogramme 文 collé à un A. Elle + dit « traduire », pas « vous êtes en français », et à la taille du bandeau on + ne la lit pas — on y voit un symbole asiatique. Remplacée par le drapeau de la + langue courante plus son code, exactement comme sur etm-powersync.fr. + + Le drapeau se choisit sur `html[lang]`, que mkdocs-static-i18n pose déjà par + locale (`fr` à la racine, `de` sous /de/, `en` sous /en/) : aucun gabarit du + thème n'est surchargé, rien à maintenir à chaque mise à jour de Material. + + Le `aria-label` du bouton (« Sélectionner la langue ») est inchangé et porte + seul le sens pour les lecteurs d'écran : il l'emporte sur le contenu, donc le + « FR » décoratif du ::after n'est pas annoncé deux fois. + ────────────────────────────────────────────────────────────────────────── */ .md-header__option{margin-right:.2rem} + +.md-header__option .md-select>.md-header__button{ + display:flex;align-items:center;gap:.34rem; + width:auto;padding:.28rem .42rem;margin:.1rem; + border-radius:.15rem;opacity:1; + transition:background-color .2s; +} +.md-header__option .md-select>.md-header__button:hover{background:rgba(255,255,255,.1)} +/* l'icône `translate` du thème : on la masque, on ne la supprime pas */ +.md-header__option .md-select>.md-header__button>svg{display:none} + +.md-header__option .md-select>.md-header__button::before{ + content:"";flex:none;width:1.3rem;height:.92rem;border-radius:2px; + background-size:cover;background-position:center; + /* liseré : sans lui, la bande blanche du drapeau français se perd dans le + bandeau clair, et le noir du drapeau allemand dans le bandeau sombre */ + box-shadow:0 0 0 1px rgba(255,255,255,.45); +} +.md-header__option .md-select>.md-header__button::after{ + font-family:var(--md-code-font-family,monospace); + font-size:.62rem;font-weight:700;letter-spacing:.08em;line-height:1; +} + +html[lang="fr"] .md-header__option .md-select>.md-header__button::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23ED2939'/%3E%3Crect width='2' height='2' fill='%23FFFFFF'/%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3C/svg%3E")} +html[lang="de"] .md-header__option .md-select>.md-header__button::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23FFCE00'/%3E%3Crect width='5' height='2' fill='%23DD0000'/%3E%3Crect width='5' height='1' fill='%23000000'/%3E%3C/svg%3E")} +html[lang="en"] .md-header__option .md-select>.md-header__button::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23FFFFFF' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")} +html[lang="fr"] .md-header__option .md-select>.md-header__button::after{content:"FR"} +html[lang="de"] .md-header__option .md-select>.md-header__button::after{content:"DE"} +html[lang="en"] .md-header__option .md-select>.md-header__button::after{content:"EN"} + +/* dans la liste déroulante, la langue courante se distingue des deux autres : + sinon les trois lignes sont identiques et on ne sait pas d'où l'on part */ +html[lang="fr"] .md-select__link[hreflang="fr"], +html[lang="de"] .md-select__link[hreflang="de"], +html[lang="en"] .md-select__link[hreflang="en"]{font-weight:700;color:var(--md-accent-fg-color)} +/* les deux langues non courantes : drapeau légèrement en retrait, il reprend + ses couleurs au survol — même convention que sur le site */ +.md-select__link[hreflang]::before{opacity:.65;transition:opacity .2s} +.md-select__link[hreflang]:hover::before, +html[lang="fr"] .md-select__link[hreflang="fr"]::before, +html[lang="de"] .md-select__link[hreflang="de"]::before, +html[lang="en"] .md-select__link[hreflang="en"]::before{opacity:1}