Fun With Graphics: Make Your Images Fit The Screen

For those of you who are whizzes at computer stuff and html and css, do not laugh at my puny efforts. Go look at this video of great social significance instead. I’m talking to the folks like me–who believe our computers are plotting against us when we’re not looking.

You all know that ereaders can play havoc with your graphic images, right? Depending on the device, they can shrink or expand or get cut off in inconvenient ways. The way to make sure your images stay the size you want them to is define the size in the coding. So a line of html for a scene break glyph might look like this:

graphic8

I needed to insert a graphic that ideally should fill the screen, no matter what size screen was displaying it. I knew how to do this thanks to Paul Salvette (and if you are really serious about formatting ebooks, you must get his book for your resource library) and my partner-in-obsessanating Jon Westcot. Change the size to a percentage–in this case I needed the width to always be 100% of the screen.

graphic7Do that and the image will expand or shrink depending on the screen size. Never have to worry about it being cut off.

That’s when it hit me I could do something cool with chapter heads and scene break indicators.

I had a project with a noir-ish theme and I made graphics with a grayscale fade. The problem with locking the image sizes, though, was that on some screens the fade effect was lost and the graphic looked like a block–too graphic-y. That’s when it hit me that I could use percentage coding to make the graphic fill the screen width no matter what size the screen–even a full-sized computer screen.

graphic5How it looks on the Kindle Previewer for the iPhone app–a very small screen.

graphic6How it looks on the iPad screen–very wide display.

I also did the same with the scene break indicators. For this series I wanted a simple grayscale fade line instead of a glyph, but I wanted to always fill the entire line. Setting the width at 100% did exactly that. Here’s how it looks on Lucy Light the Paperwhite.

graphic2If you happen to have an image you want to fill an entire screen, top to bottom, you use the same trick, except you set the height at 100%. That way you can manage the size of your graphics, but still make sure your book illustration or chart gets its own screen “page.”

Nifty trick, eh? Thanks, Paul and Jon.

About these ads

