Maths and EPUB - best option?

SBT · 02-25-2013, 05:18 PM

(A question that has been covered before, I know, but not recently I believe...)
I'm working on "Men of Mathematics" by E.T. Bell, and wondering what is the best option for reproducing the maths exposited within. I know concensus is that SVG is the best course, but I'm currently of the mind that I would like to to it with CSS:

Mathematical symbols are constantly referred to within the text; it seems kludgy to use SVG for every x, y, and theta.
Most of the formulae are (typographically) simple. The most complicated are integrals of a fraction. I can do that in HTML/CSS
The required symbols are available in Unicode.

The problems that I see as possible are patchy UTF support, and inconsistent parsing of CSS margin values in readers, leading to ugly relative placements of symbols.

Anybody with views/experience of the issues?

Turtle91 · 02-25-2013, 06:52 PM

From what I understand, displaying Math symbology appropriately in a flowable ePub is VERY difficult...that was one of the issues that ePub3 solved. It can easily display the MathML. The problem is finding reader support for ePub3.

There seems to be some method of using mathjax...but I haven't delved into that area too much yet. You might be able to find some info here: http://www.mathjax.org/resources/epub-readers/

Cheers,

SBT · 02-25-2013, 07:15 PM

Well, progress on integrating MathML in just about anything sounds pretty depressing these days, with support for it removed from Chrome...

My biggest fear is that it'll prove too difficult to get consistent placement of stuff like indexes with HTML/CSS, even if I use tailor-made classes rather than <sup>/<sub>. Oh well, I suppose I'll have to resort to tables ... that'll make for nice, readable code

Anyway, at this stage I am hedging my bets and coding all the maths as LaTex, and then I'll convert it to the most suitable format at the end.

----
There are 3 kinds of people: Those who can count, and those who cannot.

DSpider · 02-26-2013, 01:10 AM

I'm in the same boat with an economics textbook, where there are even in-line fractions.

I wonder how InDesign handles them... It probably saves them as PNG or something like that, to ensure maximum compatibility (some e-readers don't support SVG, and neither does Mobi).

SBT · 02-26-2013, 02:49 AM

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:

Jellby · 02-26-2013, 04:21 AM

You should probably use the right character for the minus sign, instead of the hyphen.

Toxaris · 02-26-2013, 04:49 AM

So far I used Codecogs to create the formula and create an SVG from it. I can then display it as an image and remain scalable.

JSWolf · 02-27-2013, 06:52 PM

Quote:

Originally Posted by Toxaris

So far I used Codecogs to create the formula and create an SVG from it. I can then display it as an image and remain scalable.

That is a great way to do math.

Syniurge · 03-06-2013, 11:06 AM

Afaik no e-ink reader has MathML support yet, but most support SVG and embedded fonts.

The most future-proof way to write math formulas is still to use MathML (some HTML editors like Amaya and BlueGriffon feature tools for MathML) and make a SVG-only version of the book by using a XSLT processor and pmml2svg to automatically convert all MathML markup of a HTML file to embedded SVG markup. You'll also need the STIXBeta fonts, so either it'll have to be embedded in the epub or installed on the reader (it's possible with PRS+ on Sony readers)

02-25-2013, 05:18 PM	#1
SBT Fanatic Posts: 580 Karma: 810184 Join Date: Sep 2010 Location: Norway Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad	Maths and EPUB - best option? (A question that has been covered before, I know, but not recently I believe...) I'm working on "Men of Mathematics" by E.T. Bell, and wondering what is the best option for reproducing the maths exposited within. I know concensus is that SVG is the best course, but I'm currently of the mind that I would like to to it with CSS: Mathematical symbols are constantly referred to within the text; it seems kludgy to use SVG for every x, y, and theta. Most of the formulae are (typographically) simple. The most complicated are integrals of a fraction. I can do that in HTML/CSS The required symbols are available in Unicode. The problems that I see as possible are patchy UTF support, and inconsistent parsing of CSS margin values in readers, leading to ugly relative placements of symbols. Anybody with views/experience of the issues?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Kobobooks - no epub option	digiSara	Kobo Reader	25	09-28-2011 09:26 PM
maths -- translation help	TenaciousBadger	Lounge	5	10-23-2010 05:17 PM
e-ink reader for maths?	_icecream	Which one should I buy?	10	10-05-2010 04:15 PM
PRS-600 Maths with PRS?	kaveh	Sony Reader	7	04-30-2010 05:19 AM
how to get epub/fb2 books or convert best option	M9x3mos	ePub	2	02-19-2009 12:13 PM

02-25-2013, 06:52 PM	#2
Turtle91 A Hairy Wizard Posts: 3,346 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	From what I understand, displaying Math symbology appropriately in a flowable ePub is VERY difficult...that was one of the issues that ePub3 solved. It can easily display the MathML. The problem is finding reader support for ePub3. There seems to be some method of using mathjax...but I haven't delved into that area too much yet. You might be able to find some info here: http://www.mathjax.org/resources/epub-readers/ Cheers,

02-25-2013, 07:15 PM	#3
SBT Fanatic Posts: 580 Karma: 810184 Join Date: Sep 2010 Location: Norway Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad	Well, progress on integrating MathML in just about anything sounds pretty depressing these days, with support for it removed from Chrome... My biggest fear is that it'll prove too difficult to get consistent placement of stuff like indexes with HTML/CSS, even if I use tailor-made classes rather than <sup>/<sub>. Oh well, I suppose I'll have to resort to tables ... that'll make for nice, readable code Anyway, at this stage I am hedging my bets and coding all the maths as LaTex, and then I'll convert it to the most suitable format at the end. ---- There are 3 kinds of people: Those who can count, and those who cannot.

02-26-2013, 01:10 AM	#4
DSpider Evangelist Posts: 450 Karma: 343115 Join Date: Nov 2009 Location: Romania Device: PW2 2014	I'm in the same boat with an economics textbook, where there are even in-line fractions. I wonder how InDesign handles them... It probably saves them as PNG or something like that, to ensure maximum compatibility (some e-readers don't support SVG, and neither does Mobi).

02-26-2013, 04:21 AM	#6
Jellby frumious Bandersnatch Posts: 7,546 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	You should probably use the right character for the minus sign, instead of the hyphen.

02-26-2013, 04:49 AM	#7
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	So far I used Codecogs to create the formula and create an SVG from it. I can then display it as an image and remain scalable.

03-06-2013, 11:06 AM	#9
Syniurge Enthusiast Posts: 47 Karma: 18498 Join Date: Jul 2009 Location: France Device: PRS-650	Afaik no e-ink reader has MathML support yet, but most support SVG and embedded fonts. The most future-proof way to write math formulas is still to use MathML (some HTML editors like Amaya and BlueGriffon feature tools for MathML) and make a SVG-only version of the book by using a XSLT processor and pmml2svg to automatically convert all MathML markup of a HTML file to embedded SVG markup. You'll also need the STIXBeta fonts, so either it'll have to be embedded in the epub or installed on the reader (it's possible with PRS+ on Sony readers)

Advert

Advert