View Full Version : Forcing paging - good or bad idea?


LukeA
05-18-2013, 02:56 PM
I am formatting a book of poems and am thinking that forcing each poem to be on a separate page would be desirable. They are mostly short enough that they will each fit on a single page of an e-reader with a 5-7 inch screen and typical font size.

I'm concerned that for someone that is using a large reader (full size tablet or laptop/desktop), that would result in a lot of white space below each poem. However, without forced page breaks, two poems on one page will result in the second being spread across two pages; that could be annoying for single-page-view devices.

Any thoughts or suggestions?

Jellby
05-18-2013, 03:38 PM
I'd prefer forced pagebreaks. Even with large screens, I think short poems are better displayed one per page. (If we were talking of large stanzas of a single poem, that might be different.)

LukeA
05-18-2013, 04:14 PM
Thanks - I feel the same way. I've certainly seen printed books that follow this approach and don't worry about the vast tracts of white space - in fact, it's a page design feature in those cases.

BTW, I've just discovered the page-break-inside feature and that may provide an alternative. It could allow multiple poems on one page while ensuring that the last poem on the page is not broken up (assuming the page-break-inside works as advertised for the user's reader).

RbnJrg
05-18-2013, 04:43 PM
Hi Luke; IMHO you should use forced pagebreaks and center "vertically" the poems.

mrmikel
05-18-2013, 05:22 PM
Vertical centering is not so easy to do, especially if someone changes the font size. A consistent amount from the top might be most easily achievable.

One to a page has my vote, too, especially since poetry books are seldom very long. A playground to work with different indents, line spacing, etc, too.

RbnJrg
05-18-2013, 09:39 PM
Vertical centering is not so easy to do, especially if someone changes the font size. A consistent amount from the top might be most easily achievable.

One to a page has my vote, too, especially since poetry books are seldom very long. A playground to work with different indents, line spacing, etc, too.

Hi mrmikel;

Vertical centering is not so difficult as it seems. Try this code:



div#container {
display: table;
width: 500px;
height: 700px;
margin: 0 auto;
padding: 18px;
border: 5px solid red; /* Only to see the "table" */
}

div#content {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
font-size: 1.0em;
text-align: left; /* for poetry */
padding: 0 36px; /* not neccesary, just to see the text better */
border: 5px solid black; /* Only to see the vertical align */
}



The "border" properties are not neccesary; I just included them in order that the centering it shows better. In order that the font-size doesn't affect the centering, margins and paddings (if any) must be in PIXELS.

The output is something like the following picture (from my K4NT):

http://www.mobileread.com/forums/attachment.php?attachmentid=106009&d=1368923758

The key is to use two "divs", one as "table" and the other as a "table-cell". After that, you can use the property "vertical-align" that makes all the work :)

Turtle91
05-19-2013, 01:08 AM
Hi mrmikel;

Vertical centering is not so difficult as it seems. Try this code:



div#container {
display: table;
width: 500px;
height: 700px;
margin: 0 auto;
padding: 18px;
border: 5px solid red; /* Only to see the "table" */
}

div#content {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
font-size: 1.0em;
text-align: left; /* for poetry */
padding: 0 36px; /* not neccesary, just to see the text better */
border: 5px solid black; /* Only to see the vertical align */
}



The "border" properties are not neccesary; I just included them in order that the centering it shows better. In order that the font-size doesn't affect the centering, margins and paddings (if any) must be in PIXELS.

The output is something like the following picture (from my K4NT):

http://www.mobileread.com/forums/attachment.php?attachmentid=106009&d=1368923758

The key is to use two "divs", one as "table" and the other as a "table-cell". After that, you can use the property "vertical-align" that makes all the work :)

I use this technique quit a bit and it seems to work in sigil, Marvin, and Firefox epubreader...but I haven't checked ADE, Nook, or Mobi...does it work there too?

Jellby
05-19-2013, 03:41 AM
Vertical centering is not so difficult as it seems. Try this code:

[...]

In order that the font-size doesn't affect the centering, margins and paddings (if any) must be in PIXELS.

That's the problem, there is no (consistent, reliable) way of referring to the screen height, so you must use a fixed vertical size, but that may break things badly. What if someone reads it in a phone with a smaller screen? Or in landscape orientation? And it doesn't work as intended in larger screens either.

RbnJrg
05-19-2013, 01:16 PM
I use this technique quit a bit and it seems to work in sigil, Marvin, and Firefox epubreader...but I haven't checked ADE, Nook, or Mobi...does it work there too?

Hi Turtle91; It doesn't work for the old mobi format (mobi7); it works for .kf8 (.azw3). Regarding Nook, I don't have that ereader and I can't answer you; maybe any other member of this forum can give us some info about Nook. Also I didn't the test in ADE :)

RbnJrg
05-19-2013, 01:30 PM
That's the problem, there is no (consistent, reliable) way of referring to the screen height, so you must use a fixed vertical size, but that may break things badly. What if someone reads it in a phone with a smaller screen? Or in landscape orientation? And it doesn't work as intended in larger screens either.

Hi Jellby;

I didn't do the try so I can give you a specific response but we have media queries in order to know those variables. For example, one could use:

@media screen and (orientation: portrait) {
/* Portrait styles */
}

@media screen and (orientation: landscape) {
/* Landscape styles */
}

Or something like this:

@media (max-height: 800px) and (orientation: landscape) {
/* code for 6 inches screens and Landscape mode */
}

Regards
Rubén

LukeA
05-19-2013, 03:26 PM
Wow Rubén - that's getting a bit more complex than I'd like, but I'll keep it in mind for future projects.

I'm thinking that I'll just use a % of height buffer on top of the poem (small value just so that the poem is not jammed to the top of the page while lots of white space is below and make sure that there is a page break following each.

Thanks for everyone's comments - it seems that there is not much of an objection to one poem per page.

Jellby
05-19-2013, 04:22 PM
I'm thinking that I'll just use a % of height buffer on top of the poem

But note that % in top/bottom margins is referred to the width, and not the height of the element, so the margin would actually be larger in landscape than in portrait orientation... at least in a compliant reader.

LukeA
05-19-2013, 04:53 PM
so the margin would actually be larger in landscape than in portrait orientation... at least in a compliant reader.

Which is exactly the opposite of what I'd want - thanks for the note; I'll experiment with what to do.

Toxaris
05-19-2013, 06:08 PM
I didn't do the try so I can give you a specific response but we have media queries in order to know those variables. For example, one could use:

@media screen and (orientation: portrait) {
/* Portrait styles */
}

@media screen and (orientation: landscape) {
/* Landscape styles */
}

Or something like this:

@media (max-height: 800px) and (orientation: landscape) {
/* code for 6 inches screens and Landscape mode */
}


Media queries are not supported in most ePUB readers, so that will not really help. Also with more and more HD readers coming out, this will give peculair results.

Jellby
05-20-2013, 04:53 AM
Also with more and more HD readers coming out, this will give peculair results.

If you are thinking about the pixels being to small, they shouldn't, because the CSS pixel is not a real screen pixel, but some kind of absolute unit.

Toxaris
05-20-2013, 06:48 AM
No, I was actually talking about the pixels defined in the div container.

Agama
05-20-2013, 08:33 AM
I'd prefer forced pagebreaks. Even with large screens, I think short poems are better displayed one per page. (If we were talking of large stanzas of a single poem, that might be different.)

+1 This would be my preference too.

Hi Luke; IMHO you should use forced pagebreaks and center "vertically" the poems.

Personally I'd prefer them not centred vertically, but to use some white space at the top of each page. Perhaps you could simply use something like margin-top:2em on the title paragraph of each poem. I think that this should work whether portrait or landscape.

Jellby
05-20-2013, 04:34 PM
No, I was actually talking about the pixels defined in the div container.

Yes, and I guess you mean that 700px will be too small in an HD screen, right?

But the fact is that 700px should be about the same size, regardless of the screen resolution, as according to the CSS spec the "px" unit is not a screen pixel, but something that depends only on the "normal" viewing distance (I don't recall the exact definition).