15 thoughts on “Fun With Graphics: Make Your Images Fit The Screen

  1. Jaye, even when you’re speaking Chinese I think you’re brilliant. Seriously… Percentage coding? I’m so impressed!

  2. No thanks needed, my friend! That probably makes the tip count 100 Jaye, 1 Jon. ;) (And the tips I’ve gleaned from Paul are innumerable [gads, I hope that's spelled correctly!]!)

  3. One additional option is to resize the graphic based upon the selected text size. This one is a bit “fiddly,” though. Someone (probably either Paul or William Ockham) mentioned that an “em” is approximately 25px by 25px. Therefore, a graphic that is 300px wide could also be referenced as being 12em. In practice, I’ve found that a bit much. Maybe around twice too much. That is, in practice, I found referencing the variable width of a 300px graphic as 6em worked out nicely (that would mean that 1em works out to 50px… but something tells me it may “actually” be 72px, but I could be all wet). The way to get this to be variable, though, is to either OMIT one of the dimension references (height or width) OR to to specify both dimensions with em values that are a ratio of each other. Huh? Okay, go back to that 300px-wide graphic. If it were 50px high, then, using the 6em value for width, we’d use…? Anyone? Bueller? Bueller? We’d use 1em for the height. (This assumes, as I mentioned previously, that 1em works out nicely to 50px.) What do you do if the value isn’t a whole number? You can specify a partial em, such as 1.25 or 1.5. I know you can specify other values (i.e., 1.36em), and, while it won’t make the renderer choke (usually), it may simply round up or down to some arbitrary setting. When in doubt, EXPERIMENT! It’s fun!

    • Pixels are an abstraction. That means they are something that computer programmers made up to hide the complexity of display hardware from people who didn’t really want to know. Unfortunately the law of leaky abstractions (google/bing it) says that underlying complexity will rear its ugly head at the most inconvenient time. So it is with ebooks and pixels. You are about to regret that you ever mentioned my nom de guerre in association with pixels.

      I think of pixels as being a manifestation of Azathoth (“Outside the ordered universe is that amorphous blight of nethermost confusion which blasphemes and bubbles at the center of all infinity”). I don’t like them. Here’s the deal. In the bad old days (i.e. before the flood, I mean, the web), software developers had to know the exact number of hardware pixels on the display device to be able to write programs with graphical output. This sucks. BAD. So, we decided that we would all pretend that all good display devices had exactly 96 pixels per inch. The poor schlubs who wrote video display device drivers would be required to make that little white lie appear to be true. This turned out to be a really good compromise for desktop computing. It even survived the transition from CRTs to LCDs (mostly). When the web rolled around, this little abstraction was enshrined in stone. Check out http://pxtoem.com/ and you will discover that web developers believe that 16px = 12pts = 1 inch = 1em.

      As LCD manufacturing processes got better, the real pixel density of displays got better, but we all were still pretending that everything was 96PPI (PPI is interchangeable with dpi, dots per inch). This happened at about the same time that I started to develop presbyopia, which made me really crazy. Anyways, this stuff all came to a head with the iPad 3 (er, are we still supposed to call it the new iPad even though there are two newer models now?). It had the Retina display, with a pixel density of 264 PPI. Now all those web pages would look really, really tiny or apps designed for the new iPad wouldn’t really look that great. So Apple decided to lie to the Safari browser and report the exact same pixel density as the original iPad. Web pages looked fine and native iOS apps could be stunning. Recently the W3C has adopted this approach:

      The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

      The W3C explains the change in definition like this: …in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)

      See that. That 96 PPI abstraction just leaked all over the web. Why does all this matter to ebook developers? Because you are a web developer. The big Kindle Fire HD has an 8.9 inch screen with 1920 x 1200 resolution, 254ppi, a 16:10 aspect ratio and a CSS reference pixel of 1.5.
      The little Kindle Fire HD has a 7 inch screen with 1280 x 800 resolution, 216ppi, a 16:10 aspect ratio and a CSS reference pixel of 1.5.
      The Kindle Paperwhite has 6 inch screen that’s 768×1024, 212 PPI, 3:4 aspect ratio and a CSS reference pixel of 1 (AFAIK).
      The current eInk Kindles are all 6 inch, 600×800, 167 PPI, 3:4 aspect ratio with a CSS reference pixel of 1.

      So, tell me, how big is a 300px image going to be on a Kindle? It depends on the Kindle. The important thing to know is it will be different.

      The only safe measurements are ems and percentages. Full stop.

      • William:

        Not sorry I “invoked” your name at all. That is the kind of minute detail I appreciate! Thank you so much for taking the time to share this! I truly appreciate your efforts and knowledge!

  4. Jaye, have you figured out how to vertically center an image, yet? I’m not sure if it can be done, but I’ve had some people asking and I don’t know. Would be handy for children’s books. You can also use style=”width: 100%;” in the img element instead of width=100% if you’re a schtickler for XHTML validation.

  5. I’ve played around with fancy “drop caps” using graphics. I lock them in place with a span class and then I can run the text on the same line. Seems to work. That’s at the beginning of a line. I don’t know how it would work to try it in the middle of text. Be worth seeing, eh? Might have really, really strange results.

    As for children’s books? For early readers and poetry, heavy on the graphics, I’d experiment with static displays using a pdf file with the typography and images customized to the screen size of a specific reader–a tablet or an iPad. I only say this because I sometimes convert pdf files and the results are decidedly mixed, but the results are decidedly fixed–which is kind of weird, but I think it might work in some cases. Trying to do a one-size-fits-all-formats children’s picture book might be enough to drive a person mad (it’s tough enough with straight text). But doing a special edition, say, for a Kindle Fire, then recommending the reader use the landscape display for best results, it might find an audience. Then again, that could end up being a MONSTER sized file.

    Now it makes me wonder….

  6. The beginning of “A Candle for the Bag Lady” (within “The Night and the Music”) is coincidentally exactly where my K4 is positioned! The title is in a really nice font, but there is no fade-y block (pun possibly intended). Is the graphic only in the individual story version?

  7. Hi, Chris, yes, the fade is in the individual stories. I didn’t do THE NIGHT AND THE MUSIC collection. I need to find out what font that is in the collection, because i really like it. Not sure what I would use it for, but i do like it.

    • Giving away the occasional free short story or a full-length book in a series is a great marketing idea. Lawrence Block is one of a few authors I know of who has been doing this, and his Ehrengraf stories were what got me started actually *enjoying* my Kindle, in spite of the limitations of the device. I had downloaded what would be literally tons of print books from Project Gutenberg but couldn’t get into them, mainly due to the mediocre formatting. However, LB’s BLOG announced a giveaway of the first in the Ehrengraf series and subsequently described the excellent formatting work on the collection. That (and my having enjoyed the first free story) did the trick, and I clicked over the $4.99. Then, although I had read most of his Matthew Scudder stories, and being tempted by another freebie, “A Moment of Wrong Thinking” (did you format this one, too?), I felt it was well worth another $4.99 to buy “The Night and the Music”. For me, short stories are much easier to handle than full-length novels on a Kindle, and a complete collection is even better. Another great idea for which the e-reader excels is collections of magazine articles, such as LB’s “Generally Speaking”. Even to a non-stamp collector, they are quite interesting. I would have spent far more than $2.99 to find them and likely would never have bothered. But I digress.

      On the topic of this posting: “Looking for David”, another of Block’s Scudder shorts, is temporarily free for the Kindle, and I obtained it to compare its formatting with the collection itself. As usual, it looks excellent. On the K4, there are 16 levels of non-color in the bars, rather than an even fade. This is not as noticeable in the smaller bars throughout the story. How does it look on the PaperWhite? Does it fade smoothly? The cover image (which is a landscape ratio picture) doesn’t quite work on the Kindle in portrait mode, as it leaves nearly half of the screen blank, but you may not have had anything to do with that. They do a great job with properly-formatted text, but Kindle e-ink readers are still rather image-unfriendly.

  8. Hi, Chris,
    Kindles are pretty erratic when it comes to images. I keep playing with them and tinkering and trying to figuring out how to make them work the way I want them to. The biggest problem is that making them work perfectly on one device doesn’t guarantee they’ll work perfectly across the board. I keep trying anyway. I’m like a gambling addict–every little win makes me want to up the stakes. Heh.

    And yes, short stories. I’ve rekindled (pardon the pun) my love for short stories because of ebooks. I used to buy magazines just to get the short stories. I love it when my fave authors write short stories and put them up as singles.

  9. Pingback: How The Kindle Works | J W Manus

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s