Skip to content

[selectors] :lang for documents without content language and for elements of unknown language; consider :lang("") over :not(:lang("*")) #6915

Closed
@myfonj

Description

@myfonj

Brief questions to answer

  1. Is :lang("*") really valid selector? (Safari supports it and Chrome accepted Issue 1281157 to implement it.)
  2. How to address document that failed to define it's content language?
  3. Should be HTML <el lang=""></el> or equivalent <el lang></el> matched by CSS :lang("") or even :lang()? (Not yet proposed nor implemented.)
  4. Is erroneous "undefined" document language equivalent of <html lang=""> or is it something different?

Trivia

  1. 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 with lang="" attribute.
  2. 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.
  3. Undetermined language occur on any HTML document that does not have explicit lang attribute and does not come with content-language HTTP header or it's "deprecated nasty" <meta http-equiv> counterpart.
  4. For marking non-linguistic unknown language content it is advised to use lang="" 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 that lang() 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions