Transforming Markup into Semantics with Style

[AdamSobieski]

Introduction

Using additive cascade, Web developers could use style selectors to additively attach semantic content to elements and/or documents, effectively transforming markup into semantics with style.

Examples

Example 1

Here is a simple example showing how one might go about using CSS selectors to transform an HTML element into semantic content. The example utilizes an about property to attach semantic content to an element-level graph.

@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 example showing how one might go about using CSS selectors to transform a simple HTML table into semantic content. The example utilizes 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 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

What do you think about these ideas? Thank you.