How to margin p-Tag for PocketBook?

[Slevin#7]

I wanna design for the PocketBook Reader app (iOS and Android) and keep struggling to set margins for paragraphs. Although PocketBook processes margins for div and some other tags properly, it refuses to apply my custom settings to p-tags. I've even raised precedence to almost maximum, but no satisfaction in sight...

HTML

<p>First Paragraph</p>
<p>Second Paragraph</p>

CSS

p {
  margin: 3em 0;
}

I have attached an EPUB2 with simple CSS styles, applying both shorthand and single set margins. Maybe someone would be so nice to take a quick look or at least can confirm that I'm not crazy

Many thanks for any help,
Slevin

[RbnJrg]

Originally Posted by Slevin#7

I wanna design for the PocketBook Reader app (iOS and Android) and keep struggling to set margins for paragraphs. Although PocketBook processes margins for div and some other tags properly, it refuses to apply my custom settings to p-tags. I've even raised precedence to almost maximum, but no satisfaction in sight...

HTML

<p>First Paragraph</p>
<p>Second Paragraph</p>

CSS

p {
  margin: 3em 0;
}

I have attached an EPUB2 with simple CSS styles, applying both shorthand and single set margins. Maybe someone would be so nice to take a quick look or at least can confirm that I'm not crazy

Many thanks for any help,
Slevin

Yes, PocketBook has issues to set margins on p tags. If you need a special margin for a particular <p>, then employ <div> or <span> and this last one with the property "display: block". Or employ padding for those p tags who needs margins; it's not the same but, depending on the layout of your epub it could work. Also if you want to try, could use "-webkit-margin-before:3em;" and/or "-webkit-margin-after:3em".

[Moonbase59]

In general, it’s never a good idea to target a specific reader. EPUB is supposed to be a reflowing format that should work on all readers equally good.

But you can, of course—freedom of choice. ;-)

[JSWolf]

Originally Posted by RbnJrg

Yes, PocketBook has issues to set margins on p tags. If you need a special margin for a particular <p>, then employ <div> or <span> and this last one with the property "display: block". Or employ padding for those p tags whor needs margins; it's not the same but, depending on the layout of your epub it could work. Also if you want to try, could use "-webkit-margin-before:3em;" and/or "-webkit-margin-after:3em".

Or just use RMSDK to view the ePub as that works for margin on a p tag.

