Mathematical Formulas, Ebooks, and You

We haven’t solved the Riemann hypothesis, but we have solved how to write mathematical formulas in ebooks. If you’re like so many mathematicians and engineers accustomed to writing your papers in LaTeX, you’ll be happy to know that you’ll be using KaTeX. If you don’t know how to use either, we have a quick hack for you.

math

Whether you are a middle school teacher teaching logarithms or a Ph.D. student working on the Poincaré conjecture, we’ll show you how to include elegant mathematical formulas in your ebook.

Getting Started

Since we will be using Kotobee Author to showcase how to add math formulas to your ebooks, we recommend you check our Beginner’s guide to Kotobee Author to get you started with the software, if you haven’t done so already.

Now that you’ve downloaded, installed and become familiar with Kotobee Author, open up a blank ebook and let’s dive into the two ways to add math formulas to your ebook.

The Quick Hack

If you only want to add a formula or two, then you can quickly add them as images and we’ll show you how. If you will be writing any more than that, then please skip ahead.

What we’ll do is write the formula in an equation editor, then export it as an image. There are many dedicated applications and various online tools, but for the sake of this guide, we will be using CodeCogs’ Equation Editor. It’s free, straightforward and will export a GIF image quickly. If you have another formula editor, then go ahead and use it.

Now with the editor open, write your formula, using the buttons to add symbols. Cryptic symbols will appear in the text area, simply add numbers inside the brackets.  The equation will appear below the text box.

See how it looks below the text box. Change the font type and size, if you like.  Click on “Click here to Download Image (GIF).” Drag and drop the image into Kotobee, and you’re done.

The Real Deal

The ideal way to write formulas is as text directly in your ebook. Any ebook creation platform that allows external JavaScript library is all you need (and of course the library). There are several good libraries out there: Math Jax, jsMath, and KaTeX. We will be using for this tutorial KaTeX, which is a JavaScript library for displaying mathematical formulas on web browsers. It is based on LaTeX, which means it loads fast, and you can write mathematical expressions and formulas with LaTeX.

To get KaTeX working on Kotobee Author we can either download the library and add it to the ebook libraries or we can reference the online libraries (note that this will require an internet connection to display the formulas).

If you want your ebook to be read offline, then you will need to download the JS library and add it to your ebook. Here we’ll show you how to do it one of the most famous math books of our time: Alice’s Adventures in Wonderland. Charles Dodgson (aka Lewis Carroll) lived in a mathematically turbulent time. A lover of Euclidian geometry when algebra boomed with a renaissance of its own, his story is riddled with mathematical analogies, intended to set mathematicians of the time straight. Before we go too far off on a tangent, let’s return our focus to the center of this article. Follow these simple steps to start writing mathematical expressions in your ebook.

1. Download the KaTeX zip file. (Click to start the download.)

2. Upload three files to Kotobee Author in the File Manager.

file manager

The downloaded zip folder will contain many files.  You will only need three.  Once you’re in the File Manager, find and import the three files from the downloaded folder into these three locations.

FILENAME DESTINATION
1. katex.min.js EPUB > JS > katex.min.js
2. auto-render.min.js EPUB > JS > contrib > auto-render.min.js
3. katex.min.css EPUB > CSS > katex.min.css

katex js files

Now that we’ve imported the KaTeX library let’s see how we’re going to use them inside the ebook.

3. Go back to the editor and then go into Source mode to get the HTML of the ebook. Inside the <head> tag we are going to include the libraries we just imported.

<script type="text/javascript" src="../../js/katex.min.js"></script>
<script type="text/javascript" src="../../js/auto-render.min.js"></script>
<link type="text/css" rel="stylesheet" href="../../css/katex.min.css" />
<script>
 function ready(){
 renderMathInElement(document.getElementById("epubContent") || document.body, {delimiters: [ // mind the order of delimiters(!?)
 {left: "$", right: "$", display: true},
 {left: "$", right: "$", display: false},
 {left: "\\[", right: "\\]", display: true},
 {left: "\\(", right: "\\)", display: false},
 ]});
 }
 </script>

4. To have the equation rendered and not simply show the KaTeX connotations, we will execute the rendering function inside a function called ready() and have the body of the HTML run it first by adding onload=”ready()” to its tag.  So, change the body tag as follows:

<body onload="ready()">

5. To Parse the text inside the editor, add class=”parsed” to the paragraph tag.  Be certain to include the appropriate tags around your equation \[Your equation\], so the complete tags should look like this example of the integral of sinx with respect to x over the domain of 1 to π:

<p class="parsed">\[\int_1^\pi \sin x \mathrm{d} x\]</p>

If you’re not certain how to write your equation in LaTeX format, there are online editors like the one we used above, that will do it for you, so you can just copy-paste the text. In order to view your formula in Kotobee Author, go into the Preview Mode (green button lower right corner). preview

