Recipe #45: CSS in an Annotation

[glenrobson]

Links

• Original Issue: CSS styling cookbook-recipes#45
• Pull Request: 0045 CSS in Annotations cookbook-recipes#625
• Preview: https://preview.iiif.io/cookbook/0045-css/recipe/0045-css/

Background and Summary

This builds on the Visible Text Resource on a Canvas recipe and clarifies how to use CSS to style both the body and target of an annotation.

Voting and changes

We welcome comments on the recipe and as well as voting +1, confused face or -1 feel free to add comments to this issue. If this issue is approved then the author will take account of the comments before we merge the branch in to the master cookbook branch.

If the recipe is rejected by the TRC then we will make the changes requested and resubmit it to a future TRC meeting. If you feel that your comments are substantial enough that the recipe should be looked at again by the TRC after the changes have been made please vote -1 (thumbs down). A confused face is treated as abstaining.

Changes to the recipe will only be made after the TRC voting process has concluded.

[glenrobson]

Questions from TRC:

• Reference to style sheet in manifest - does it have to be an absolute URL? And yes, relative URLs not supported.
  Glen thinks this would have to be an absolute URL but would be good to hear from others if this isn't the case.

• How to style the box? A different syntax in stylesheet is needed? Potentially could do this with SVG - could be added to stylesheet.
  Question for viewer developers but it we say the color is red. What happens if a viewer implements the box using SVG?

• Discussion on what CSS should be allowed?
  Both IIIF and Web Annnotation data Model don't limit CSS tags. Would be useful to include a warning in the resictions conveying the following:

1. Manifest publishers shouldn't expect all css to be implemented
2. Viewers may want to only apply certain styling and ignore styling that might break the website
3. Annotation stores may want to strip the stylesheet tag if they allow annotations from unauthenticated users.

The use case shared in the meeting is an annotation with a background image defined in CSS e.g.

background: lightblue url(http://example.com/tracker/image.jpg) no-repeat fixed center;

Could be used to track access to users that view that annotation. Note they could also use the img tag in HTML as this is allowed with IIIF.

[azaroth42]

• Yes to absolute URLs
• Yes, you can assert CSS about SVG elements. Equally border: 1px solid black
• Seems challenging to restrict the features of CSS, agree with the warning

[triplingual]

(Standard disclaimer that I upvoted my own recipe.)

[ronja-koistinen]

Sorry, I'm a day late with my vote. I voted -1 because we felt that the recipe:

• doesn't specify in enough detail which CSS properties and rules are permitted, leaving too much room for interpretation and divergence of support to the viewers
• could use some words of caution on especially accepting user-generated style rules, considering how wide open the set of permitted functionality seems to be.

[glenrobson]

Issue 137 (Recipe #45: CSS in an Annotation)

+1: 12 [akrishnan15 azaroth42 cubap danieltbrennan glenrobson irv kirschbombe markpatton nfreire regisrob robcast triplingual]
0: 0 []
-1: 0 []
Not TRC: 1 [ronja-koistinen]
Ineligible: 5 [LlGC-iir markpbaggett peteredwards tomcrane tristanr-cogapp]

Result: 12 / 12 = 1.00

Super majority is in favor, issue is approved