When it is better to use plain HTML instead of CSS?

Question

I published a book which contains some (simple) math formulas, like axⁿ+bxⁿ⁻¹+ … + hx + k = 0. Such formulas may be displayed just with (X)HTML, as you may see. However, some friends of mine complained that on their Kindle the formulas were misformatted, and the exponent was at the same level of the text, like axn+bxn−1+ … + hx + k = 0. I checked the content of the ebook, and I found this snippet:

<span class="corsivo">ax</span><span class="apicecorsivo">n</span> + 
<span class="corsivo">bx</span><span class="apicecorsivo">n</span><sup>-1</sup> 
+ … + <span class="corsivo">hx</span> + <span class="corsivo">k</span> = 0

("corsivo" means italics in Italian and "apice" superscript, in case you wondered why the names of the classes).

My question is: for better compatibility among browsers, is it better to create a lot of CSS styles and to add spans in the text, or to stick to (ugly) XHTML primitives?

Answer 1

In general, formatting with HTML (though regarded as outdated by many, including W3C) tends to work more reliably than formatting with CSS. Support to CSS varies and can be disabled (though this is rare and mainly applies to web browsers). However, HTML formatting is very limited. You can use <i> for italic, <sup> for superscript, and a little else, but you cannot e.g. specify the size or vertical position of superscripts (which depend on user agent and vary considerably).

In e-books, however, we can expect CSS work well for the simple formatting that would be possible in CSS, too. I tested your example, with an ebook created with Sigil and then converted to .mobi format with Calibre, and viewed with Kindle for PC, the exponents worked OK, the same way with HTML only, when I used the obvious CSS rules

.corsivo { font-style: italic }
.apicecorsivo { font-style: italic; vertical-align: super; font-size: 80% }

So if the exponents didn’t work, probably either the e-book is missing a CSS rule that makes .apicecorsivo appear as a superscript, or that rule was somehow lost when generating the .mobi version.

For stylistic reasons, it is best to avoid mixing HTML and CSS formatting so that e.g. some exponents are marked with <sup>, some just styled with CSS (set on <span> elements for example). The reason is that generally you cannot guarantee that the style applied is really the same. Your example has <span class="apicecorsivo">n</span><sup>-1</sup>, which is meant to produce “n−1” as superscript, but it may happen that they will be differently subscripted, i.e. in different font size or in different vertical position.

There are considerable styling problems with <sup> in web browsers; they tend to produce uneven line spacing as well as qualitatively questionable superscripts. Such issues might not be that relevant in e-book readers, but it might still be safest to use a combined strategy, using <i> for italic (it’s rather safe) but CSS for superscripting. This would mean, in the example case, HTML markup like

<i>a</i><i>x</i><span class="sup sgc-2">n</span> + 
<i>b</i><i>x</i><span class="sup"><i>n</i> &minus; 1</span> + … +
<i>h</i><i>x</i> + <i>k</i> = 0

with CSS like

.sup { position: relative; bottom: 1.8ex; font-size: 80% }

Answer 2

For better compatibility, especially with older devices, you should stick with more basic HTML primitives. Those devices do not implement advanced browser functionality.

The rendering engines in the ebook devices are lagging behind even more than desktop browsers as they need to be more stable (because upgrading is mostly out of the question). So recon you might be dealing with the equivalent of a 10+ year old desktop browser for a 8-9 year old early ebook device (i.e. Firefox 1.0, Internet Explorer 6)