0045 CSS in Annotations #625
Conversation
Initial commit to version control ⚡️
Initial commit to version control ⚡️
Incidental to current recipe, but it needs fixing
Discussed in cookbook authors call of 29 July 2025
Recipe use case is now along the lines of thinking about multiple annotation authors, and the CSS rules now align with that. Colors made into hex rather than words for precision.
|
@triplingual I've added basic support for this in Theseus: I think it would be worth recommending implementations use CORS for the stylesheet if they want to improve its chances of working in generic viewers (in order to potentially sanitise or extract the styles). |
|
Thank you for the implementation. That's a good idea about CORS. |
This way the annotation text colors are different from each other and each is different from the annotation highlight box
Part of making 2 versions of recipe in case styling the annotation highlight is in scope
Follows conversation with @glenrobson
|
Comments from the cookbook authors: The title is CSS in an Annotation Body but now we have css in the body and target this should be renamed. (Glen suggestion: Styling Annotations with CSS? maybe) Use caseCould you do the use case from with the use of 'you' e.g: You have two different authors… You would like to distinguish the authors. To match the style of other use cases. Implementation notes"Using CSS to alter resource presentation styles is not specified in the IIIF Presentation 3.0 API except insofar as the Presentation API incorporates types from the W3C Web Annotation Data Model." Could you reword as something like: Using CSS in annotations is covered in the W3C Web Annotation Data Model This is due to some annotation stuff being covered in the spec but not CSS. With the second paragraph on inline, with an inline stylesheet, or with an external stylesheets the editors found this confusing and wondered if it could be re-written to focus first on the method you are using in the example (external stylesheet) and then at the end briefly mention the other options and link to the recipes. Possibly by moving the "see Image Rotation Two Ways (inline stylesheet) and Visible Text Resource on a Canvas (inline CSS)." from the example up to this paragraph. Example
OK to go to the TRC with changes. |
1. Changed a lot of text to address editor comment about confusing implementation notes. It was a good comment, and these changes prune significant superfluous text around the other ways of using CSS in a manifest. 2. Moved text pointing to other recipes from Example to Implementation Notes to sub for the previous unnecessary discussion of other CSS use methods. 3. Changed highlighting in targets to only highlight the styleClass, since the recipe is about CSS, not targets. 4. Moved from Implementation Notes to Restrictions the pointer to HTML in Annotations for the discussion of markup limitations. Also added to that pointer text the reason it matters.
| tags: [style] | ||
| summary: "Using an external CSS stylesheet in an annotation body, annotations can be styled in limited ways" | ||
| viewers: | ||
| - Theseus |
There was a problem hiding this comment.
I think this should be:
- id: Theseus
support: partial
As it doesn't support the target styling.
There was a problem hiding this comment.
The target styling is supported now on Theseus, but there is a CORS issue when loading the style.css file at the moment. https://theseusviewer.org/?iiif-content=https%3A%2F%2Fpreview.iiif.io%2Fcookbook%2F0045-css%2Frecipe%2F0045-css%2Fmanifest.json
|
|
||
| {% 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
| "target": { | ||
| "type": "SpecificResource", | ||
| "source": "{{ id.path }}/canvas/p1#xywh=170,160,2200,1000", | ||
| "styleClass": "author2" | ||
| } |
There was a problem hiding this comment.
I don't know if the source can itself be a specific resource.
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"}
}
Closes #45