View Single Post
Old 08-14-2014, 10:25 AM   #24
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
Quote:
Originally Posted by Tex2002ans View Post
Have examples? I would love to see! Always interested in how to make equations look better in EPUB.


CSS written with little premeditation, but I believe it displays OK in ADE despite not being strictly EPUB2 conformant, I think (inline-block isn't in the spec, is it?)

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<style>
div {
display:inline;
border-width:1px;
}
div.index,div.frac {
display:inline-block;
}
div.index {
vertical-align:-10%;
margin-left:-0.2em;
}
div.sup, div.sub, div.denominator, div.numerator {
display:block;
}
div.denominator, div.numerator {
text-align:center;
}
div.sup, div.sub {
text-align:left;
font-size:0.5em;
}
div.numerator {
border-bottom-style:solid;
}
div.surd {
margin-right:-0.2em;
vertical-align:10%
}
div.bigsurd {
margin-right:-0.15em;
font-size:2.3em;
vertical-align:-20%;
}
div.surdkernel {
padding:0 0.2em;
margin-top:0.3em;
display:inline-block;
border-top-style:solid;
}
div.bigsurd+div.surdkernel {
vertical-align:-49%;
}
</style>
</head>
<body>
<div class="math">
x =
<div class="bigsurd">√</div>
<div class="surdkernel">
	<div class="frac">
		<div class="numerator">π </div>
		<div class="denominator">x
			<div class="index">
				<div class="sup">n</div>
				<div class="sub">i+1</div>
			</div>
		</div>
	</div>
</div>
</div>
</body>
</html>
Attached Thumbnails
Click image for larger version

Name:	Screenshot from 2014-08-14 16:15:49.png
Views:	749
Size:	6.6 KB
ID:	126826  
SBT is offline   Reply With Quote