Epub formatting, keep text, padding and borders from getting cut between screens

[hoodyRacoon]

I'm auto generating the epub(in calibre, from odf, with the intended reader being google play books, and yes i know they do a bunch of crazy stuff to it in the backend) so there is not much if anything i can do with the html format since there will be thousands of occurrences between a few hundred different files through out the book, the intended look is a video-game popup box, but iv'e been stuck keeping the text, padding, border and fill from splitting between pages, this is for personal use only so the fix doesn't have to be elegant or cross-platform just work in google play books, and be a css only edit.

anyone have a clue? thanks for any help that can be given.

things iv'e tried
page-break-inline:avoid;
break-inline:avoid;

html

<p class="p-pb">some text</p>

css

.p-pb {
background-color: #113166;
display: block;
font-family: "Liberation Serif", serif;
font-size: 1em;
font-weight: bold;
line-height: 120%;
text-align: center;
color: white;
margin: auto;
padding: 0.4in;
border: #0986ed solid 4pt;
border-radius: 7px;
}

[GrannyGrump]

page-break-inline:avoid;

I think you mean
page-break-inside:avoid;

Some reader software and devices don't honor page-break-inside: avoid, although they mostly do ok with page-break-before:always and page-break-after:always. But try adding that to your .p-pb class, and see if it helps.

It does sound unusual, though, that your paragraph is splitting before the bottom border. I don't know if border-radius is allowed in epub --- what happens if you remove that from your css class?

[theducks]

.8in in padding (top+Bottom)
Why are you wasting my (or any customers) screen space . Not everyone has (or wants) a 10" tablet to read upon. Not only that, inch is an absolute size, not proportional like em or %

[hoodyRacoon]

Originally Posted by theducks

.8in in padding (top+Bottom)
Why are you wasting my (or any customers) screen space . Not everyone has (or wants) a 10" tablet to read upon. Not only that, inch is an absolute size, not proportional like em or %

well it work's fine for what i'm doing(on a 11." tablet that i read on), and this is translated webnovels from china, japan, korea ect.. i have zero rights to resell or even distribute, this is entirely for personal use

[hoodyRacoon]

Originally Posted by GrannyGrump

page-break-inline:avoid;

I think you mean
page-break-inside:avoid;

Some reader software and devices don't honor page-break-inside: avoid, although they mostly do ok with page-break-before:always and page-break-after:always. But try adding that to your .p-pb class, and see if it helps.

It does sound unusual, though, that your paragraph is splitting before the bottom border. I don't know if border-radius is allowed in epub --- what happens if you remove that from your css class?

meant inside sorry - mistyped,

anyhow editing the page break before or after the element i not a option, since there is no standard distribution, and the only other option would be to break both before and after and i would rather just deal with the splits between pages then only have sometimes a single line of text on the whole screen.

boarder-radius works fine(at least in google play books app, surprisingly not the web-view on desktop but its of little consequence)

why padding,is split between pages i couldn't tell you on the other hand, the boarder is just a consequence of the padding splitting between pages, i blame it on issues with google play books,

i am honestly willing to deal with the issues since the platform is well suited to my purpose(holding a library of personal use self made book while tracking last page read) i have over 350, 300-800 page epubs(according to googles page count) and it possible to redownload them all via google takeout, but the platform would have to be inciting

[theducks]

The entire block must fit in the (body) space assigned or it must split.
Boxes within boxes.

I avoid bottom margins, because those can force a blank 'page', even though the paragraph WORDS fit.

[hoodyRacoon]

Originally Posted by theducks

The entire block must fit in the (body) space assigned or it must split.
Boxes within boxes.

I avoid bottom margins, because those can force a blank 'page', even though the paragraph WORDS fit.

it was splinting on even two line paragraphs, and overflowing to the next page with only one, but i understand that "avoid" just means only do it if possible,

as far as using bottom margins, i had noticed that i from time to time had a blank page at the end of a chapter, never looked into it since it was a minor problem, but it's not a huge issue to edit my scripts and styling to use top margin.

[JSWolf]

The original CSS.

.p-pb {
background-color: #113166;
display: block;
font-family: "Liberation Serif", serif;
font-size: 1em;
font-weight: bold;
line-height: 120%;
text-align: center;
color: white;
margin: auto;
padding: 0.4in;
border: #0986ed solid 4pt;
border-radius: 7px;
}

The new CSS

.p-pb {
background-color: #113166;
display: block;
font-weight: bold;
line-height: 1.2;
text-align: center;
color: white;
border: #0986ed solid 4pt;
border-radius: 7px;
}

[theducks]

line-height: 1.2

there should be no units for this

[JSWolf]

Originally Posted by theducks

line-height: 1.2

there should be no units for this

Thanks for catching that. I've edited the post to fix the mistake.

[theducks]

Originally Posted by JSWolf

Thanks for catching that. I've edited the post to fix the mistake.

That is why writers need proof readers
We all fumble sometime