How to Code Math in HTML / CSS

A Labor of Love

Seeing HTML was developed by some nerds at CERN, it’s kinda weird that there’s no obvious and simple way to make pretty math with it, right? In developing math learning games for our project Study Putty (“Where the Cool Kids Go to Scrape by on Tests”), I found myself face-to-face with this issue: just how does one code complex math in html?

Math in HTML--Test shot at Study Putty

First, a little background. For those who don’t know, HTML stands for “hat and taco markup language,” because of all the ‘<‘ and ‘>’ you need to use, being that they look like pointy hats or taco shells getting folded. Hence the technical name for this language.

While many fine publishers of Internet content opt to use images to represent expressions, it was my belief that with a little creative HTMLing/CSSing, I could do it in less time than if I had produced static images of the math formulas I needed. Plus, this way the formulas would be guaranteed to match the font and general styling of the page in which they would be displayed, even if that styling should subsequently change. But what about LaTeX, you say? MathJax? Man, ain’t nobody got time to learn that. I’m a web designer, not some nerd or something. Oh, wait. Wait. Yes, I am being informed being a web designer qualifies me.

And also that it is highly suspicious that I know to pronounce LaTeX like LAY-TECH. Continue Reading →

SnapToMail App by CaptureBites: Automated Image Forwarding for Android

Sheridan Programmers Guild recently collaborated with CaptureBites of Belgium to produce their SnapToMail app for Android, now a free download on Google Play Apps.

SnapToMail

SnapToMail App for AndroidThe core of CaptureBites’ SnapToMail, much like Sherprog’s own SnapTo product line, is the ability to take photos with a mobile device directly to an email address of your choice without using the device’s preloaded camera and email apps. It reduces the process to as few as two steps: 1) snap picture, 2) hit send.

This creates the opportunity for a streamlined, automated document flow for transport/shipping, warehouses, real estate, insurance claim adjustment, home inspection reporting, construction auditing, and crime scene investigation among other applications. SnapToMail can be a solution for any Android user who needs to email photos regularly, repeatedly, or in bulk.

This is how CaptureBites describes the app: Continue Reading →

Clean HTML from Word: a Hack

We’ve been exploring ebook production here at Sherprog, and it seems like the best way to produce a high-quality EPUB or MOBI ebook using consumer tools involves starting from HTML. I’ve written about the inadequacies of InDesign’s export to HTML and EPUB, which is a problem many small publishers undoubtedly face. But individuals who publish or self publish ebooks are probably working from Microsoft Word or another common word processor. Unfortunately, Word also tends to produce messy HTML via its native save-as HTML function. So how do you get clean HTML from Word? I would like to present a life hack.

The Problem

Not very clean HTML from Word

Classes and spans and styles oh MY

When you export HTML from Microsoft Word, what you tend to get is a class and a span with styling info for every paragraph. This is highly unnecessary, and frustrating if you are trying to control your text’s formatting for web or ebook publication. In order to clean up this HTML to any web developer’s reasonable standards, you would have to remove all these tiresome span tags and CSS declarations just so you could do the same work with a handful of human-designed CSS declarations for paragraph style. I have done this before, and manually. It took several hours to work through a novel-sized manuscript using search and replace to knock out these span tags one related group at a time in a text/code editor.

Necessity is the mother of hack.

That is when I noticed that I routinely pasted Microsoft Word content into WordPress and could hit publish and magically get a reasonable webpage every time. I went to a blog post and used my browser’s “view source” option to take a look at exactly what was happening and, bingo-automattico, there was beautiful, simple HTML with every paragraph in a nice <p> tag and not a lot else going on! Continue Reading →

Testing and Tweaking Your Ebook Using Calibre Conversion

In the previous post, we talked about choosing the right Calibre conversion settings for a general-purpose, reasonably-formatted ebook. In this continuation, I present a time-saving tip for using Calibre to reconvert your ebook during testing and tweaking. In programmer lingo, you might call it iterative testing. The publisher’s translation could be galley proofing, I guess.

Chapter Three: Reconverting Using Merge Book Records 

In which the protagonist saves time and frustration while device testing and tweaking his ebook, including how to use the Calibre merge function without screwing @*#( up. 

In my experience, when you first bring a book into Calibre to convert it, you should consider yourself squarely in the testing/tweaking phase and not in the publishing phase. You know that the moment you open your converted book you will find that typo that’s been there staring at you the whole time but which has somehow eluded your editorial eye until now. Or you will try the ebook on various devices and find it’s not working like you want. Whatever the case is, odds are you will have to change a few things and put it through Calibre conversion again–probably more than once.

You will quickly note that if you delete a book from your library and then re-import your source HTML/CSS, you will need to enter all of the metadata and settings over again. This can grow very aggravating if you have to re-convert your book more than a few times. By the fifteenth attempt, you may find yourself staring at the metadata fields glassy-eyed and wondering just what you named that book again. Continue Reading →

HTML to EPUB: Calibre Conversion Settings and How to Preserve Indents

Chapter One: HTML

In which the protagonist prepares an HTML document for Calibre conversion to EPUB format. Our story begins as the hero has completed the treacherous journey from InDesign, which is not designed to design ebooks at all, to clean, ebook-worthy HTML and CSS. And what a journey it has been, with action and romance and stylesheet declarations and dragons.

The first step to any good ebook is a clean, well-formatted source document. In my previous post, which was specifically about creating an EPUB from InDesign, I make the argument that the best way to generate an ebook is from HTML. This is because EPUB files are, at the core, HTML, and Kindle MOBI markup is supposedly not far removed from HTML either. This facilitates good, clean conversions, and when you do find formatting problems, they are easy to troubleshoot–if you know just a little HTML/CSS.

