Styling Markup for Adaptation and Personalization

[AdamSobieski]

Introduction

This issue expands upon ideas from #12 and upon technical features broached in the examples from issues #14 and #15 pertaining to styling markup that is intended not for layout, rendering, and display, but for processing by software components.

Elements in markup intended to be consumed by software components other than Web browsers can also have properties. These properties, however, instead of pertaining to visual layout, rendering, or animation, might serve as cues, hints, notes, or instructions for these software components. For example, these software components could create prompts or agentic workflows for artificial-intelligence systems to utilize while generating output, performing adaptation and personalization.

Instead of using markup attributes to express these properties, one could use style.

Examples

p.introduction
{
    summarization-hint: important;
}

p.introduction term.topic
{
    ...
}

term.keyword
{
    ...
}

term.latin
{
    language: lat;
    translation-hint: never;
}

term.essential
{
    rephrasing-hint: never;
    utilization-hint: important;
}

<section>
  <header>
    <h2>Giant Redwoods</h2>
    <communication-objectives>
      <ul>
        <li>...</li>
        <li>...</li>
      </ul>
    </communication-objectives>
  </header>
  <p class="introduction">
    <term class="keyword latin essential topic">Sequoiadendron giganteum</term>,
    also known as the giant sequoia, giant redwood, Sierra redwood, or
    Wellingtonia, is a species of coniferous tree, classified in the family
    <term class="keyword latin essential">Cupressaceae</term> in the subfamily
    <term class="keyword latin essential">Sequoioideae<term>.
  </p>
  ...
</section>

Concept-granular Selection

In theory, one could formulate means to express selecting contents beyond those in the markup structure, for example to style "concepts" that occur in the text content.

p.introduction::concept('photosynthesis') { ... }

p.introduction::concept(url('https://www.wikidata.org/entity/Q11982')) { ... }

As envisioned, this sort of styling, a concept() pseudo-element, would be processed by software components creating prompts or agentic workflows. These prompts or agentic workflows would be able to provide artificial-intelligence systems with instructions about generating output pertaining to specified concepts that occur within specified portions of text.

Natural-language Property Values

In theory, in addition to style properties having values drawn from enumerated sets, scalars (including with units), or other domain-specific syntaxes, properties could have values of natural-language text strings for use by those software components creating prompts or agentic workflows for artificial-intelligence systems.

Additive Cascade

An interesting and useful concept for these broader applications of styling markup is additive cascade. With additive cascade, one could coalesce and aggregate multiple values for properties into collections as multiple selectors matched.

Attaching Semantics to Markup with Style

With additive cascade, one could use style selectors to additively attach semantic content to elements.

Example 1

@namespace deo url('http://purl.org/spar/deo');
@namespace doco url('http://purl.org/spar/doco');
@namespace rdf url('http://www.w3.org/1999/02/22-rdf-syntax-ns#'); 

p
{
    about: triple(self(), url(rdf|'type'), url(doco|'Paragraph')) !add;
}

p.introduction
{
    about: triple(self(), url(rdf|'type'), url(deo|'Introduction')) !add;
    about: triple(self(), url('http://example.org#property'), literal('This is the introduction.', 'en')) !add;
}

p.important
{
    about: triple(self(), url('http://example.org#property'), literal('This is important.', 'en')) !add;
}

<p class="introduction important">...</p>

@prefix deo: <http://purl.org/spar/deo> .
@prefix doco: <http://purl.org/spar/doco> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix example: <http://www.example.org#> .

[ rdf:type doco:Paragraph , deo:Introduction ;
  example:property "This is the introduction"@en , "This is important."@en ] .

Example 2

Here is a more complex, intricate example with a bunch more possibilities shown. This example illustrates how one might go about using CSS selectors to transform a simple HTML table into semantic content. The example uses a document-about property to attach semantic content to a document-level graph, rather than storing it in per-element graphs.

@namespace rdf url('http://www.w3.org/1999/02/22-rdf-syntax-ns#');
@namespace example url('http://www.example.org#');

table.data-1
{
    counter-reset: row;

    &:not(:has(tr))
    {
        document-about: triple(self(), url(example|'hasData'), url(rdf|'nil')) !add;
    }

    &:has(tr)
    {
        document-about: triple(self(), url(example|'hasData'), blank('list')) !add;
    }

    & tr:first-of-type
    {
        document-about: triple(blank('list'), url(rdf|'first'), self()) !add;
    }

    & tr:last-of-type
    {
        document-about: triple(self(), url(rdf|'rest'), url(rdf|'nil')) !add;           
    }

    & tr as --r
    {
        counter-increment: row;

        document-about: triple(self(), url(rdf|'first'), blank(counter(row))) !add;

        & + tr
        {
            document-about: triple(var(--r), url(rdf|'rest'), self()) !add;
        }

        & td:nth-child(1)
        {
            document-about: triple(blank(counter(row)), url(example|'hasPart1'), content()) !add;
        }

        & td:nth-child(2)
        {
            document-about: triple(blank(counter(row)), url(example|'hasPart2'), content()) !add;
        }

        & td:nth-child(3)
        {
            document-about: triple(blank(counter(row)), url(example|'hasPart3'), content()) !add;
        }

        & td:nth-child(4)
        {
            document-about: triple(blank(counter(row)), url(example|'hasPart4'), content()) !add;
        }
    }
}

<table id="t1" class="data-1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

@prefix example: <http://www.example.org#> .

<#t1> example:hasData (
   [ example:hasPart1 "1" ; example:hasPart2 "2" ; example:hasPart3 "3" ; example:hasPart4 "4" ]
   [ example:hasPart1 "5" ; example:hasPart2 "6" ; example:hasPart3 "7" ; example:hasPart4 "8" ]
   [ example:hasPart1 "9" ; example:hasPart2 "10" ; example:hasPart3 "11" ; example:hasPart4 "12" ]
) .

Referencing Content-transformation Stylesheets with Metadata

Perhaps Web developers would desire to be able to separate and reference content-transformation stylesheets separately from other styling-related stylesheets. If so, perhaps something like one of the following could be of use:

<link rel="transformation" type="text/css" href="file.css" />

<link rel="stylesheet transformation" type="text/css" href="file.css" />

Conclusion

Instead of using markup attributes, it is proposed, here, for discussion, that one could use style to select and attach property values to elements in markup intended to be consumed by software components creating prompts or agentic workflows for artificial-intelligence systems to use when performing adaptation and personalization tasks to generate resultant output content. The precise natures of these properties remain subjects of exploration.