View Single Post
Old 02-26-2013, 02:49 AM   #5
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
Right... (deep breath)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content= "text/html; charset=utf8" />
<style type="text/css">
span.rootkernel { border-style:solid none none none; border-width:1px; }
sup,sub { font-size:0.6em; }
sub.align {margin:auto 0.5em auto -0.5em;}
td.enumerator {border-style:none none solid  none;border-width:1px;text-align:center;}
tr.denominator {height:1.8em;}
td.denominator {text-align:center;vertical-align:top;}

</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat.
<table style="vertical-align:text-top;font-size:0.5em;display:inline-table">
<tr>
   <!-- integral symbol -->
   <td rowspan="2">
   <span style="margin-right:-0.1em;font-size:2.5em;">&int;</span>
   </td>
   <!-- integral limits -->
   <td><sup>x</sup></td>
    <!-- fraction -->
   <td class="enumerator">
      sin<sup>-1</sup> &theta;
   </td>
   <!-- integral symbol -->
   <td rowspan="2" style="padding-bottom:0.4em;font-size:1.3em;">
      &nbsp;d<i>x</i>
   </td>
</tr>
<!-- fraction -->
<tr class="denominator">
   <td><sub class="align">0</sub></td>
   <td class="denominator">
      <!-- square root -->
      &radic;<span class="rootkernel">a<sup>2</sup> + b<sup>2</sup><sub class="align">n</sub><i>x</i></span>
   </td>
</tr>
</table>
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Not exactly readable, but not as ugly as I feared it could get. Of course in real life you wouldn't put a formula like this inline, but this is a proof of concept. I was pleasantly surprised that reducing font size of <sup>/<sub> seems to make them more well-behaved. This is what it look like in Chrome:
Attached Thumbnails
Click image for larger version

Name:	math.png
Views:	1034
Size:	18.2 KB
ID:	102028  

Last edited by SBT; 02-26-2013 at 03:15 AM.
SBT is offline   Reply With Quote