├── .gitattributes ├── .gitignore ├── FlightDeckReport.pdf ├── ImagesTesting_OneFile.azk ├── ImagesTesting_OneFile.epub ├── ImagesTesting_OneFile.mobi ├── ImagesTesting_OneFile ├── META-INF │ └── container.xml ├── OEBPS │ ├── 01-cover.xhtml │ ├── 02-titlepage.xhtml │ ├── 03-TOC.xhtml │ ├── 04-default.xhtml │ ├── 05-percent.xhtml │ ├── 06-viewport.xhtml │ ├── 07-both.xhtml │ ├── content.opf │ ├── cover.jpg │ ├── images │ │ └── portrait.jpg │ ├── styles.css │ └── toc.ncx └── mimetype ├── README.md ├── Screenshots ├── BluefireAndroid.png ├── GooglePlayAndroid.png ├── Kindle3.gif ├── KindleAndroid.png ├── KindlePaperwhite.png ├── KoboAndroid.png ├── NookHD.png ├── NookHDplus.png └── iBooks.PNG └── TestedSystems.pdf /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /FlightDeckReport.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/FlightDeckReport.pdf -------------------------------------------------------------------------------- /ImagesTesting_OneFile.azk: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/ImagesTesting_OneFile.azk -------------------------------------------------------------------------------- /ImagesTesting_OneFile.epub: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/ImagesTesting_OneFile.epub -------------------------------------------------------------------------------- /ImagesTesting_OneFile.mobi: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/ImagesTesting_OneFile.mobi -------------------------------------------------------------------------------- /ImagesTesting_OneFile/META-INF/container.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/01-cover.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single File Solution for Full-Screen Images with Captions 5 | 6 | 7 | 8 | 9 |
10 |

cover

11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/02-titlepage.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single File Solution for Full-Screen Images with Captions 5 | 6 | 7 | 8 | 9 |
10 |

Single File Solution for Full-Screen Images with Captions

11 |

by

12 |

Joshua Tallent

13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/03-TOC.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single File Solution for Full-Screen Images with Captions 5 | 6 | 7 | 8 | 9 | 10 | 21 | 22 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/04-default.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single File Solution for Full-Screen Images with Captions 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 |
portrait test image
13 |

No scaling applied: Portrait Full-screen Image with Caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

14 |
15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/05-percent.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single File Solution for Full-Screen Images with Captions 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 |
portrait test image
13 |

Percentage on image. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

14 |
15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/06-viewport.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single File Solution for Full-Screen Images with Captions 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 |
portrait test image
13 |

Viewport on image. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

14 |
15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/07-both.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single File Solution for Full-Screen Images with Captions 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 |
13 |
portrait test image
14 |

Single File Solution: Portrait Full-screen Image with Caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

