View Single Post
Old 09-06-2013, 07:55 AM   #1
phossler
Wizard
phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.
 
Posts: 1,087
Karma: 447222
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
Q:font-size -- hardcode or percent?

Learned a lot from just reading the posts.

Interesting comment/recommendation in one of the other threads lead me to wonder if basing font size (and maybe other parameters) on a percentage instead of hard coding it is recommended for the e-reader compatibility.

I usually start out with my basic.css and hardcode h1 to be 2.5em (assuming that it will be 2.5x the paragraph font size)

Q1: Does it matter if I use 2.5em or 250%?
Q2: Should the percentage approach be applied to other parameters?



Code:
/* --------------------------------------------------------------------------------------------------- text*/
p {
	text-indent:2em;
	text-align: left;
	font-size: 1em;
	margin-top:0;
	margin-bottom: 1em;
	font-weight: normal;
	font-style: normal;
	line-height:125%;
}


/* for the first <p> after the h1, h2, h3 */
h1 + p {text-indent:0;}
h2 + p {text-indent:0;}
h3 + p {text-indent:0;}



/* --------------------------------------------------------------------------------------------------- headings */
h1 {
	page-break-before: always;
	page-break-after: avoid;
	text-indent: 0;
	text-align: center;
	margin-top:0;
	margin-bottom: 1em;
	font-size: 2.5em;
	font-weight: bold;
	font-style: normal;
	color:blue;	
}

h2 {
	page-break-after: avoid;
	text-indent: 0;
	text-align: center;
	margin-top:0em;
	margin-bottom: 1em;
	font-size: 2em;
	font-weight: bold;
	font-style: normal;
	color:blue;	
}

The family uses some flavor of Kindles, so I don't have to have 'global' compatibility, but I do like to do things right.

Thanks

Paul
phossler is offline   Reply With Quote