Forcing paging - good or bad idea?

[LukeA]

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]

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]

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]

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

[mrmikel]

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]

Originally Posted by mrmikel

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):

https://www.mobileread.com/forums/att...9&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]

Originally Posted by RbnJrg

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):

https://www.mobileread.com/forums/att...9&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]

Originally Posted by RbnJrg

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]

Originally Posted by Turtle91

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]

Originally Posted by Jellby

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]

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]

Originally Posted by LukeA

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]

Originally Posted by Jellby

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]

Originally Posted by RbnJrg

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]

Originally Posted by Toxaris

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.