Display block ... why? (Question about CSS and Calibre)

[NASCARaddicted]

Hello

I hope someone can explain this to me.

I created an xhtml File, together with a css file. I used normal "p" tags.

After that, I converted it into an epub, with Calibre. Then I looked at the finished epub file and notices, that it changed some of my css. What surprised me most is: On all p-tags in my css, Calibre added "display: block". Same goes for the headings and div tags.

Why? Is there a good explaination, why I should use display:block on epub files? Is this related to Widows and Orphans (I hope you know what I mean) or is there another good reason why I should use it?



Thanks in advance for your help.

[RbnJrg]

Originally Posted by NASCARaddicted

Hello

I hope someone can explain this to me.

I created an xhtml File, together with a css file. I used normal "p" tags.

After that, I converted it into an epub, with Calibre. Then I looked at the finished epub file and notices, that it changed some of my css. What surprised me most is: On all p-tags in my css, Calibre added "display: block". Same goes for the headings and div tags.

Why? Is there a good explaination, why I should use display:block on epub files? Is this related to Widows and Orphans (I hope you know what I mean) or is there another good reason why I should use it?

Thanks in advance for your help.

First at all, don't use Calibre to build your epub book, instead, use SIGIL; Sigil will respect your styles.

https://www.mobileread.com/forums/forumdisplay.php?f=203

http://web.sigil.googlecode.com/git/...with_epub.html

Regarding the "display: block" property added to your <p> tags that doen't matter; maybe you don't know it but <p> tags, by default, by omission, has the property "display: block". To write it (or not to write it) is the same for <p> tags.

Regards
Rubén

[mrmikel]

As I understand it display block forces it to occupy the width of the page and is normally displayed with blank lines before and after.

As was pointed out, this is unnecessary and if not removed, would keep you from making any special changes in the text for quotes or other special formatting.

This sort of thing is why it is best to simply bring your html into Sigil and edit it there. Sigil does not change your text unless you ask it to, or unless you activate HTML Tidy, which is generally not recommended.

Sigil will allow you put any change you want and facilitates the process by using "clips" which allow you to insert commonly used tags, words, etc of your choice.

If you have an xhtml file, you can open it in Sigil, then add additional file for your stylesheet. You need to do one more step, rightclick on the xhmtl file(s) and choose to link them to the stylesheet. This step is necessary in case you want to use more than one stylesheet for the various files. (one for poetry sections, another for plain text, or another for dialog sections.

Unless your work is quite short, you probably should keep sections under about 250k or so. This allows your epub to work in older readers and speeds rendering in new ones. Press control and enter at the end of each chapter and that will generally create reasonable size sections that work well.

[SBT]

Lately I've been wondering why I should use <p> instead of <div>?
Sometimes it's pretty annoying not to be able to nest block-type elements within <p>-tags.

[theducks]

Originally Posted by SBT

Lately I've been wondering why I should use <p> instead of <div>?
Sometimes it's pretty annoying not to be able to nest block-type elements within <p>-tags.

Looking at appendix D of theCSS2 (typical Defaults for HTML4...)
<div has none, no defaults
IMHO dive is a simple (box) container that can be customized

As with package shipping, use the best container designed for the article being shipped/displayed.
There is a whole section in CSS2 devoted to 'Block' (9: Visual formatting Model) [most which goes over my head ], but as I get it; controls how all the boxes are stacked together within the Cascade

[SBT]

<p> has a default top and bottom margin, <div> does not.
Both are block-display elements, but <p> only permits embedding inline-display elements. You can partially work around this by redefining the display property from inline to block for e.g. <span> elements, but it feels a bit icky...
The only downside I can see is by replacing <p> with <div> is that paragraphs are not separated by a blank space in readers that do not support CSS.

[NASCARaddicted]

Thanks so far for all your replies.

Originally Posted by RbnJrg

First at all, don't use Calibre to build your epub book, instead, use SIGIL; Sigil will respect your styles.

Yeah, I got away from Calibre a few months ago, because it changed my css file (like the added display:block stuff). I also tried Sigil, but I decided I will do EVERYTHING on my own, meaning: I am only using Notepad ++ ... well, not 100%. I also use a small program that splits the xhtml file in smaller parts (based on chapters) and a small program to pack the files to epub. But I do all the stuff like content.opf and toc.ncx just with Notepad ++. I know it is tedious, but therefore I know everything is 100% the way I want. And it makes it easier to change some things, if I have to. Oh, but just in case, you are thinking about possible errors while editing the epub files: I use an epub checker, to make sure that the epub is valid.

The thing why I mentioned Calibre is: of course, I unpacked some of the Calibre epubs and looked at the different files, to learn some things. That's how I discovered the display: block stuff. I wasn't sure, if I can get an advantage from it or not - but I guess, I can keep my css like it is right now (without the display: block)

Thanks again.

[JSWolf]

Originally Posted by SBT

<p> has a default top and bottom margin, <div> does not.
Both are block-display elements, but <p> only permits embedding inline-display elements. You can partially work around this by redefining the display property from inline to block for e.g. <span> elements, but it feels a bit icky...
The only downside I can see is by replacing <p> with <div> is that paragraphs are not separated by a blank space in readers that do not support CSS.

There is yet other downsides to replacing <p> with <div>. Reading the code looking just for those places where you actually want/need a <div> is harder. Also, to do the paragraph styles for most paragraphs, you'd have to do <div class="style"> where you can just do a <p> and define what <p> is. In ePub (via ADE), this makes the page numbers more accurate not using <div> where not wanted/needed.