Epub CSS Stylesheet: body, html {...?

enuddleyarbl · 09-02-2022, 01:21 PM

Originally, in my css stylesheet for my epubs, I had set of styles included in body:

body {
....;
}

In following some suggestions here:

https://wiki.mobileread.com/wiki/CSS_HowTo#Essentials

I also included html:

body, html {
....;
}

What does including that html bit do? I'd assumed it applied those styles to the <html> section of the file as well as to the <body> section (which seemed odd since <body> is part of <html> (I think).

I've just now pulled the html bit out of that statement since it appears to be causing margin issues with Calibre's Viewer:

https://www.mobileread.com/forums/sh...d.php?t=348888

But, I'd still like to know if I should add it back.

I just edit the css of the commercial books I buy to be easier for me to read on my Kobo Forma as a kepub.

bookman156 · 09-02-2022, 02:04 PM

I notice that the mobileread Wiki page you link to specifies a margin in the pt unit. Kinda funny given the talk here.

I don't include html in an epub stylesheet. For webpages I put this on the html tag. It's something the browser probably does anyway but it just makes sure.

Code:

	html {
		box-sizing: border-box;
	}

As for what the difference is between html and body, it's one of those things that you need to have a lot of time to look into... and is not really worth worrying about in the end.

enuddleyarbl · 09-02-2022, 02:23 PM

The problem is that trying to find something specific to html in a css stylesheet is darn near impossible. Basically, "html" is nearly universal for every search involving css. Unfortunately, it usually refers to the actual html and not the css.

bookman156 · 09-02-2022, 02:29 PM

On a website it's also common to include html in a standard block like this early on and then forget about it:

Code:

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

bookman156 · 09-02-2022, 02:34 PM

Quote:

The problem is that trying to find something specific to html in a css stylesheet is darn near impossible. Basically, "html" is nearly universal for every search involving css. Unfortunately, it usually refers to the actual html and not the css.

If you wanted to style scrollbars in a browser you'd do it on the html tag.

Quoth · 09-02-2022, 03:18 PM

ebooks happen to use HTML, images and CSS. But not in the same way. So forget about Websites.

bookman156 · 09-02-2022, 03:37 PM

Quote:

ebooks happen to use HTML, images and CSS. But not in the same way.

Of course it uses it in the same way, it's just that ebooks don't support the range of HTML that websites do. In any case the question was why the mobileread wiki was using the html tag in its CSS. The question remains.

JSWolf · 09-03-2022, 04:45 AM

Quote:

Originally Posted by enuddleyarbl

Originally, in my css stylesheet for my epubs, I had set of styles included in body:

body {
....;
}

In following some suggestions here:

https://wiki.mobileread.com/wiki/CSS_HowTo#Essentials

I also included html:

body, html {
....;
}

What does including that html bit do? I'd assumed it applied those styles to the <html> section of the file as well as to the <body> section (which seemed odd since <body> is part of <html> (I think).

I've just now pulled the html bit out of that statement since it appears to be causing margin issues with Calibre's Viewer:

https://www.mobileread.com/forums/sh...d.php?t=348888

But, I'd still like to know if I should add it back.

I just edit the css of the commercial books I buy to be easier for me to read on my Kobo Forma as a kepub.

You do not need to style HTML with ePub. Also, the body style given in the Wiki is not good. Do not use it.

JSWolf · 09-03-2022, 04:47 AM

Quote:

Originally Posted by bookman156

On a website it's also common to include html in a standard block like this early on and then forget about it:

Code:

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

Sorry, but just no. That is not needed at all. Get rid of it. Reset code is never needed.

JSWolf · 09-03-2022, 04:49 AM

Quote:

Originally Posted by bookman156

Of course it uses it in the same way, it's just that ebooks don't support the range of HTML that websites do. In any case the question was why the mobileread wiki was using the html tag in its CSS. The question remains.

Because the person who put that in, did it in a way that you should not do. I would not style HTML and I would not use that body CSS. I've already posted body CSS that works very well.

Quoth · 09-03-2022, 06:00 AM

Quote:

Originally Posted by bookman156

Of course it uses it in the same way, it's just that ebooks don't support the range of HTML that websites do. In any case the question was why the mobileread wiki was using the html tag in its CSS. The question remains.

An ebook uses HTML and CSS. But it's not a webpage. Forget browsers and webpages and "HTML" tag in CSS.

Ebook renderers are closer to how a browser prints on paper, but not the same as that either. You can set say A6 or some custom paper size on your printer, and on a decent OS & Browser (not iOS or Android) select Print Preview (without background image printing) after page setup to select the new paper size. A lot of web page stuff simply doesn't work on paper or print preview. No Animation, video or sound. Automatic headers and footers not in the web page. No sensible use of transparency. Many tables might break on your small paper size. Images might no be the same size relative to text as on the screen web page.

It wouldn't be hard to make a browser with a "book" (i.e. codex) mode instead of infinite scroll, that behaved much like either Print Preview or an epub app were "paper size" is set by browser window size.

I'd love it. I hate websites with a forever giant scroll. So 2300 years old!

The Wiki is wrong.

PeterT · 09-03-2022, 07:49 AM

Quote:

Originally Posted by Quoth

The Wiki is wrong.

Update that page then!

Sent from my Pixel 4a using Tapatalk

bookman156 · 09-03-2022, 07:51 AM

Quote:

A lot of web page stuff simply doesn't work on paper or print preview.

I use @media print and then take out the elements that don't work on paper with display: none. Styling for print is just as important as for the various sizes of screen. There's no point not having webpages make sense on paper, but not everyone bothers.

Quote:

It wouldn't be hard to make a browser with a "book" (i.e. codex) mode instead of infinite scroll, that behaved much like either Print Preview or an epub app were "paper size" is set by browser window size.

I'd love it. I hate websites with a forever giant scroll. So 2300 years old!

That would certainly be interesting.

bookman156 · 09-03-2022, 07:57 AM

That wiki reference does make the interesting point that a margin on the body for top and bottom only affects the first and last page, so use @page instead. Never thought about that before.

JSWolf · 09-03-2022, 09:59 AM

Quote:

Originally Posted by bookman156

That wiki reference does make the interesting point that a margin on the body for top and bottom only affects the first and last page, so use @page instead. Never thought about that before.

The reason you've never thought about that before is because it's not something you'd thing about because it's wrong and if you had seen this happen, then you would have already thought about this.

That wiki has mistakes. This is just one of them. The body/html CSS is also wrong.

I've never seen margins in the body style effect only the first and last page/screen of a chapter. <body> is like a <div> in that it surrounds what it is the body style is applied to.

09-02-2022, 01:21 PM	#1
enuddleyarbl Guru Posts: 734 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	Epub CSS Stylesheet: body, html {...? Originally, in my css stylesheet for my epubs, I had set of styles included in body: body { ....; } In following some suggestions here: https://wiki.mobileread.com/wiki/CSS_HowTo#Essentials I also included html: body, html { ....; } What does including that html bit do? I'd assumed it applied those styles to the <html> section of the file as well as to the <body> section (which seemed odd since <body> is part of <html> (I think). I've just now pulled the html bit out of that statement since it appears to be causing margin issues with Calibre's Viewer: https://www.mobileread.com/forums/sh...d.php?t=348888 But, I'd still like to know if I should add it back. I just edit the css of the commercial books I buy to be easier for me to read on my Kobo Forma as a kepub.

09-02-2022, 02:04 PM	#2
bookman156 Addict Posts: 368 Karma: 1000000 Join Date: Mar 2016 Device: none	I notice that the mobileread Wiki page you link to specifies a margin in the pt unit. Kinda funny given the talk here. I don't include html in an epub stylesheet. For webpages I put this on the html tag. It's something the browser probably does anyway but it just makes sure. Code: html { box-sizing: border-box; } As for what the difference is between html and body, it's one of those things that you need to have a lot of time to look into... and is not really worth worrying about in the end.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
HTML and CSS compilers to epub	Josh Aenon	ePub	23	08-14-2019 12:12 AM
pagestyle.css extra / integrated in stylesheet.css / or not at all?	chaot	Workshop	14	02-24-2017 11:10 PM
epub code snippets (html / css)	zelda_pinwheel	ePub	196	10-09-2016 04:21 AM
ePub margins : @page vs stylesheet.css	Agama	Calibre	1	08-16-2010 04:37 PM
EPub conversion stylesheet.css problem	nycaleksey	Calibre	1	03-25-2010 11:42 PM

09-02-2022, 02:23 PM	#3
enuddleyarbl Guru Posts: 734 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	The problem is that trying to find something specific to html in a css stylesheet is darn near impossible. Basically, "html" is nearly universal for every search involving css. Unfortunately, it usually refers to the actual html and not the css.

09-02-2022, 03:18 PM	#6
Quoth the rook, bossing Never. Posts: 11,161 Karma: 85874891 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11	ebooks happen to use HTML, images and CSS. But not in the same way. So forget about Websites.

09-03-2022, 07:57 AM	#14
bookman156 Addict Posts: 368 Karma: 1000000 Join Date: Mar 2016 Device: none	That wiki reference does make the interesting point that a margin on the body for top and bottom only affects the first and last page, so use @page instead. Never thought about that before.