diff --git a/documentation/md/API.md b/documentation/md/API.md index a7db8bc..f69e91c 100644 --- a/documentation/md/API.md +++ b/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 diff --git a/src/contents.js b/src/contents.js index bbc9922..1257229 100644 --- a/src/contents.js +++ b/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"); diff --git a/src/rendition.js b/src/rendition.js index fb3e705..6be1333 100644 --- a/src/rendition.js +++ b/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", - "page-break-inside": "avoid" + "max-height": height + "px" + "!important", + "page-break-inside": "avoid", + "break-inside": "avoid" } });