Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
[solved] Targeting lang via CSS
I want to set some rules for times when I use something like this: <span lang="fr">Oo-la-la lingo here</span>. I’m trying to follow what the Wild Web Weasel says here. So if I give those spans a class, say fr, do I simply use .fr:lang(fr) {magic:powder;}? Apparently you’re not supposed to target the lang attribute using attribute selectors.
Offline
Re: [solved] Targeting lang via CSS
Hi Destry,
I guess you would want to use italics for those words/phrases. I wonder if span[lang=fr] {font-style: italic;} would work.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [solved] Targeting lang via CSS
Yes, italics. But that’s not the problem. I could easily just use a class for that.
What I’m trying to make sure is that browsers interpret the text as a designated language too, regardless of combined with the presentation. I don’t know how to verify if the browsers is reading it right.
I’m not sure span[lang=fr] works, or not.
According to the second link I gave for attribute selectors, you can do this kind of thing for anchors: a[hreflang|="fr"], but otherwise language needs to be treated as they talk about in the first link, as I demoed. Beats me.
You might be right, or not. I don’t know. I need more than ‘I guess’ or ‘I wonder’. ;)
Offline
Re: [solved] Targeting lang via CSS
The lang="fr" attribute is already an instruction to the browser that the item in question is in French (see the docs). CSS would only affect the styling of that.
TXP Builders – finely-crafted code, design and txp
Offline
Re: [solved] Targeting lang via CSS
jakob wrote #314517:
The
lang="fr"attribute is already an instruction to the browser that the item in question is in French.
Yes, this understand. Not really my question.
CSS would only affect the styling of that.
Thus, what is the functional CSS to target it by the lang attribute? Like Colak proposed?
I guess I find the w3c’s docs very obtuse.
Offline
Re: [solved] Targeting lang via CSS
Apparently you’re not supposed to target the lang attribute using attribute selectors.
The mozilla docs I linked to above show an example using:
[lang="en-GB"]::before {
content: url('/media/examples/british-flag.png');
}to show a flag before a sentence in English.
And if you edit that example on the docs page to …
p:lang(en-GB)::before {
content: url('/media/examples/british-flag.png');
}it also shows the flag ;-)
TXP Builders – finely-crafted code, design and txp
Offline
Re: [solved] Targeting lang via CSS
Destry wrote #314515:
You might be right, or not. I don’t know. I need more than ‘I guess’ or ‘I wonder’. ;)
The validator accepts it as valid css.
css checked under direct input, “CSS level 3 + SVG”
[lang="fr"] {
font-style: italic;
}and
[lang=fr] {
font-style: italic;
}Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [solved] Targeting lang via CSS
Okay. Thanks, both. Looks like [lang=fr] it is, then.
Offline
Re: [solved] Targeting lang via CSS
Ha! I just realized (or re-realized?!) you can use Textile for language strings.
%[fr]Oo la-la !%[lang=fr] {font-style:italic;}Oo la-la !
Offline
Pages: 1