Document Metadata and CSS Selectors

W3C Cascading Style Sheets Working Group,

Hello. I would like to share some interesting developments pertaining to HTML document metadata and CSS selectors.

While working on “document services” for HTML documents, e.g. real-time fact-checking and reasoning-checking, I realized that the challenge needed solutions which didn’t require having to specify how document authors should use markup to indicate URI-addressable facts or claims. I found that, by using CSS-based syntax in document metadata, document authors could describe HTML documents in new and useful ways.

Here are some ways that document authors might use markup to indicate URI-addressable fact or claims:


  1.  new markup elements (e.g. <fact id="..."> or <claim id="...">)
  2.  extensible markup elements (e.g. <ext:fact id="..." xmlns:ext="...">)
  3.  class names (e.g. <span id="..." class="fact">)
  4.  role attribute (e.g. <span id="..." role="fact">)
  5.  EPUB type attribute (e.g. <span id="..." epub:type="fact">)

For each approach, there is a way of selecting the facts or claims in a document:


  1.  fact
  2.  @namespace ext url(…); ext|fact
  3.  .fact
  4.  [role~='fact']
  5.  @namespace epub url(…); [epub|type~='fact']

Toward the topic of document metadata, one could indicate which document elements in a document were facts or claims with metadata resembling:


  1.  <meta name="fact-checking-selector" content="fact" />
  2.  <meta name="fact-checking-selector" content="@namespace ext url(…); ext|fact" />
  3.  <meta name="fact-checking-selector" content=".fact" />
  4.  <meta name="fact-checking-selector" content="[role~='fact']” />
  5.  <meta name="fact-checking-selector" content="@namespace epub url(…); [epub|type~='fact']" />

The combination of CSS namespace declarations with CSS selectors is a custom CSS-based syntax. The ability to combine namespace declarations with selectors into one-line strings of use for document metadata made CSS syntax appealing compared to XPath.

For the “document services” challenge, there is also a need to be able to use document metadata to indicate the names of attributes which might be on some of the selected elements, these attributes having values of type URL. This started to suggest use of an XPath-based syntax, instead, to select attributes’ values from context nodes. However, mindful of the need for the expressiveness for namespaces, I improvised more CSS-based syntax for indicating an attribute’s value using the attr() function:


  1.  attr(something url)
  2.  @namespace ext url(...); attr(ext|something url)

Here is an example from the ongoing “document services” work which showcases some document metadata utilizing CSS-based syntax:

<html>
  <head>
    <meta name="fact-checking-selector" content="[role~='fact']" />
    <meta name="fact-checking-custom-resource" content="attr(data-fact-checking url)" />
    <link rel="fact-checking-service-provider" href="https://www.wikidata.org/wiki/Special:FactCheck" />
  </head>
  <body>
    <span id="fact-123" role="fact">HTML and MathML content</span>
    <div id="fact-124" role="fact">HTML and MathML content</div>
    <math id="fact-125" role="fact" data-fact-checking="custom-service.php">MathML content</math>
  </body>
</html>

The above example uses document metadata to indicate that, for document elements of role fact, if they bear an attribute of data-fact-checking, utilize its value to obtain an inline or external resource or service, otherwise utilize the declared service provider for fact-checking.

Here is another example:

<html>
  <head>
    <meta name="reasoning-selector" content="math.proveable" />
    <meta name="reasoning-custom-resource" content="attr(data-proof url)" />
    <link rel="reasoning-service-provider" href="https://www.wikidata.org/wiki/Special:Reasoning" />

    <script id="inline-proof-124" type="...">...</script>
  </head>
  <body>
    <math id="fact-123" class="proveable">MathML Content</math>
    <math id="fact-124" class="proveable" data-proof="#inline-proof-124">MathML Content</math>
    <math id="fact-125" class="proveable" data-proof="external-proof-125.php">MathML Content</math>
  </body>
</html>

The above example uses document metadata to indicate that, for <math> elements of class proveable, if they bear an attribute of data-proof, utilize its value to obtain an inline or external resource or service, otherwise utilize the declared service provider for providing reasoning.

For those interested, evolving documents on the topics of argumentation markup and “document services” are available at:

https://www.w3.org/community/argumentation/wiki/Argumentation_Markup
https://www.w3.org/community/argumentation/wiki/Argumentation_Markup_(Further_Discussion)

The combination of document metadata and CSS-based syntax was an exciting development which occurred while considering metadata-based approaches for “document services” (e.g. real-time fact-checking and reasoning-checking) which did not involve having to specify document markup conventions.

Hopefully, combinations of document metadata and CSS-based syntax can be of use for other projects as well.

Thank you. I welcome any feedback, comments, questions, or suggestions on these ideas.


Best regards,
Adam Sobieski

Received on Wednesday, 20 January 2021 00:44:20 UTC