Skip to content

Instantly share code, notes, and snippets.

@PhilippeVay

PhilippeVay/language-indications.css

Last active March 21, 2023 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PhilippeVay/dc8d19166340731a0ac75952fc01e5cd to your computer and use it in GitHub Desktop.
Save PhilippeVay/dc8d19166340731a0ac75952fc01e5cd to your computer and use it in GitHub Desktop.
Download ZIP
Stylus script: display page language and highlights (and count) changes of languages in content for 2 dozens of lang codes.
Raw
language-indications.css
/* ==UserStyle==
@name Language indications
@namespace github.com/openstyles/stylus
@version 0.1.0
@description Displays page language and highlights changes of languages in content for 2 dozens of lang codes. Display total number of changes.
@author Philippe Vayssière
==/UserStyle== */
/* Count of [lang] in the sidebar is adapted from a Stylus script made by Access42. Hat tip to them! */
:root {
--c-lang: white;
--bg-lang: green;
--bg-lang-error: darkred;
--bd-lang: green;
}
/* [lang] of page */
html::before {
display: block;
padding-left: 2rem;
line-height: 2;
font-size: 2em;
font-weight: bold;
color: var(--c-lang);
}
html[lang]::before {
content: " 📄 Page language: " attr(lang);
background-color: var(--bg-lang);
}
/* Lack of [lang] on <html> (page) */
html:not([lang])::before {
content: "ERROR No default language defined (on <html>)";
position: relative;
z-index: 123456;
background-color: var(--bg-lang-error);
}
/* Also display the error in the sidebar */
html:not([lang]) {
--nolang: "no lang (ERROR)";
}
html[lang] {
--nolang: "";
}
/* [lang] in content */
/* langSame counts the elements having the same value of lang than page (html element) */
/* langForeign counts the changes of language (elements having a different value than page) */
html {
counter-reset: langSame langForeign;
}
/* Default: value not listed below, we can't determine if it's different from page */
[lang]:not(html) {
/* border: 5px solid var(--bd-lang); */
counter-increment: langSame;
}
/* Determines if it's a change of language from page (or parent) */
:lang(fr) [lang]:not([lang="fr"]),
:lang(lb) [lang]:not([lang="lb"]),
:lang(en) [lang]:not([lang="en"]),
:lang(de) [lang]:not([lang="de"]),
:lang(es) [lang]:not([lang="es"]),
:lang(pt) [lang]:not([lang="pt"]),
:lang(ar) [lang]:not([lang="ar"]),
:lang(fa) [lang]:not([lang="fa"]),
:lang(ti) [lang]:not([lang="ti"]),
:lang(sq) [lang]:not([lang="sq"]),
:lang(ka) [lang]:not([lang="ka"]),
:lang(ru) [lang]:not([lang="ru"]),
:lang(sr) [lang]:not([lang="sr"]),
:lang(tr) [lang]:not([lang="tr"]),
:lang(zh) [lang]:not([lang="zh"]),
:lang(ja) [lang]:not([lang="ja"]),
:lang(fi) [lang]:not([lang="fi"]),
:lang(no) [lang]:not([lang="no"]),
:lang(sv) [lang]:not([lang="sv"]),
:lang(pl) [lang]:not([lang="pl"]),
:lang(nl) [lang]:not([lang="nl"]),
:lang(da) [lang]:not([lang="da"]),
:lang(uk) [lang]:not([lang="uk"]),
:lang(it) [lang]:not([lang="it"]) {
counter-increment: langForeign;
}
/* Display that it's a change of language */
:lang(fr) [lang]:not([lang="fr"])::before,
:lang(lb) [lang]:not([lang="lb"])::before,
:lang(en) [lang]:not([lang="en"])::before,
:lang(de) [lang]:not([lang="de"])::before,
:lang(es) [lang]:not([lang="es"])::before,
:lang(pt) [lang]:not([lang="pt"])::before,
:lang(ar) [lang]:not([lang="ar"])::before,
:lang(fa) [lang]:not([lang="fa"])::before,
:lang(ti) [lang]:not([lang="ti"])::before,
:lang(sq) [lang]:not([lang="sq"])::before,
:lang(ka) [lang]:not([lang="ka"])::before,
:lang(ru) [lang]:not([lang="ru"])::before,
:lang(sr) [lang]:not([lang="sr"])::before,
:lang(tr) [lang]:not([lang="tr"])::before,
:lang(zh) [lang]:not([lang="zh"])::before,
:lang(ja) [lang]:not([lang="ja"])::before,
:lang(fi) [lang]:not([lang="fi"])::before,
:lang(no) [lang]:not([lang="no"])::before,
:lang(sv) [lang]:not([lang="sv"])::before,
:lang(pl) [lang]:not([lang="pl"])::before,
:lang(nl) [lang]:not([lang="nl"])::before,
:lang(da) [lang]:not([lang="da"])::before,
:lang(uk) [lang]:not([lang="uk"])::before,
:lang(it) [lang]:not([lang="it"])::before {
content: "Language indication: " attr(lang);
position: relative;
z-index: 123456;
display: block;
line-height: 1.5;
color: var(--c-lang);
background-color: var(--bg-lang);
}
/* Case without a page language */
html:not([lang]) [lang]::before {
content: "Language indication: " attr(lang);
position: relative;
z-index: 123456;
display: block;
width: fit-content;
line-height: 1.5;
color: var(--c-lang);
background-color: var(--bg-lang);
}
/* "Sidebar": display informations about lang (page, total of changes and total number changes or not) */
html::after {
content: "LANGUAGE\A📄 Page: " attr(lang) " " var(--ln) var(--nolang) "\A\A 🌍 " counter(langForeign) " changes of language\A(" counter(langSame) " other uses of\Alanguage in content)\A";
position: fixed !important;
top: 300px !important;
right: 0 !important;
z-index: 123456 !important;
width: 12em !important;
border: 5px solid #fff;
border-right: 0;
padding: 15px !important;
white-space: pre !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 20px !important;
font-weight: bold;
color: #fff !important;
background: #10415E !important;
}
/* (human) Name of some languages */
html { --ln: 'AA'; }
html:lang(fr) { --ln: '(français)'; }
html:lang(lb) { --ln: '(lëtzebuergesch)'; }
html:lang(en) { --ln: '(english)'; }
html:lang(de) { --ln: '(deutsch)'; }
html:lang(es) { --ln: '(español)'; }
html:lang(pt) { --ln: '(português)'; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment