Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2018-10-10 15:40:13

Destry
Moderator
From: Haut-Rhin
Registered: 2004-08-04
Posts: 3,931
Website

[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.


More trees, less people.

Offline

#2 2018-10-10 16:20:04

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 6,800
Website

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.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

#3 2018-10-10 16:37:34

Destry
Moderator
From: Haut-Rhin
Registered: 2004-08-04
Posts: 3,931
Website

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’. ;)


More trees, less people.

Offline

#4 2018-10-10 16:43:44

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,065
Website

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

#5 2018-10-10 16:48:23

Destry
Moderator
From: Haut-Rhin
Registered: 2004-08-04
Posts: 3,931
Website

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.


More trees, less people.

Offline

#6 2018-10-10 16:56:43

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,065
Website

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

#7 2018-10-10 17:16:48

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 6,800
Website

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.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

#8 2018-10-10 19:00:51

Destry
Moderator
From: Haut-Rhin
Registered: 2004-08-04
Posts: 3,931
Website

Re: [solved] Targeting lang via CSS

Okay. Thanks, both. Looks like [lang=fr] it is, then.


More trees, less people.

Offline

Board footer

Powered by FluxBB