[Slevin#7]

Originally Posted by RbnJrg

If you need a special margin for a particular <p>, then employ <div> or <span> and this last one with the property "display: block". Or employ padding for those p tags who needs margins; it's not the same but, depending on the layout of your epub it could work.

This could be a workaround for some special cases, but since we wanna design the whole ebook with lots of paragraphs having margins, it just seems odd to replace tons of p-tags with semantically incorrect divs. Also, if a reader is that stubborn on one of the most basic CSS features, it might just not be the reader of our choice

Originally Posted by RbnJrg

Also if you want to try, could use "-webkit-margin-before:3em;" and/or "-webkit-margin-after:3em".

Thanks for the tip, I didn't know about that property - seems to be one of the more ebook targeting ones. However, I've tried "-webkit-margin-before: 3em !important;" and its modern variation "margin-block-start: 3em !important;" but unfortunately without any success.

I will try to contact PocketBook (again) and tell them friendly to fix their bug - although I think they would prefer to stay in the mindset that this is a feature.

Originally Posted by Moonbase59

In general, it’s never a good idea to target a specific reader. EPUB is supposed to be a reflowing format that should work on all readers equally good.

You should be right, but unfortunately the creators of the reader software don't agree with you. So the only way to have an ebook which doesn't look like crap is to make a minimum working base version which at least shows all the text and images, no matter how ugly, and then pamper it bit by bit for the target readers you wanna support. It's just like it was years ago with all the many browsers, at least we don't need to take the IE with special targeting hacks any more into account.

Originally Posted by JSWolf

Or just use RMSDK to view the ePub as that works for margin on a p tag.

That is the framework to build your own ebook reader, right? Well, this would definitely be a solution for a big publishing company, but we are just a bunch of normal people who wanna provide ebooks for our community, so all the challenges and difficulties which come with that (ie. releasing apps on the Apple app store) are not worth the effort. But thanks for the tip anyways.

[Moonbase59]

Just had a quick look, and tried your file on a Pocketbook Era, the Calibre Viewer, Foliate and Thorium. All behave the same (and rightly so), because your CSS in styles.css is at fault, not any of the readers.

body {
  font-family: "Literata", serif;
}

body > p.p {
  margin: 1em 0 !important;
}

body > .p1.p1 {
  margin: 3em 0 !important;
}

body > .p2.p2 {
  margin-top: 3em !important;
  margin-right: 0 !important;
  margin-bottom: 3em !important;
  margin-left: 0 !important;
}

I have made a little change, removed the unneeded !important, added some text at the beginning of the paragraph CSS and made the background lightgray and the paragraph background white, so you can more easily spot what’s happening here.

body {
  font-family: "Literata", serif;
}

p {
  margin: 1em 0;
  background-color: white; /* remove when done */
}

p.p1 {
  margin: 3em 0;
  background-color: white; /* remove when done */
}

p.p2 {
  margin-top: 3em;
  margin-right: 0;
  margin-bottom: 3em;
  margin-left: 0;
  background-color: white; /* remove when done */
}

/* Show what's happening */
body {
  background-color: lightgray;
}

p::before {
  content: '(P) ';
}

p.p1::before {
  content: '(P1) ';
}

p.p2::before {
  content: '(P2) ';
}

The modified EPUB and CSS are in the attached ZIP for you to study. This version works nicely (and behaves the same) on all readers noted above. I also include actual screenshots from a Pocketbook Era, and from Foliate.

I don’t have any Pocketbook Apps here, but if they use the same (or at least a compliant) renderer in those apps, it should display the same. I’m not sure about iOS, Apple probably forces everyone to use their WebKit engine (from Safari), so for more special features you might have to use the -webkit-prefixes in addition there. Try to use as few as possible. Vendor-specific is evil. Like you say, we’ve had that with IE, back in the days.

Hint: Try to start out with easy CSS, don’t overcomplicate it.

[Slevin#7]

Originally Posted by Moonbase59

The modified EPUB and CSS are in the attached ZIP for you to study. This version works nicely (and behaves the same) on all readers noted above. I also include actual screenshots from a Pocketbook Era, and from Foliate.

I don’t have any Pocketbook Apps here, but if they use the same (or at least a compliant) renderer in those apps, it should display the same. I’m not sure about iOS, Apple probably forces everyone to use their WebKit engine (from Safari), so for more special features you might have to use the -webkit-prefixes in addition there. Try to use as few as possible. Vendor-specific is evil. Like you say, we’ve had that with IE, back in the days.

Yeah, what I thought, unfortunately it seems to be a bug in the iOS app. All other reader work fine, and since you can confirm that your kind of PocketBook works as well, it is an application issue. Can't say whether Android is affected too, but I will find out the next days.

Originally Posted by Moonbase59

All behave the same (and rightly so), because your CSS in styles.css is at fault, not any of the readers.

Hint: Try to start out with easy CSS, don’t overcomplicate it.

If you mean ".p1.p1" that's perfectly fine CSS, it's somewhat called raising precedence by connecting a class to itself and often used to avoid "!important". You could even do "p.p1.p1" and get a further level up. It's not a CSS functionality per definition, but also not faulty. I've never encountered a browser which didn't honor it, but maybe that is different with ebook readers. However, this was a last ressort after none of the previous attempts succeeded.

I've written CSS for over 20 years and am still willing to learn more, although there is a reason I mostly developed backend: predictability

Thank you and wish you a nice sunday

[Moonbase59]

Originally Posted by Slevin#7

[…] it seems to be a bug in the iOS app. […]

Pity. Looks like Safari/WebKit are becoming the new IE… I know why I keep away from Apple’s golden-cage expensive lifestyle products with reduced functionality. Then again, you might have to cater for that audience, too…

Let us know about that, and Android, too.

Originally Posted by Slevin#7

[…] wish you a nice sunday

Same to you!

[Slevin#7]

Originally Posted by Moonbase59

Pity. Looks like Safari/WebKit are becoming the new IE…

Can't say whether PocketBook uses the webkit engine or something else, but Apple Books (Apple's own reader) works as expected - and to be honest, it's one of the better ones.

What was I even thinking, that in 2025 all the silly differences would eventually converge and issues of this kind would only be known as anachronism...

[RbnJrg]

Originally Posted by Slevin#7

Can't say whether PocketBook uses the webkit engine or something else.

On Android, PocketBook employs an old version of webkit to rendering epub2/3 ebooks and also RMSDK to render epub2. Users can choose what engine is employed to read epubs.

[Slevin#7]

Originally Posted by RbnJrg

On Android, PocketBook employs an old version of webkit to rendering epub2/3 ebooks and also RMSDK to render epub2. Users can choose what engine is employed to read epubs.

Well, then that seems to be the case with iOS too, where you can go for an alternative renderer as well - which renders ebooks the same ugly way ADE does.

[Moonbase59]

So it’s down to the least common denominator… Sometimes things just suck.

[JSWolf]

Originally Posted by RbnJrg

On Android, PocketBook employs an old version of webkit to rendering epub2/3 ebooks and also RMSDK to render epub2. Users can choose what engine is employed to read epubs.

Some Pocketbook Readers have the latest version of RMSDK as part of the firmware,

[JSWolf]

Originally Posted by Slevin#7

Well, then that seems to be the case with iOS too, where you can go for an alternative renderer as well - which renders ebooks the same ugly way ADE does.

There is a version of ADE for iOS.

[Quoth]

Originally Posted by JSWolf

Some Pocketbook Readers have the latest version of RMSDK as part of the firmware,

Pocketbook app on Android probably isn't the same as a Pocketbook HW reader.