Skip to content

Commit fa2e67d

Browse files
niklaslniklasl
authored
Update figure style of triple terms (#168)
* Enable dark mode and update CSS of figure element * Align SVG figures with Primer and enable dark mode * Update triple term figure descriptions * Remove links to old figure versions on google docs * Only force color-scheme through user-checked input * Improve SVG figure rendering for WebKit * Move object fallback text to aria-label attribute
1 parent eae5f8a commit fa2e67d

File tree

5 files changed

+127
-107
lines changed

5 files changed

+127
-107
lines changed

‎spec/asserted-triple-term.svg

Lines changed: 29 additions & 35 deletions
Loading

‎spec/figure.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:root { --bg: #fff; --solid: #eee; --abstract: #aaa; --fg: #000 }
2+
@media (prefers-color-scheme: dark) {
3+
:root { --bg: #000; --solid: #333; --abstract: #777; --fg: #eee }
4+
}
5+
svg { background-color: var(--bg); stroke: none }
6+
ellipse { stroke: var(--fg); fill: var(--solid) }
7+
path.arrow { stroke: var(--fg); marker-end: url(#arrowhead) }
8+
#arrowhead { fill: var(--fg) }
9+
text { fill: var(--fg); font-family: Helvetica, sans-serif }
10+
text.middle { text-anchor: middle }
11+
text.italic { font-style: italic }
12+
path.reifies { stroke: var(--fg); stroke-width: 1; marker-start: url(#arrowhead); fill: none }
13+
.abstract > path.arrow { stroke: var(--abstract); stroke-dasharray: 8; marker-end: url(#arrowhead-abstract) }
14+
#arrowhead-abstract { fill: var(--abstract) }
15+
.abstract > text { fill: var(--abstract) }
16+
.unlinked > ellipse { stroke: var(--abstract) }

‎spec/index.html

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="color-scheme" content="light dark">
56
<title>RDF 1.2 Concepts and Abstract Syntax</title>
67
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
78
<script src="./common/local-biblio.js" class="remove"></script>
@@ -43,7 +44,11 @@
4344
};
4445
</script>
4546
<style>
46-
figure { text-align: center; }
47+
body:has(input[type='radio'][value='light']:checked) { color-scheme: light }
48+
body:has(input[type='radio'][value='dark']:checked) { color-scheme: dark }
49+
figure { text-align: center }
50+
figure > a { display: block }
51+
figure > a > object { max-width: 40em; pointer-events: none }
4752
table.simple td, table th { border: 1px solid #ddd; padding: 0.2em 0.5em; }
4853
ol ol { list-style-type: lower-latin; }
4954
.grammar td { font-family: monospace;}
@@ -138,7 +143,10 @@ <h3>Graph-based Data Model</h3>
138143
node-arc-node link.</p>
139144

140145
<figure id="fig-rdf-graph">
141-
<a href="rdf-graph.svg"><img src="rdf-graph.svg" alt="An RDF graph with two nodes (Subject and Object) and a triple connecting them (Predicate)" /></a>
146+
<a href="rdf-graph.svg">
147+
<object data="rdf-graph.svg"
148+
aria-label="An RDF graph with two nodes (Subject and Object) and a triple connecting them (Predicate)"></object>
149+
</a>
142150
<figcaption>An RDF graph with two nodes (Subject and Object) and a triple connecting them (Predicate)</figcaption>
143151
</figure>
144152

@@ -326,34 +334,30 @@ <h3>Triple Terms and Reification</h3>
326334
Concrete syntaxes, such as Turtle [[RDF12-TURTLE]],
327335
may have shortcuts for capturing a <a>triple term</a> with its <a>reifier</a>.</p>
328336

329-
<p>The following diagram represents a statement and a reification of an unasserted <a>triple term</a>.</p>
337+
<p>The following diagram represents a <a>reifying triple</a> of an unasserted, abstract <a>triple term</a>, and a <a>triple</a> relating the <a>reifier</a> to another resource.</p>
330338

331339
<figure id="fig-triple-term">
332340
<a href="triple-term.svg">
333-
<!-- A version of this graphic can be found at https://docs.google.com/drawings/d/1RP9Nw5GCNjduWSXZj_EZ8FaAc7p_N-WVmzJ0syvum1k -->
334-
<img src="triple-term.svg"
335-
alt="An RDF graph containing a triple that references an unasserted triple term (with grey background) via a reifier"
336-
style="width:70%"
337-
aria-describedby="fig-triple-term-alt"/>
341+
<object data="triple-term.svg" aria-describedby="fig-triple-term-alt"
342+
aria-label="An RDF graph containing a triple that references an unasserted triple term (with grey dashed arc) via a reifier"></object>
338343
</a>
339344
<figcaption id="fig-triple-term-alt">
340-
An <a>RDF graph</a> containing a <a>triple</a> that references an unasserted <a>triple term</a> (with grey background) via a <a>reifier</a>.
345+
An <a>RDF graph</a> containing a <a>reifying triple</a> that references an abstract <a>triple term</a> (which is unasserted, depicted using a grey, dashed arc) from a <a>reifier</a>; and a triple describing this reifier.
341346
</figcaption>
342347
</figure>
343348

344-
<p>A variation on the graph shown in <a href="#fig-triple-term"></a> can be described
345-
where the <a>triple term</a> is also <a data-lt="asserted triple">asserted</a>.</p>
349+
<p>Here is a variation on the graph shown in <a href="#fig-triple-term"></a>. This represents a graph
350+
where the <a>triple term</a> corresponds to an <a>asserted triple</a>.
351+
</p>
346352

347353
<figure id="fig-asserted-triple-term">
348354
<a href="asserted-triple-term.svg">
349-
<!-- A version of this graphic can be found at https://docs.google.com/drawings/d/1gAHQj4wk87tmeHf4-wnxdgmjq3T05_ovrJq0V-1VXKw -->
350-
<img src="asserted-triple-term.svg"
351-
alt="An RDF graph containing a triple that references an triple term, which is also asserted, via a reifier"
352-
style="width:70%"
353-
aria-describedby="fig-asserted-triple-term-alt"/>
355+
<object data="asserted-triple-term.svg" aria-describedby="fig-asserted-triple-term-alt"
356+
aria-label="An RDF graph containing a reifying triple where the triple term corresponds to an asserted triple"></object>
354357
</a>
355358
<figcaption id="fig-asserted-triple-term-alt">
356-
An <a>RDF graph</a> containing a <a>triple</a> that references an <a>triple term</a>, which is also asserted, via a <a>reifier</a>.
359+
An <a>RDF graph</a> containing a <a>reifying triple</a> where the <a>triple term</a> corresponds to an <a>asserted triple</a>.
360+
The diagram represents the proposition as a fact using the asserted triple, meaning that the relationship holds.
357361
</figcaption>
358362
</figure>
359363

‎spec/rdf-graph.svg

Lines changed: 25 additions & 17 deletions
Loading

‎spec/triple-term.svg

Lines changed: 36 additions & 38 deletions
Loading

0 commit comments

Comments
 (0)