ETM-Schurig/powersync-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(i18n): un drapeau dans le sélecteur de langue, à la place du 文A

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Patrick Schurig 2026-10-15 07:15:46 +02:00
parent d9c663e84e
commit 2a8eea6cfc
2 changed files with 73 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -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

61
docs/stylesheets/extra.css
View File

@ -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}