Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 09-02-2022, 02:21 PM   #1
enuddleyarbl
Fanatic
enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.
 
enuddleyarbl's Avatar
 
Posts: 592
Karma: 710178
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.
enuddleyarbl is offline   Reply With Quote
Old 09-02-2022, 03:04 PM   #2
bookman156
Addict
bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.
 
Posts: 368
Karma: 740232
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.
bookman156 is offline   Reply With Quote
Advert
Old 09-02-2022, 03:23 PM   #3
enuddleyarbl
Fanatic
enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.
 
enuddleyarbl's Avatar
 
Posts: 592
Karma: 710178
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.
enuddleyarbl is offline   Reply With Quote
Old 09-02-2022, 03:29 PM   #4
bookman156
Addict
bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.
 
Posts: 368
Karma: 740232
Join Date: Mar 2016
Device: none
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;}

Last edited by bookman156; 09-02-2022 at 03:41 PM.
bookman156 is offline   Reply With Quote
Old 09-02-2022, 03:34 PM   #5
bookman156
Addict
bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.
 
Posts: 368
Karma: 740232
Join Date: Mar 2016
Device: none
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.
bookman156 is offline   Reply With Quote
Advert
Old 09-02-2022, 04:18 PM   #6
Quoth
the rook, bossing Never.
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 6,723
Karma: 55555555
Join Date: Jun 2017
Location: Ireland
Device: Both Kinds: epub based makes and Kindle
ebooks happen to use HTML, images and CSS. But not in the same way. So forget about Websites.
Quoth is offline   Reply With Quote
Old 09-02-2022, 04:37 PM   #7
bookman156
Addict
bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.
 
Posts: 368
Karma: 740232
Join Date: Mar 2016
Device: none
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.
bookman156 is offline   Reply With Quote
Old 09-03-2022, 05:45 AM   #8
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 69,191
Karma: 116053285
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by enuddleyarbl View Post
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 is offline   Reply With Quote
Old 09-03-2022, 05:47 AM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 69,191
Karma: 116053285
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by bookman156 View Post
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 is offline   Reply With Quote
Old 09-03-2022, 05:49 AM   #10
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 69,191
Karma: 116053285
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by bookman156 View Post
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.
JSWolf is offline   Reply With Quote
Old 09-03-2022, 07:00 AM   #11
Quoth
the rook, bossing Never.
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 6,723
Karma: 55555555
Join Date: Jun 2017
Location: Ireland
Device: Both Kinds: epub based makes and Kindle
Quote:
Originally Posted by bookman156 View Post
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.
Quoth is offline   Reply With Quote
Old 09-03-2022, 08:49 AM   #12
PeterT
Grand Sorcerer
PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.
 
PeterT's Avatar
 
Posts: 12,026
Karma: 71684510
Join Date: Nov 2007
Location: Toronto
Device: Nexus 7, Clara, Touch, Tolino EPOS
Quote:
Originally Posted by Quoth View Post



The Wiki is wrong.
Update that page then!


Sent from my Pixel 4a using Tapatalk
PeterT is offline   Reply With Quote
Old 09-03-2022, 08:51 AM   #13
bookman156
Addict
bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.
 
Posts: 368
Karma: 740232
Join Date: Mar 2016
Device: none
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 is offline   Reply With Quote
Old 09-03-2022, 08:57 AM   #14
bookman156
Addict
bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.bookman156 ought to be getting tired of karma fortunes by now.
 
Posts: 368
Karma: 740232
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.
bookman156 is offline   Reply With Quote
Old 09-03-2022, 10:59 AM   #15
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 69,191
Karma: 116053285
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by bookman156 View Post
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.

Last edited by JSWolf; 09-03-2022 at 11:03 AM.
JSWolf is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 09:46 PM.


MobileRead.com is a privately owned, operated and funded community.