Here we will use Calibre to create an ebook from an HTML document and its resources. Calibre is a free tool and you can get it from http://calibre-ebook.com. Though Calibre was designed primarily for personal use, I think it is very handy for professional ebook creation when it is not being done in-bulk. (However, Calibre does offer command-line tools for automated conversions–but we’re not getting into that today.) Continue Reading →

InDesign EPUB Export Sucks (and How to Get Around It)

The Mystery of Ebooks

VertigoEbooks are still frequently a quandary to the small-to-mid-sized publisher. But with rising sales of ebooks and the popularity of mobile devices, there comes a time when you must look the ebook in the eye and face the future–or face the fad, at least. (I don’t know if ebooks as we know them will be around in ten years. I just know they’re around now so we better deal with them.) Anyway, realizing this, maybe you give in and poke the InDesign EPUB export button, just to see. InDesign chugs and spurts and gurtles a little bit and then spits out an ebook. You think, “Oh! How easy was that?” But then…the book is opened and the nightmare begins.

The nightmare is the slow-learned revelation that ebooks are not necessarily easy, despite the existence of tools that claim to be able to produce them from other file types at the push of a button. Only if your page layout is like that of a straightforward novel with no illustrations or special formatting is there a blessed chance in heck that any automated ebook export will produce a book that looks halfway good with no additional labor. This is especially true of many InDesign layouts, because you will have layers and graphic frames and fonts and style overrides up the wazoo. All this fancy formatting that is great for print will not translate. Here is why in a nutshell: Ebooks are basically HTML, and not advanced web2.0/webapp/skynet HTML, but stripped-down, carved in a stone slab as Cuneiform kind of HTML–no layers, limited positioning, tricky-to-non-existent font embedding…It’s barbarian by web design standards.

However, there is a solution to this, and that is to make it TAO. EPUB books don’t allow a full array of styling control, and so you must relinquish control. The solution to the issue is “Simplify, simplify, simplify.” Thoroughly simplify–or Thoreau-ly simplify, as in Henry David Thoreau-ly, since I believe that is his quote. In simplicity, your document will find the elegance of ebook beauty. Embrace white space, embrace the inability to layer or position, and embrace the fact that ereaders may or may not substitute their plain defaults for your special fonts. Most of all, you must embrace the concept of flowing text. You have almost no control over how any given page will look. Continue Reading →

The Ebook Cover: Graphic Design for the Under-Confident

Part two of two in a mini-series on ebook covers. The first part was about meeting marketplace specifications in the simplest way possible. Here we’re going to talk about the ebook cover design itself.

Graphic Design

Books get judged by their covers. One cannot over-stress how important visuals are for making a sale. Are you a graphic designer? How many clients have contracted your services? Unless your answer to this question is a non-zero positive integer, you might want to find someone else to help you.

Of all the aspects of producing an ebook as an individual who is self-publishing or as a small business, this is the one thing you really should consider outsourcing if you do not have the skills ready at your disposal. The human beast is a visual animal. It doesn’t matter what the inside of your book is like–nobody will see it if the outside screams unprofessional and low-quality product.

That’s an exaggeration. Actually professional publishers put out a lot of mediocre covers, and those books still sell. The cover is less-than-optimal because they are keeping production costs down, while the book still makes it into consumers’ hands because they have a great big marketing machine at their disposal. The difference between you and them is that you don’t have the goliath marketing machine. A great cover can only help you overcome this handicap.

The Blue Fox by Sjon (Bjartur, 2003)

A fine cover in my opinion. Anybody else get the sense Sjón is attempting to make a brand of himself? (Image: Bjartur)

For the bold DIYer who is not frightened by this attempt at intimidation, a few basic design guidelines can help you out. Like guidelines in any artistic medium, they are meant to be broken and fudged, but in general: Continue Reading →

The Ebook Cover: How to Meet Requirements–Size, Format, Legal

As part of her series on ebook production, Anne has invited me to prepare some distilled guidelines for ebook covers. This is part one of a mini-series on the cover. In this segment, I tackle best practices in regard to the major marketplaces. Part two will be about graphic design.

Ebook Cover Requirements

Ebook cover example

You might not believe it, but you should be able to satisfy all major ebook marketplace requirements for cover size if you follow two simple rules:

  1. The small dimension (width) of your cover should be at least 1400 pixels, which sounds like overkill given that your book cover will almost always be displayed either as a thumbnail or at about 400-800 pixels when viewing the ebook on a reading device, but I guess we need to prepare for that one in a million ebook aficionado who insists ebooks are best read on a plasma television screen. (Okay, I exaggerate, but this does make the cover wider than the screen of my 13′ MacBook Pro.)
  2. Your cover must be taller than it is wide, like most physical books. Most stores will recommend that your specific ratio is close to 6:9, but will not enforce exactitude. Others such as Barnes & Noble prefer a tall aspect, but do not require it.

You should consult the literature for the marketplaces you plan to partner with, but if you make it bigger than 1400 wide, you should be set for most (I won’t claim all) stores, including these biggies: Amazon, Google Play, iTunes, Barnes & Noble, and Smashwords. Also I highly recommend picking a value somewhat above 1400 pixels but probably less than 2000. In resolution, bigger is better, but you aren’t going to be putting this on a billboard or a movie screen…Or are you? Continue Reading →