Quote:
Originally Posted by Jellby
No, because a CSS px is an absolute unit equal to 1/96 inch. It is not a screen pixel.
|
Only guaranteed on paper.
1) A CSS px in a web page on a screen in a browser is a magic unit. The behaviour is variable. It's only absolutely always 1/96″ on print to paper. The spec also changed maybe 2011.
2) As ever with ALL HTML and CSS an ebook isn't a web page and doesn't work quite the same. It's a little like web to screen and a little like web to paper (which paginates).
A px specified image won't scale as font is changed. It may or may not be ereader or screen physical pixels 1:1, or an exact integer multiple. The Kindle PW3 KF8 doesn't do them the same as most epub eink, or other some other Kindles.
The 1em = 12pt should apply on ereaders, but for paper or some web browsers 1em might not be 12pt. It is on KF8 (azw3), mobi (KF7), KFX and epub, but horizontal margins on kepub don't use 12pt=1em (I forget what it is). PDFs should use inches or cm.
Normally all text, margins and padding should used em, though for all except kepub, using pt (12pt = 1em) will work, which is handy as wordprocessor styles don't use em.
Images should normally be correct H & V px, except when you want it always the same % of screen, when you set either V to % (large portrait images) or H to % (large landscape images). The image % will use the screen height or width if the only enclosing scope is a <p class="cntp"> where the css is as below. The othe size property should be auto.
Never auto on margins.
.cntp{
// add font face
// add font size
margin-bottom: 3pt; //For landscape if using same class for caption or zero otherwise
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: center;
text-indent: 0
}
Optionally add a font for a caption
The same enclosing p can be used for specific sized images that are centred.
I've not tried that with a heading, but h2 should work instead of p if a suitable font size and face is specified.
Note this page on CSS only applies to Webpages and web browsers.
https://www.w3.org/Style/Examples/007/units.en.html
The epub2, epub3, kepub, mobi/KF7 (only inline, no CSS), KF8 (azw3) and KFX are NOT web pages rendered by a browser, though much w3 org stuff does work, plenty doesn't or behaves differently.
For example never use rem or px for fonts on ebooks and mostly 12pt is 1em and relative on ereaders, so that user font size change works (browsers can zoom in / out but not the same way as ebook views)
Apps on Android may ignore much CSS or mangle it.