Answers.Body: <p>For better compatibility, especially with older devices, you should stick with more basic HTML primitives. Those devices do not implement advanced browser functionality.</p>
  
  <p>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)</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-24T12:47:34.040Z
Answers.Text: Weeellll... I'd say  use <i>, but *always* style it with CSS. Then  it should work on any reader.
Answers.UserDisplayName: Auspex
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-01-21T11:07:53.200Z
Answers.LastActivityDate: 2014-01-21T11:07:53.200Z
Answers.UserDisplayName: Anthon
Answers.Body: <p>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 <code>&lt;i&gt;</code> for italic, <code>&lt;sup&gt;</code> 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).</p>
  
  <p>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</p>
  
  <pre><code>.corsivo { font-style: italic }
  .apicecorsivo { font-style: italic; vertical-align: super; font-size: 80% }
  </code></pre>
  
  <p>So if the exponents didn’t work, probably either the e-book is missing a CSS rule that makes <code>.apicecorsivo</code> appear as a superscript, or that rule was somehow lost when generating the .mobi version.</p>
  
  <p>For stylistic reasons, it is best to avoid mixing HTML and CSS formatting so that e.g. some exponents are marked with <code>&lt;sup&gt;</code>, some just styled with CSS (set on <code>&lt;span&gt;</code> elements for example). The reason is that generally you cannot guarantee that the style applied is really the same. Your example has <code>&lt;span class="apicecorsivo"&gt;n&lt;/span&gt;&lt;sup&gt;-1&lt;/sup&gt;</code>, which is meant to produce “n−1” as superscript, but it may happen that they will be <em>differently</em> subscripted, i.e. in different font size or in different vertical position.</p>
  
  <p>There are considerable <a href="http://www.cs.tut.fi/~jkorpela/math/#subsup">styling problems</a> with <code>&lt;sup&gt;</code> 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 <code>&lt;i&gt;</code> for italic (it’s rather safe) but CSS for superscripting. This would mean, in the example case, HTML markup like</p>
  
  <pre><code>&lt;i&gt;a&lt;/i&gt;&lt;i&gt;x&lt;/i&gt;&lt;span class="sup sgc-2"&gt;n&lt;/span&gt; + 
  &lt;i&gt;b&lt;/i&gt;&lt;i&gt;x&lt;/i&gt;&lt;span class="sup"&gt;&lt;i&gt;n&lt;/i&gt; &amp;minus; 1&lt;/span&gt; + … +
  &lt;i&gt;h&lt;/i&gt;&lt;i&gt;x&lt;/i&gt; + &lt;i&gt;k&lt;/i&gt; = 0
  </code></pre>
  
  <p>with CSS like</p>
  
  <pre><code>.sup { position: relative; bottom: 1.8ex; font-size: 80% }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-01-21T14:31:33.477Z
Answers.Text: I eventually found out the cause of the misbehaviour. Digging into the source code, I noticed that the CSS file had "apiceitalic" and not "apicecorsivo"! 
  BTW, I stumbled into the problems with `<sup>` and line spacing in the ebooks I produced myself, and I never thought of using a stylesheet, so thanks for the thorough explanation!
Answers.UserDisplayName: mau
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-01-25T01:32:28.220Z
Answers.Text: This is actually one of the few legitimate uses for `i` instead of `em`. Hah.
Answers.UserDisplayName: user98085
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-01-21T13:44:59.687Z
Answers.LastActivityDate: 2014-01-21T13:44:59.687Z
Answers.UserDisplayName: Jukka K. Korpela
Body: <p>I published a book which contains some (simple) math formulas, like <i>ax</i><sup><i>n</i></sup>+<i>bx</i><sup><i>n</i>&minus;1</sup>+ … + <i>hx</i> + <i>k</i> = 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 <i>axn</i>+<i>bxn</i>&minus;1+ … + <i>hx</i> + <i>k</i> = 0. I checked the content of the ebook, and I found this snippet:</p>
  
  <pre><code>&lt;span class="corsivo"&gt;ax&lt;/span&gt;&lt;span class="apicecorsivo"&gt;n&lt;/span&gt; + 
  &lt;span class="corsivo"&gt;bx&lt;/span&gt;&lt;span class="apicecorsivo"&gt;n&lt;/span&gt;&lt;sup&gt;-1&lt;/sup&gt; 
  + … + &lt;span class="corsivo"&gt;hx&lt;/span&gt; + &lt;span class="corsivo"&gt;k&lt;/span&gt; = 0
  </code></pre>
  
  <p>("corsivo" means italics in Italian and "apice" superscript, in case you wondered why the names of the classes). </p>
  
  <p>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?</p>
  
Tags: <html><css>
Title: When it is better to use plain HTML instead of CSS?
UserDisplayName: mau
ThreadText: # When it is better to use plain HTML instead of CSS?
  
  (Asked by: username_0 on 2014-01-21)
  
  I published a book which contains some (simple) math formulas, like *ax**n*+*bx**n*−1+ … + *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?
  
  **Tags:** html, css
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_3 on 2014-01-21. Score: 12 | Accepted answer
  
  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](http://www.cs.tut.fi/~jkorpela/math/#subsup) 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% }
  
  ```
  
  > **Comments:**
  > **username_0**: I eventually found out the cause of the misbehaviour. Digging into the source code, I noticed that the CSS file had "apiceitalic" and not "apicecorsivo"!  BTW, I stumbled into the problems with `<sup>` and line spacing in the ebooks I produced myself, and I never thought of using a stylesheet, so thanks for the thorough explanation!  
  > **username_4**: This is actually one of the few legitimate uses for `i` instead of `em`. Hah.  
  
  ---
  
  ### Answer by username_1 on 2014-01-21. Score: 4
  
  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)
  
  > **Comments:**
  > **username_2**: Weeellll... I'd say  use <i>, but *always* style it with CSS. Then  it should work on any reader.  
  
  ---
  
  