Update padding to allow overrides

documentation/md/API.md

@@ -32,6 +32,7 @@ of its contents.
     -   `options.encoding` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** optional to pass 'binary' or base64' for archived Epubs (optional, default `binary`)
     -   `options.replacements` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** use base64, blobUrl, or none for replacing assets in archived Epubs (optional, default `none`)
     -   `options.canonical` **method?** optional function to determine canonical urls for a path
+    -   `options.openAs` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** optional string to determine the input type
 
 **Examples**
 
@@ -1290,6 +1291,8 @@ Add an annotation to store
 -   `cfiRange` **[EpubCFI](#epubcfi)** EpubCFI range to attach annotation to
 -   `data` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Data to assign to annotation
 -   `cb` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** Callback after annotation is added
+-   `className` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** CSS class to assign to annotation
+-   `styles` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** CSS styles to assign to annotation
 
 Returns **[Annotation](#annotation)** annotation
 
@@ -1311,6 +1314,8 @@ Add a highlight to the store
 -   `cfiRange` **[EpubCFI](#epubcfi)** EpubCFI range to attach annotation to
 -   `data` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Data to assign to annotation
 -   `cb` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Callback after annotation is added
+-   `className` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** CSS class to assign to annotation
+-   `styles` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** CSS styles to assign to annotation
 
 ### underline
 
@@ -1321,6 +1326,8 @@ Add a underline to the store
 -   `cfiRange` **[EpubCFI](#epubcfi)** EpubCFI range to attach annotation to
 -   `data` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Data to assign to annotation
 -   `cb` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Callback after annotation is added
+-   `className` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** CSS class to assign to annotation
+-   `styles` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** CSS styles to assign to annotation
 
 ### mark
 
@@ -1350,12 +1357,22 @@ Annotation object
 
 **Parameters**
 
+-   `$0` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+    -   `$0.type`  
+    -   `$0.cfiRange`  
+    -   `$0.data`  
+    -   `$0.sectionIndex`  
+    -   `$0.cb`  
+    -   `$0.className`  
+    -   `$0.styles`  
 -   `options` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
     -   `options.type` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Type of annotation to add: "highlight", "underline", "mark"
     -   `options.cfiRange` **[EpubCFI](#epubcfi)** EpubCFI range to attach annotation to
     -   `options.data` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Data to assign to annotation
     -   `options.sectionIndex` **int** Index in the Spine of the Section annotation belongs to
     -   `options.cb` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** Callback after annotation is added
+-   `className` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** CSS class to assign to annotation
+-   `styles` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** CSS styles to assign to annotation
 
 Returns **[Annotation](#annotation)** annotation
 

src/contents.js

@@ -933,7 +933,7 @@ class Contents {
 		if (width >= 0) {
 			this.width(width);
 			viewport.width = width;
-			this.css("padding", "0 "+(width/12)+"px", true);
+			this.css("padding", "0 "+(width/12)+"px");
 		}
 
 		if (height >= 0) {
@@ -985,9 +985,15 @@ class Contents {
 		this.css("margin", "0", true);
 
 		if (axis === "vertical") {
-			this.css("padding", (gap / 2) + "px 20px", true);
+			this.css("padding-top", (gap / 2) + "px", true);
+			this.css("padding-bottom", (gap / 2) + "px", true);
+			this.css("padding-left", "20px");
+			this.css("padding-right", "20px");
 		} else {
-			this.css("padding", "20px " + (gap / 2) + "px", true);
+			this.css("padding-top", "20px");
+			this.css("padding-bottom", "20px");
+			this.css("padding-left", (gap / 2) + "px", true);
+			this.css("padding-right", (gap / 2) + "px", true);
 		}
 
 		this.css("box-sizing", "border-box");

src/rendition.js

@@ -924,17 +924,22 @@ class Rendition {
 			});
 		}
 
+		let computed = contents.window.getComputedStyle(contents.content, null);
+		let height = contents.content.offsetHeight - (parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom));
+
 		contents.addStylesheetRules({
 			"img" : {
 				"max-width": (this._layout.columnWidth ? this._layout.columnWidth + "px" : "100%") + "!important",
-				"max-height": (this._layout.height ? (this._layout.height * 0.6) + "px" : "60%") + "!important",
+				"max-height": height + "px" + "!important",
 				"object-fit": "contain",
-				"page-break-inside": "avoid"
+				"page-break-inside": "avoid",
+				"break-inside": "avoid"
 			},
 			"svg" : {
 				"max-width": (this._layout.columnWidth ? this._layout.columnWidth + "px" : "100%") + "!important",
-				"max-height": (this._layout.height ? (this._layout.height * 0.6) + "px" : "60%") + "!important",
+				"max-height": height + "px" + "!important",
-				"page-break-inside": "avoid"
+				"page-break-inside": "avoid",
+				"break-inside": "avoid"
 			}
 		});