Spørsmål:
Vi har i dag en nettside som kun er på norsk, men skal nå utvide med flere andre språk og gjøre den flerspråklig. Det er ønskelig å formatere/style deler av innholdet ulikt avhengig av hvilket språk brukeren har valgt. Hvordan gjør vi dette enklest mulig med CSS?
Svar:
For å formatere/style innholdet på nettsiden ulikt avhengig av hvilket språk brukeren har valgt, kan du nyttiggjøre deg språket som er satt i HTML-koden. Basert på dette er det mulig å skape ulik formatering/styling med CSS.
Det første du må gjøre er å sørge for at når språket byttes på nettsiden, så reflekteres dette også i HTML-koden. Dette er forøvrig også viktig med tanke på universell utforming og SEO. Språket som brukes på siden skal vises i attributtet «lang«, som du finner på HTML-taggen. I dette eksempelet er språket satt til norsk (altså er innholdet på siden på norsk).
<html lang="no">Når bruker endrer språket på siden så skal verdien av lang-attributtet endres. Som et eksempel, endres språket på siden til engelsk så ser koden slik ut:
<html lang="en">Hvordan formatere innhold ulikt med CSS, avhengig av valgt språk, på en flerspråklig nettside?
Så, hvordan kan vi utnytte dette når det kommer til formatering/styling? Jo, ved å basere oss på lang-attributtet!
I CSS har vi mulighet til å rettes oss inn mot ikke bare tagger, men også attributter og deres verdier. Det betyr, i dette tilfellet har vi:
- en tag (html).
- et attributt (lang).
- og verdiene er språkkoden for det valgte språket (no eller en).
I eksempelet nedenfor ser du hvordan dette kan brukes for å skape ulik bakgrunnsfarge på siden, avhengig av om språket er satt til norsk eller engelsk.
html[lang=no] {
background-color: rgb(223, 206, 223);
}
html[lang=en] {
background-color: rgb(121, 144, 121);
}På denne måten vil det være ganske enkelt å sørge for ulik formatering/styling avhengig av språket som er valgt av bruker.
Nå er dette eksempelet ganske enkelt, da vi kun formaterer bakgrunnen i dokumentet. Men, du kan nyttiggjøre deg lang-attributtet for hva det skulle være, ved å rette deg inn mot ønsket element dersom lang=x.
I nedenstående eksempel formateres p-taggen dersom språket er engelsk.
html[lang=en] p {
color: rgb(91, 91, 91)
}Vil du lære mer om HTML og CSS? Ta en titt på våre kurs i HTML og CSS.