There it is. Now you’re all set and can add mathematical formulas that are not images, meaning higher efficiency and smaller file sizes.

Kotobee plans to add support for mathematical expressions, but for now, I hope this tutorial helped show you how to get mathematical formulas into your ebook, whether on Kotobee or elsewhere.

Have an ebook tip, trick, or technique you want to share? Maybe you have an idea for an ebook-related tutorial? Join us in the comments section below to share.

Read these posts.

The Amazing World of Elearning [Infographic]

How to Add a Feedback Form to Your Ebook

Ebook and LMS Integration Using LTI

16 Comments

  • Ronny Millet

    January 15, 2018

    tried but i still not see maths formulas in the preview

    Reply
    • Kotobee

      January 22, 2018

      Then most probably the javascript library linking was done incorrectly. You can send that example to support@kotobee.com to look at it.

      Reply
  • Hero Miles

    November 7, 2019

    This is a joke compared to other far better tools out there. Somebody may need to update their blog and not re-circulate articles from two years ago.

    Reply
    • Vipin_Kumar_R

      November 8, 2019

      Can you please let know what are the other tools which you are using? Probably helpful for others too??

      Reply
      • Hero Miles

        November 15, 2019

        What do I get out of it by showing/telling you?

        Reply
        • Kotobee

          November 16, 2019

          @Hero, your input is not helpful. If you have a better way to include Math Formulas in EPUB, share it beside your criticism. Otherwise, we get nothing from your criticism alone.

          Reply
  • olavolsf

    November 18, 2019

    my matrix math is not rendering correctly. The matrix delimiters are too small for a two by two matrix and are not aligned to the content for a two by three matrix. Anyway, I would like to use MATHJAX, not KATEX. I have tried to do that, but when I tried to insert the snipet (for inline equations) the editor had become confused and the html code became a mess.

    My question is: I know how to make mathjax work within kotobee author in display mode. I need to know how to make mathjax work within kotobee in inline mode.

    Reply
    • Kotobee

      November 20, 2019

      I believe our support has replied back to your ticket and now MathJax is working fine. Are you still facing any issues with this?

      Reply
  • peter

    June 7, 2020
    Reply
  • Rusty Mateo

    June 25, 2020

    Hi. Is the steps listed here the same steps to be used when using ASCIIMath in making equations?

    Reply
    • Kotobee

      June 28, 2020

      We now have an Equation tool in Kotobee Author that does ASCIIMath for you automatically. Be sure to check it out!

      Reply
  • Marites Sofetinia

    June 24, 2021

    How can I add equation in the questionnaire?

    Reply
    • Kotobee

      June 24, 2021

      If you’re creating a standard questionnaire, the most guaranteed way would be to add it as an image

      Reply
  • The fonzohendricks

    July 15, 2021

    I “think” I followed your explanation up till point no 4. What does “4. To have the equation rendered and not simply show the KaTeX connotations, we will execute the rendering function inside a function called ready() and have the body of the HTML run it first by adding onload=”ready()” to its tag. So, change the body tag as follows:” actually mean?

    Does it mean that I must replace the term “ready” with onload=”ready()” ?

    Is there an explainer video that I can follow step by step what you are trying to explain in words?

    May I also ask why KOTOBEE Author does not come with all these steps preloaded so all that I have to do is focus on typing in the Latex required for my equations?

    Alphonso Hendricks

    Reply
  • Teddy Jr Mirote

    August 26, 2021

    I followed all your instructions and get it to work on my Kotobee Author, but whenever I preview the chapter, the formula is like adding a new line to render and that the formula is centered. Is it possible to render the equation beside the text or next to a text?

    Reply
  • Olavo

    November 18, 2022

    If you allow me to say, I think this is the worst thing about kotobee author (which is, indeed, a good tool to write e-books). To write Latex in chapters using mathjax (the easiest way to render Latex formulae) is ok. Mathjax.org gives us the steps to do that and it works perfectly with your tool (obviously, since the chapters are html pages – one has only to be connected, which is ok). However, when it turns to get Latex/mathjax formulae to work INSIDE your question’s tool, it seems not possible to do. I am sorry, but using ‘images’ as the ‘most guaranteed’ way to get it work is not a solution – at least not a good one; not even a bad one. This is awful, because kotobee is, indeed, a very good tool in all other respects (that I have used so far). This is something that you should improve as soon as possible, for this problem endures for quite a number of years now. We have this working in all platforms such as Moodle(R)! Why not in Kotobee Author? I looked at the html code of the resulting Questionaire and it seems that you use a wrapper for it. In my opinion, you should change that – or at least give the option to change that – as soon as possible.
    Best Regards.

    Reply

Leave a Reply