15 |
16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/content.opf: -------------------------------------------------------------------------------- 1 | 2 | 3 | Single File Solution for Full-Screen Images with Captions 4 | main 5 | Joshua Tallent 6 | aut 7 | Tallent, Joshua 8 | 9783141592658 9 | 2015-03-09T10:24:00Z 10 | isbn 11 | 2014-11-05T01:50-06:00 12 | This is a sample book for EPUB 3 testing and development. The ISBN is for example purposes only. 13 | en-us 14 | eBook Architects 15 | Creation and design by eBook Architects, a service of Firebrand Technologies. 16 | 17 | auto 18 | true 19 | 1.1.1 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/ImagesTesting_OneFile/OEBPS/cover.jpg -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/images/portrait.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/ImagesTesting_OneFile/OEBPS/images/portrait.jpg -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/styles.css: -------------------------------------------------------------------------------- 1 | /* ############################################# */ 2 | /* ########## eBook Architects Styles ########## */ 3 | /* ## Copyright 2014 Firebrand Technologies ## */ 4 | /* ############################################# */ 5 | 6 | /* ############################################# */ 7 | /* ############### Default Styles ############## */ 8 | /* ############################################# */ 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | p { 14 | margin-top: 0; 15 | margin-bottom: 0; 16 | line-height: 1.5em; 17 | text-align: justify; 18 | text-indent: 2em; 19 | widows: 2; 20 | orphans: 2; 21 | } 22 | 23 | 24 | /* ############################################# */ 25 | /* ################### Headings ################ */ 26 | /* ############################################# */ 27 | h1, h2, h3, h4, h5, h6 { 28 | page-break-after:avoid; 29 | -epub-hyphens: none !important; 30 | adobe-hyphenate: none !important; 31 | hyphens: none !important; 32 | } 33 | h1 {text-align: center;} 34 | h2 {text-align: center;} 35 | h3 {text-align: center;} 36 | h4 {text-align: center;} 37 | h5 {text-align: left;} 38 | h6 {text-align: left;} 39 | .chapter { 40 | margin-top: 20%; 41 | font-family: sans-serif; 42 | } 43 | 44 | /* ############################################# */ 45 | /* ################## Title Page ############### */ 46 | /* ############################################# */ 47 | .title { 48 | font-size: 3em; 49 | margin-top: 20%; 50 | font-weight: bold; 51 | } 52 | .subtitle { 53 | text-align: center; 54 | } 55 | .byline { 56 | margin-top: 2em; 57 | margin-left: 10%; 58 | margin-right: 10%; 59 | text-indent: 0; 60 | text-align: center; 61 | font-style: italic; 62 | } 63 | .author { 64 | text-indent: 0; 65 | font-size: 1.5em; 66 | font-weight: bold; 67 | text-align: center; 68 | } 69 | 70 | 71 | /* ############################################# */ 72 | /* ################### NAV doc ################# */ 73 | /* ############################################# */ 74 | nav[epub\:type~='landmarks'], nav[epub\:type~='page-list'] { 75 | display: none; 76 | visibility: hidden; 77 | } 78 | 79 | nav ol { 80 | padding-left: 0; 81 | } 82 | ol.notlist li { 83 | display: block; 84 | } 85 | nav ol li { /* toc1 */ 86 | text-align: left; 87 | text-indent: -1.5em; 88 | margin-left: 1.5em; 89 | } 90 | nav ol ol li { /* toc2 */ 91 | text-align: left; 92 | text-indent: -1.5em; 93 | margin-left: 3em; 94 | } 95 | 96 | 97 | /* ############################################# */ 98 | /* ################### Images ################## */ 99 | /* ############################################# */ 100 | p#cover { 101 | text-align: center; 102 | } 103 | img#coverimage { 104 | padding: 0; 105 | margin: 0; 106 | } 107 | 108 | /* ########### Captions ########### */ 109 | p.caption { 110 | text-align: center; 111 | text-indent: 0; 112 | font-size: 1em; 113 | font-weight: bold; 114 | margin: 0 10%; 115 | } 116 | 117 | 118 | /* ########### Container ########### */ 119 | div.img_fs_cap { 120 | text-align: center; 121 | margin: 0; 122 | page-break-inside: avoid; 123 | } 124 | /* If you use figure, be sure to add display:block; for older reading systems */ 125 | 126 | /* ########### Percentage ########### */ 127 | img.percent { 128 | height: 80%; 129 | width: auto; 130 | } 131 | 132 | /* ########### Viewport ########### */ 133 | img.viewport { 134 | height: 70vh; 135 | } 136 | 137 | /* ########### Single File ########### */ 138 | div.img_pct { 139 | height: 80%; 140 | } 141 | img#img_vh { 142 | height: 80%; 143 | } 144 | 145 | img#img_vh:only-of-type { /*overrides the previous setting, but only in newer systems that support CSS3 */ 146 | height: 80vh; 147 | } 148 | 149 | 150 | /* ############################################# */ 151 | /* #################### Other ################## */ 152 | /* ############################################# */ 153 | em, i, .italic {font-style: italic;} 154 | strong, b, .bold {font-weight: bold;} 155 | 156 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/OEBPS/toc.ncx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Single File Solution for Full-Screen Images with Captions 12 | 13 | 14 | 15 | 16 | Cover 17 | 18 | 19 | 20 | Title Page 21 | 22 | 23 | 24 | Contents 25 | 26 | 27 | 28 | No scaling applied (default) 29 | 30 | 31 | 32 | Percentage on Image 33 | 34 | 35 | 36 | Viewport on Image 37 | 38 | 39 | 40 | Single File Solution 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /ImagesTesting_OneFile/mimetype: -------------------------------------------------------------------------------- 1 | application/epub+zip -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ImagesSingleFile 2 | Single file solution for full-screen images with captions 3 | 4 | This EPUB 3 file offers a not-too-complex solution for keeping a large image and a caption on the same screen. 5 | 6 | Essentially, all major reading systems support either using percentages on image tags to scale the image to less than the height of the screen, or using viewport sizes (vh) to do the same thing. This solution allows you to effectively apply both to any large image, giving you the ability to have large images with captions that stay on the same screen. 7 | 8 | A few assumptions: 9 | 1. The image must start at the top of a page/screen. If necessary, place it at the top of an HTML file. 10 | 2. The viewport height units only work on newer devices. It is applied using a CSS 3 pseudo-class, :only-of-type. The assumption is that if a reading system supports the pseudo-class it will also support the viewport unit. This has proven to be true in all systems tested. 11 | 12 | It has been tested and works in all of the following reading systems: 13 | - ADE 3.0.86137 on PC running Windows 7 14 | - ADE 4.0.3.110333 on PC running Windows 7 15 | - Bluefire Reader 2.4 on iPad Air running iOS 8.1.3 (12B466) 16 | - Bluefire Reader 2.0.3 on Nexus 7 running Android 5.0.1 17 | - Google Play 2.2.12859 on iPad Air running iOS 8.1.3 (12B466) 18 | - Google Play 3.3.15 on Nexus 7 running Android 5.0.1 19 | - iBooks 3.1.3 (1929) on iPad 1 running iOS 5.1.1 (9B206) 20 | - iBooks 4.1.1 (2618) on iPad Air running iOS 8.1.3 (12B466) 21 | - Kindle Paperwhite 1st Gen 5.4.4.2 22 | - Kindle Keyboard (Kindle 3) 3.4.1 23 | - Kindle Fire HDX running Fire OS 4.5.3 24 | - Kindle iOS 4.7.1 on iPad Air running iOS 8.1.3 (12B466) 25 | - Kindle Android 4.10.0 on Nexus 7 running Android 5.0.1 26 | - Kobo iOS 7.5 on iPad Air running iOS 8.1.3 (12B466) 27 | - Kobo Touch 3.11.0 28 | - Kobo Android 6.1.13023 on Nexus 7 running Android 5.0.1 29 | 30 | Screenshots of some devices are included. -------------------------------------------------------------------------------- /Screenshots/BluefireAndroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/Screenshots/BluefireAndroid.png -------------------------------------------------------------------------------- /Screenshots/GooglePlayAndroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/Screenshots/GooglePlayAndroid.png -------------------------------------------------------------------------------- /Screenshots/Kindle3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/Screenshots/Kindle3.gif -------------------------------------------------------------------------------- /Screenshots/KindleAndroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/Screenshots/KindleAndroid.png -------------------------------------------------------------------------------- /Screenshots/KindlePaperwhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/Screenshots/KindlePaperwhite.png -------------------------------------------------------------------------------- /Screenshots/KoboAndroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/Screenshots/KoboAndroid.png -------------------------------------------------------------------------------- /Screenshots/NookHD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/Screenshots/NookHD.png -------------------------------------------------------------------------------- /Screenshots/NookHDplus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/Screenshots/NookHDplus.png -------------------------------------------------------------------------------- /Screenshots/iBooks.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/Screenshots/iBooks.PNG -------------------------------------------------------------------------------- /TestedSystems.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jstallent/ImagesSingleFile/672d1e78074a0ab9d2973fb876c167ac6280cb91/TestedSystems.pdf --------------------------------------------------------------------------------