User:Camomiletea/Mobile

Things I've tried before, why and why not.

From Stories of Great Musicians

@media print, handheld {
  hr, .pb { page-break-before: always; }
  .pagenum, .toclink { display:none; }
  body { margin:0; width: 100%;}
  p {margin:0;}
  div.center {margin: .5em 0; }
}
@media handheld {
  img { max-width: 100%; }
  p { text-align:left; }
}

Don't waste space (or paper)

1) The main idea is "save space" since the screen space is more limited than on a computer; and this also applies to the print copies ("save paper"). And perhaps make it more book-like? I don't want spaces between paragraphs, so since I generally do have the paragraphs spaced, I need to remove that space with

  p {margin:0;}

Paragraphs then are only set off by an indent on the first line; my regular HTML has that --

p { margin: .75em 0; text-align: justify; text-indent: 1em; }

2) The same idea of "save space", "save paper" is the reason for:

  body { margin:0; width: 100%;}

Normally my body is not 100% width, but has margins on the side. When reading on a smaller screen, we want to maximize the amount of text visible, and the margins aren't helpful; and for printing purposes there already are built-in margins where the printer just won't print, and having extra margins wastes too much paper.

3) Related to point (1) above.

  div.center {margin: .5em 0; }

At first I couldn't remember what this was doing here. Then it dawned on me, this was the div surrounding my illustrations. Since I removed the space around the paragraphs, I needed a bit of space added here so that the illustrations weren't closed-up/flush against the paragraphs.

Do we need a page break?

  hr, .pb { page-break-before: always; }

Force a page break before thoughtbreaks, and other elements labeled .pb. I might have done the same for headings (h1,h2,h3 etc.) but typically I use a horizontal rule anyway before titles. Here's a thought: do I really need a page break before thoughbreaks, or could the horizontal rules be instead replaced with some horizontal space, like so?

  hr {display:none; margin-top: 2em;}

Ah, digging more through my file, what do I find but that I had indeed done that not just for the handheld, but for the normal HTML:

hr { visibility:hidden; margin: 4em auto; clear: both; }

Page numbers and links to contents

  .pagenum, .toclink { display:none; }

Page numbers are of no use on paper or in the mobile formats, because they will be different on your mobile device and on paper than what they were in the original book. And I usually have them printed in the margins, which I'm removing to save space in these media, so there's no space for them. They can be distracting. But they can also be useful? I need to think about an alternative way to present them if I want to keep them.

Now link to the table of contents is of no use on paper, but may actually be helpful in the mobile format. I don't know what I was thinking of when I did that fix for both print and handheld, but after viewing the book on my Kindle I liked having the link to Table of contents after chapter end (.mobi format doesn't support CSS).

Images

  img { max-width: 100%; }

This was advised in the forums. DON'T DO IT. It stretched out the images in grotesque ways in some readers. Typically, the image size get adjusted automatically in most readers. I just would ensure the width does not exceed 550px or so.

Readability

  p { text-align:left; }

This is advised for readability, since words don't get hyphenated in ebooks/paper, and having the text justified may create some odd spacing, make it more difficult to read. Honestly, I didn't like the way this fix looked. I prefer my text justified... More book-like.