Fix CSS in rotation recipe (#40)

recipe/0040-image-rotation-service/index.md

@@ -31,7 +31,15 @@ Finally, you may use an image service to rotate a region — rather than a whol
 
 If your resource is not being served from an image server that supports the desired rotation (or rotation at all) through the IIIF Image API, then you can use CSS for the rotation. Using CSS for rotation depends on the viewer to rotate the image rather than the server. This approach is used when your image server does not have a IIIF Image API service for the image, or if your image server does not allow rotation through service calls.
 
-By using CSS, you may specify arbitrary rotation figures as well as incorporate additional styling values.
+By using CSS, you may specify arbitrary rotation figures as well as incorporate additional styling values. In order for the rotated image to line up properly with the Canvas, the `transform-origin` and `transform` CSS properties must have the correct value. Without claiming to be exhaustive, we can present suggestions for 4 common cases, with slight variations:
+1. Reorienting a non-square rectilinear resource from portrait orientation to landscape orientation.
+	1. If the right side of the original resource should be at the top, the CSS should be `transform-origin: Xpx Xpx; transform: rotate(-90deg);` where X is a value equal to half of the resource's smaller dimension.
+	1. If the left side of the original resource should be at the top, the CSS should be `transform-origin: Xpx Ypx; transform: rotate(90deg) translateY(-Zpx);` where X is a value equal to half of the resource's smaller dimension, Y is a value equal to the resource's larger dimension less half of its smaller dimension, and Z is a value equal to the mathematical difference between the dimensions.
+1. Reorienting a non-square rectilinear resource from landscape orientation to portrait orientation.
+	1. If the right side of the original resource should be at the top, the CSS should be `transform-origin: Xpx Ypx; transform: rotate(90deg) translateX(-Zpx);` where X is a value equal to half of the resource's smaller dimension, Y is a value equal to the resource's larger dimension less half of its smaller dimension, and Z is a value equal to the mathematical difference between the dimensions.
+	1. If the left side of the original resource should be at the top, the CSS should be `transform-origin: Xpx Xpx; transform: rotate(90deg);` where X is a value equal to half of the resource's smaller dimension.
+1. Rotating a square image 90º or 270º and rotating any rectilinear image 180º. In this case, set the `transform-origin` value to the coordinates of the resource's center and the `transform` to be the correct rotation value.
+1. Rotating other resources by other degree amounts/directions. Using the models above, manifest creators should have a start on how to craft CSS transformations, including setting an appropriate transformation point, but further discussion of other cases is outside the scope of this recipe.
 
 Using CSS to alter resource presentation styles is not specified in the [IIIF Presentation 3.0 API](https://iiif.io/api/presentation/3.0/). The Presentation API section is provided as a convenient but light explanation of this approach. For a more detailed look at styles in Web Annotations, see [the W3C Web Annotation Data Model's Styles section](https://www.w3.org/TR/annotation-model/#styles).
 
@@ -45,6 +53,8 @@ The image service approach is not usable if you do not have a IIIF Image API ser
 
 The CSS approach depends wholly on viewer implementation of CSS as applied to a resource. Viewers have no requirement to support CSS styling.
 
+Be aware that values, especially `transform-origin` and translation, may differ meaningfully if other styling affecting the box model is applied. Translations may differ from the above in use of `translateX` or `translateY`, whether a translation has a positive value or negative value.
+
 ## Example
 
 For this recipe, we conveniently had a work on hand that had a page whose text direction was oriented perpendicularly to the facing page. For simplicity's sake, we are using the page in isolation. Because no viewers currently support rotation, we have included here a picture of the page in its original orientation followed by a picture of the page oriented according to the manifests' declarations for rotation.

recipe/0040-image-rotation-service/manifest-css.json

@@ -29,7 +29,7 @@
               "motivation": "painting",
               "stylesheet": {
                 "type": "CssStylesheet",
-                "value": ".rotated { transform-origin: center; transform: rotate(90deg); }"
+                "value": ".rotated { transform-origin: 761px 1344px; transform: rotate(90deg) translateY(-582px); }"
               },
               "body": {
                 "id": "{{ id.path }}/body/sr1",
@@ -43,7 +43,7 @@
                   "height": 2105,
                   "service": [
                     {
-                      "id": "https://iiif.io/api/image/3.0/example/reference/85a96c630f077e6ac6cb984f1b752bbf-0-21198-zz00022840-1-master",
+                      "id": "https://iiif.io/api/image/3.0/example/reference/85a96c630f077e6ac6cb984f1b752bbf-0-21198-zz00022840-1-page1",
                       "type": "ImageService3",
                       "profile": "level1"
                     }

recipe/0040-image-rotation-service/manifest-service.json

@@ -46,7 +46,7 @@
                                 },
                                 "selector": {
                                     "type": "ImageApiSelector",
-                                    "rotation": "90"
+                                    "rotation": "270"
                                 }
                             },
                             "target": "{{ id.path }}/canvas/p1"