0045 CSS in Annotations #625
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| --- | ||
| title: CSS in an Annotation | ||
| id: 45 | ||
| layout: recipe | ||
| tags: [style] | ||
| summary: "Using an external CSS stylesheet in an annotation body, annotations can be styled in limited ways" | ||
| viewers: | ||
| - Theseus | ||
| topic: | ||
| - basic | ||
| code: | ||
| - iiif-prezi3 | ||
| --- | ||
|
|
||
| ## Use Case | ||
|
|
||
| You have two different authors who have each made an annotation on a visual resource. You'd like to distinguish the authors visually in the presentation, putting each annotation text in a different text color. | ||
|
|
||
| ## Implementation Notes | ||
|
|
||
| Using CSS in annotations is covered in the W3C Web Annotation Data Model. For a look at its approach to styles in Web Annotations, see [the W3C Web Annotation Data Model's Styles section](https://www.w3.org/TR/annotation-model/#styles). Note in particular changes needed to the `target` property if styling is intended for a IIIF Canvas. | ||
|
|
||
| Annotations can be styled using CSS in three ways. This recipe focuses on using an external stylesheet. To add CSS using an external stylesheet, insert the stylesheet's URI as the the value of a `stylesheet` property on the Annotation. The `styleClass` property can then be used to reference rules in that external stylesheet, such as in the annotation `body` or composite `target` containing a `source` as well. It is advisable to set appropriate CORS headers for the stylesheet to improve its chances of working in generic viewers. | ||
|
|
||
| Viewer behavior and the specifics of an annotation's `target` will have effects, but broadly speaking, using CSS to style the `body` of an annotation will style the content of the annotation and a CSS class in the `target` will style the annotation's highlight on a Canvas. | ||
|
|
||
| The two other methods for adding CSS to a manifest are inline CSS and an inline stylesheet. To see how to use an inline stylesheet, see [Image Rotation Two Ways][0040]. To see how to use inline CSS, see [Visible Text Resource on a Canvas][0561]. Each of these also shows styling a IIIF resource in an annotation with a `motivation` of `painting` — that is, styling content that can be expected to be visible in the content space of a viewer. | ||
|
|
||
| ## Restrictions | ||
|
|
||
| See the Restrictions section of the [HTML in Annotations][0019] recipe for a brief discussion of limitations to markup in annotations. These limitations can affect, in turn, the possible selectors in your external stylesheet. | ||
|
|
||
| The CSS approach depends wholly on viewer implementation of CSS as applied to a resource. Viewers have no requirement to support CSS styling. Browser-based viewers may defer CSS implementation in whole or in part to the browser. Consequently, and also for reasons of accessibility, annotations should not rely on styling for semantics and should be readable by a human or machine without styling. | ||
|
|
||
| One example: Since IIIF Canvas dimensions are unit-less, using pixels for text size is valid but may be interpreted variably across viewers or other clients. | ||
|
|
||
| ## Example | ||
|
|
||
| This recipe focuses on annotations with motivations other than painting and on an external CSS stylesheet. The Theseus viewer is included here for its support of styling the annotation text, but it does not currently support styling the `target`. | ||
|
|
||
| {% include manifest_links.html manifest="manifest.json" %} | ||
|
|
||
| {% include jsonviewer.html src="manifest.json" config='data-line="56,60,71,78,82,93"' %} | ||
|
There was a problem hiding this comment. I think this should be: "56,60,72,79,83,95" As the highlighting is slightly off |
||
|
|
||
| ### Stylesheet | ||
| {% include jsonviewer.html src="style.css" %} | ||
|
|
||
| ## Related Recipes | ||
|
|
||
| * [Image Rotation Two Ways][0040], for an inline CSS stylesheet used with a IIIF resource | ||
| * [HTML in Annotations][0019], a complementary recipe for markup, including a fuller discussion of markup use cautions | ||
| * [Visible Text Resource on a Canvas][0561], for inline CSS used with a painted textual resource | ||
|
|
||
| {% include acronyms.md %} | ||
| {% include links.md %} | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| { | ||
| "@context": "http://iiif.io/api/presentation/3/context.json", | ||
| "id": "{{ id.url }}", | ||
| "type": "Manifest", | ||
| "label": { | ||
| "en": [ | ||
| "Koto, chess, calligraphy, and painting" | ||
| ], | ||
| "ja": [ | ||
| "琴棋書画図屏風" | ||
| ] | ||
| }, | ||
| "items": [ | ||
| { | ||
| "id": "{{ id.path }}/canvas/p1", | ||
| "type": "Canvas", | ||
| "height": 3966, | ||
| "width": 8800, | ||
| "items": [ | ||
| { | ||
| "id": "{{ id.path }}/page/p1/1", | ||
| "type": "AnnotationPage", | ||
| "items": [ | ||
| { | ||
| "id": "{{ id.path }}/annotation/p0001-image", | ||
| "type": "Annotation", | ||
| "motivation": "painting", | ||
| "body": { | ||
| "id": "https://iiif.io/api/image/3.0/example/reference/36ca0a3370db128ec984b33d71a1543d-100320001004/full/max/0/default.jpg", | ||
| "type": "Image", | ||
| "format": "image/jpeg", | ||
| "height": 3966, | ||
| "width": 8800, | ||
| "service": [ | ||
| { | ||
| "id": "https://iiif.io/api/image/3.0/example/reference/36ca0a3370db128ec984b33d71a1543d-100320001004", | ||
| "profile": "level1", | ||
| "type": "ImageService3" | ||
| } | ||
| ] | ||
| }, | ||
| "target": "{{ id.path }}/canvas/p1" | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "annotations": [ | ||
| { | ||
| "id": "{{ id.path }}/page/p2/1", | ||
| "type": "AnnotationPage", | ||
| "items": [ | ||
| { | ||
| "id": "{{ id.path }}/page/p2/anno-1", | ||
| "type": "Annotation", | ||
| "motivation": "commenting", | ||
| "stylesheet": "{{ id.path }}/style.css", | ||
| "body": { | ||
| "id": "{{ id.path }}/body/sr1", | ||
| "type": "SpecificResource", | ||
| "styleClass": "author1", | ||
| "source": { | ||
| "id": "{{ id.path }}/body/text1", | ||
| "type": "TextualBody", | ||
| "language": "en", | ||
| "format": "text/html", | ||
| "value": "<p>Three of the four pursuits of refined and noble men named in the screen's title are shown on this side of the screen: go, the koto, and tools for calligraphy. Each is in a container or wrapper. (GR)</p>" | ||
| } | ||
| }, | ||
| "target": { | ||
| "type": "SpecificResource", | ||
| "source": "{{ id.path }}/canvas/p1#xywh=700,1250,1850,1150", | ||
| "styleClass": "author1" | ||
| } | ||
| }, | ||
| { | ||
| "id": "{{ id.path }}/page/p2/anno-2", | ||
| "type": "Annotation", | ||
| "motivation": "commenting", | ||
| "stylesheet": "{{ id.path }}/style.css", | ||
| "body": { | ||
| "id": "{{ id.path }}/body/sr2", | ||
| "type": "SpecificResource", | ||
| "styleClass": "author2", | ||
| "source": { | ||
| "id": "{{ id.path }}/body/text2", | ||
| "type": "TextualBody", | ||
| "language": "en", | ||
| "format": "text/html", | ||
| "value": "<p>The detail in the natural beauty of the setting could be seen as a contrast (or balance) to the manufactured pursuits of noble men. (TK)</p>" | ||
| } | ||
| }, | ||
| "target": { | ||
| "type": "SpecificResource", | ||
| "source": "{{ id.path }}/canvas/p1#xywh=170,160,2200,1000", | ||
| "styleClass": "author2" | ||
| } | ||
|
Comment on lines
+92
to
+96
There was a problem hiding this comment. I don't know if the I think this would be more expected for a "SpecificResource" class: "target": {
"type": "SpecificResource",
"source": "https://preview.iiif.io/cookbook/0045-css/recipe/0045-css/canvas/p1",
"styleClass": "author2",
"selector": {"type": "FragmentSelector", "value": "xywh=170,160,2200,1000"}
} |
||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .author1 { | ||
| color: #f00; | ||
| background-color: #fff; | ||
| border-color: #f00; | ||
| } | ||
|
|
||
| .author2 { | ||
| color: #1a1; | ||
| background-color: #fff; | ||
| border-color: #0f0; | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this should be:
support: partial
As it doesn't support the target styling.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The target styling is supported now on Theseus, but there is a CORS issue when loading the
style.cssfile at the moment. https://theseusviewer.org/?iiif-content=https%3A%2F%2Fpreview.iiif.io%2Fcookbook%2F0045-css%2Frecipe%2F0045-css%2Fmanifest.json