Closed
Description
Brief questions to answer
- Is
:lang("*")
really valid selector? (Safari supports it and Chrome accepted Issue 1281157 to implement it.) - How to address document that failed to define it's content language?
- Should be HTML
<el lang=""></el>
or equivalent<el lang></el>
matched by CSS:lang("")
or even:lang()
? (Not yet proposed nor implemented.) - Is erroneous "undefined" document language equivalent of
<html lang="">
or is it something different?
Trivia
- It seems that there have never been a way for
lang()
functional pseudo-class to precisely target document without defined content language nor element sub-tree set as such withlang=""
attribute. - Selectors-4 draft introduces wildcard support (md) in string argument for matching "any" language of given script or region group (like
"*-Latn"
or"*-ch"
), opening possibility (loophole?) for matching any specified language value using:lang("*")
and with conjunction with negation pseudo-class opens possibility to use:not(:lang("*"))
for targeting elements that belong to "no specified language" from previous point. While plain"*"
value is not explicitly mentioned in the draft, this reportedly already works in current Safari. - Undetermined language occur on any HTML document that does not have explicit
lang
attribute and does not come withcontent-language
HTTP header or it's "deprecated nasty"<meta http-equiv>
counterpart. - For marking
non-linguisticunknown language content it is advised to uselang=""
attribute. While it is possible to target it with attribute selector ([lang=""]
), is does not seem like a right tool and introduces nesting / inheritance problems thatlang()
selector was created for.
Pseudo-code samples / introductory use cases
Sample 1: Document without content language
HTTP/2 200 OK
[no `content-language: xy,zz` HTTP header here]
<html [no `lang="xy"]` here>
<head>
[no `<meta http-equiv="content-language" content="xy,zz">` here]
</head>
<body>
[I want target this document.]
</body>
</html>
Sample 2: element with unknown language content
<html lang="xy">
<body>
<p>xyx:
<samp lang="">
000<em>111<var lang="xy">x</var></em>000
</samp>
</p>
[I want to target elements with digits and omit elements with letters.]
</body>
</html>
Problems
Inability to "legally" target specifically undetermined language document or element seems to be quite minor issue, since most CSS approaches tend to start with "common" defaults and progress to language specific with selector of higher specificity. Like
Sample 3: using specificity or order for refining defaults
/* pseudo example of common approach for setting language related styles */
/* hand-waving default */ :root { quotes: '"' '"' "'" "'"; }
/* specific known language */ :lang(x-whatever) { quotes "→" "←" "☛" "☚"; }
However this approach fails short if CSS' author needs to specifically address poorly marked-up document lacking any content language hint
Sample 4: using body:not(:lang("*"))
for styling "bad" document
/* Pseudo example "let's put a country flag representing language of the document on it's beginning" */
/* known languages */
body:lang(en-gb)::before { content: url(./flags-gb.svg) / "British English document: "; }
body:lang(en-us)::before { content: url(./flags-us.svg) / "American English document: "; }
/* [etc] */
/* default for "unknown" */
body::before { content: url(./flags-specified-but-unknown.svg) / "Content language of this document is specified but not included in style sheets - please contact style maintainer. "; font-size: small; color: GrayText; }
/* "error message" for "unspecified". topic of this issue */
body:not(:lang("*"))::before { content: url(./flags-unspecified-error.svg) / "This document appears to have no content language specified. If you are it's maintainer fix it ASAP, please. "; }`
body:not(:lang("*")) { background-color: var(--bg-error, Canvas); color: var(--fg-error, GrayText); font-family: cursive; }
(Think Sample 3 above. Also notice that samples use CSS features not yet widely implemented - pseudo element alternative texts and system colors - but those are not related for the issue in question.)
Links, resources and notes
- my initial SO question - thanks onkar ruikar for answer, analysis, discussion, workaround and chromium bugreport
- tweet
- https://www.w3.org/International/questions/qa-css-lang
- https://www.w3.org/International/questions/qa-no-language
- "unknown":
lang=""
/xml:lang="und"
- "known but non-linguistic":
lang="zxx"
;
- "unknown":
- https://www.w3.org/International/articles/language-tags/
- rfc2070: Internationalization of the Hypertext Markup Language