MobileRead Forums - View Single Post

koadic · 06-11-2011, 12:20 PM

I think I see what may be causing your issue, but it is only speculation as I don't have an iPod/Pad/Phone to test it on. In the style.css, try removing the 'height: 100%;' from the 'html, body' section and see if that remedies your situation. I believe that it is limiting everything wrapped by the html and body tags (each xhtml file) to '100%' of one ePub 'page', although one 'page' usually equals two 'screens' at normal font sizes (which is what you're getting).

Code:

html, body { 
    height: 100%;
    margin: 0;
    padding:0;
    border-width:0;
  }

The only time I would use the 'height: 100%;' (in the .css) or 'height="100%"' (inline) is for an img tag that I want full screen, but in those cases I find it even better to use svg instead.

Another couple things I see that you might want to do differently in the style.css (coming from my own experience) are:

Try to eliminate adding 'margins' to the top of paragraphs, and instead try to only add to the bottom. If you must add to the top, try to use 'padding' instead. For instance, the first time I opened up the epub in ADE, one of the paragraphs with the 'centerplusgap' class only showed half of the line (vertically), as the specified 'margin-top' of 2em pushed the bottom half of the line below the screen. If you had used padding, that line would have been pushed to the next page instead.

In addition, since you already specified a margin-top (again, you should use padding instead) and -bottom for 'p', there is no need to do so for every additional p.class, you only need to include whatever you want changed from the initial settings (such as text-indent, as you change it from 2em to 0em, or adding a text-align).

06-11-2011, 12:20 PM	#9
koadic Member Posts: 16 Karma: 172 Join Date: Oct 2010 Device: prs-650	I think I see what may be causing your issue, but it is only speculation as I don't have an iPod/Pad/Phone to test it on. In the style.css, try removing the 'height: 100%;' from the 'html, body' section and see if that remedies your situation. I believe that it is limiting everything wrapped by the html and body tags (each xhtml file) to '100%' of one ePub 'page', although one 'page' usually equals two 'screens' at normal font sizes (which is what you're getting). Code: html, body { height: 100%; margin: 0; padding:0; border-width:0; } The only time I would use the 'height: 100%;' (in the .css) or 'height="100%"' (inline) is for an img tag that I want full screen, but in those cases I find it even better to use svg instead. Another couple things I see that you might want to do differently in the style.css (coming from my own experience) are: Try to eliminate adding 'margins' to the top of paragraphs, and instead try to only add to the bottom. If you must add to the top, try to use 'padding' instead. For instance, the first time I opened up the epub in ADE, one of the paragraphs with the 'centerplusgap' class only showed half of the line (vertically), as the specified 'margin-top' of 2em pushed the bottom half of the line below the screen. If you had used padding, that line would have been pushed to the next page instead. In addition, since you already specified a margin-top (again, you should use padding instead) and -bottom for 'p', there is no need to do so for every additional p.class, you only need to include whatever you want changed from the initial settings (such as text-indent, as you change it from 2em to 0em, or adding a text-align). Last edited by koadic; 06-11-2011 at 12:32 PM.