Skip to content

Update figure style of triple terms #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 3, 2025
Merged

Update figure style of triple terms #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2207f62
Enable dark mode and update CSS of figure element
niklasl Mar 18, 2025
e61ba09
Align SVG figures with Primer and enable dark mode
niklasl Mar 18, 2025
47a2ab9
Update triple term figure descriptions
niklasl Mar 18, 2025
fea7226
Remove links to old figure versions on google docs
niklasl Mar 18, 2025
c77a558
Only force color-scheme through user-checked input
niklasl Mar 19, 2025
8db3d88
Improve SVG figure rendering for WebKit
niklasl Mar 19, 2025
dfd4025
Move object fallback text to aria-label attribute
niklasl Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 29 additions & 35 deletions spec/asserted-triple-term.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions spec/figure.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
:root { --bg: #fff; --solid: #eee; --abstract: #aaa; --fg: #000 }
@media (prefers-color-scheme: dark) {
:root { --bg: #000; --solid: #333; --abstract: #777; --fg: #eee }
}
svg { background-color: var(--bg); stroke: none }
ellipse { stroke: var(--fg); fill: var(--solid) }
path.arrow { stroke: var(--fg); marker-end: url(#arrowhead) }
#arrowhead { fill: var(--fg) }
text { fill: var(--fg); font-family: Helvetica, sans-serif }
text.middle { text-anchor: middle }
text.italic { font-style: italic }
path.reifies { stroke: var(--fg); stroke-width: 1; marker-start: url(#arrowhead); fill: none }
.abstract > path.arrow { stroke: var(--abstract); stroke-dasharray: 8; marker-end: url(#arrowhead-abstract) }
#arrowhead-abstract { fill: var(--abstract) }
.abstract > text { fill: var(--abstract) }
.unlinked > ellipse { stroke: var(--abstract) }
38 changes: 21 additions & 17 deletions spec/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<title>RDF 1.2 Concepts and Abstract Syntax</title>
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
<script src="./common/local-biblio.js" class="remove"></script>
Expand Down Expand Up @@ -43,7 +44,11 @@
};
</script>
<style>
figure { text-align: center; }
body:has(input[type='radio'][value='light']:checked) { color-scheme: light }
body:has(input[type='radio'][value='dark']:checked) { color-scheme: dark }
Copy link
Contributor

@Tpt Tpt Mar 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside: I guess this is something that should be part of tr-design stylesheet

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. I think this solves the JS-dependency problem you noted, but is still sensitive to structural ReSpec changes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed. But if it's ship in tr-design alongside the definition of the selector then I guess it's fine.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've proposed to add this to ReSpec (in speced/respec#4925), since that's where the tr-design CSS and JS is referenced. (And further coordinating what goes where can follow suite in that PR.) For the the sake of the SVGs I'll merge with this left in (functionally equivalent to what's in that PR), and will follow up with a cleanup once the general fix lands in ReSpec.

figure { text-align: center }
figure > a { display: block }
figure > a > object { max-width: 40em; pointer-events: none }
table.simple td, table th { border: 1px solid #ddd; padding: 0.2em 0.5em; }
ol ol { list-style-type: lower-latin; }
.grammar td { font-family: monospace;}
Expand Down Expand Up @@ -138,7 +143,10 @@ <h3>Graph-based Data Model</h3>
node-arc-node link.</p>

<figure id="fig-rdf-graph">
<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>
<a href="rdf-graph.svg">
<object data="rdf-graph.svg"
aria-label="An RDF graph with two nodes (Subject and Object) and a triple connecting them (Predicate)"></object>
</a>
<figcaption>An RDF graph with two nodes (Subject and Object) and a triple connecting them (Predicate)</figcaption>
</figure>

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

<p>The following diagram represents a statement and a reification of an unasserted <a>triple term</a>.</p>
<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>

<figure id="fig-triple-term">
<a href="triple-term.svg">
<!-- A version of this graphic can be found at https://docs.google.com/drawings/d/1RP9Nw5GCNjduWSXZj_EZ8FaAc7p_N-WVmzJ0syvum1k -->
<img src="triple-term.svg"
alt="An RDF graph containing a triple that references an unasserted triple term (with grey background) via a reifier"
style="width:70%"
aria-describedby="fig-triple-term-alt"/>
<object data="triple-term.svg" aria-describedby="fig-triple-term-alt"
aria-label="An RDF graph containing a triple that references an unasserted triple term (with grey dashed arc) via a reifier"></object>
</a>
<figcaption id="fig-triple-term-alt">
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>.
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.
</figcaption>
</figure>

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

<figure id="fig-asserted-triple-term">
<a href="asserted-triple-term.svg">
<!-- A version of this graphic can be found at https://docs.google.com/drawings/d/1gAHQj4wk87tmeHf4-wnxdgmjq3T05_ovrJq0V-1VXKw -->
<img src="asserted-triple-term.svg"
alt="An RDF graph containing a triple that references an triple term, which is also asserted, via a reifier"
style="width:70%"
aria-describedby="fig-asserted-triple-term-alt"/>
<object data="asserted-triple-term.svg" aria-describedby="fig-asserted-triple-term-alt"
aria-label="An RDF graph containing a reifying triple where the triple term corresponds to an asserted triple"></object>
</a>
<figcaption id="fig-asserted-triple-term-alt">
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>.
An <a>RDF graph</a> containing a <a>reifying triple</a> where the <a>triple term</a> corresponds to an <a>asserted triple</a>.
The diagram represents the proposition as a fact using the asserted triple, meaning that the relationship holds.
</figcaption>
</figure>

Expand Down
42 changes: 25 additions & 17 deletions spec/rdf-graph.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 36 additions & 38 deletions spec/triple-term.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading