Quote:
Originally Posted by Trane
Thanks Granny. As it happens it sounds like it's a crapshoot where the text will land no matter what you do, but for the moment Turtle's code has it all working as far as I can tell.
|
I haven't personally thoroughly tested Turtle's code example, but here are some things to keep in mind when testing any sort of Image/Caption stuff:
- Stretch/shrink the window size.
- Sometimes images don't scale properly when the device is smaller than the image size. (Heavily distorted or goes off the page)
- Make the font size larger/smaller.
- Most of the time I avoid setting left/right margins as ##em because the larger the font, the less screen real estate you give yourself.
- Depending on code, sometimes spacing between Image/Caption they can sometimes grow too large.
- Test devices in Landscape, not just Portrait.
- Quite often very skinny/tall images will stretch to the width of the screen, but go flying off the bottom of the screen. This is partially why we promote SVG wrappers in certain cases, but old MOBI throws a wrench in that (if you are designing purely for EPUB that could work, or if you don't mind doing a separate EPUB with more MOBI-specific work).
- Test with images that are Tall/Skinny, and Short/Fat.
- You may need to come up with two different image CSS. One for "tall" images, and one for "fat" images.
- Test with longer captions, not just short ones.
- Short: "Mona Lisa"
- Longer: "Example 20: Mona Lisa by Leonardo da Vinci. Painted in 1503. 77 cm × 53 cm."
- Sometimes it centers + looks ok when it is Short, but when the Longer text flows to the next line, things look horrendous.
- Test with much lower/higher resolution images.
- Most of the time you don't have the luck of a book of same-sized images (not all uniform resolution). Sometimes you have a little 400x600 JPG and you may have access to a 1200x1600 PNG, or any sizes in between. Trying to force everything down to 600px width or trying to raise your 600px image larger might cause issues.
A lot of this then depends on your specific images... which is why I didn't post any sort of image-specific code in my examples.
Quote:
Originally Posted by Trane
I'm now wrestling with the next issue with images... sizing. One nightmare after the next.
[...]
I have defaulted to redoing all (have the originals as PSDs) as 300 PPI and 600px wide.
I got through half of them last night then thought I'd better stop in case I found out today another size was better. Like maybe 800px.
|
What sorts of images are we talking about. These are purely vector images? Can you post examples?
If they are Text-based (Formulas or image of a Table), Charts/Graphs, line-drawings, [...] those would be much better served as PNG over JPG. PNGs can then be heavily compressed with zero loss.
For example, I posted a vector chart I worked on that was >130KB JPG, but 99.8KB PNG -> 44.5KB PNG (Indexed):
https://www.mobileread.com/forums/sh...45#post2499645
Does this book also have photographic images? What resolution is the source photos?
Quote:
Originally Posted by GrannyGrump
I just had to chime in with one subversive thought ---- where is it graven in stone that captions MUST be centered? I have seen many print books, and used myself in epubs, captions that were left-aligned, right-aligned, and right-aligned with a left-hand margin of 50%.
|
I recently saw a physical book that had captions vertical along the Left/Right edge of the image. It also had Headers/Footers done similarly (vertical along the Outer edge instead of at the Top/Bottom of each page).
I thought it looked pretty cool, and seemed like a good way to design the page to create a shorter/wider book.