Answers.Body: <p>The CSS KDP problem: KDP Kindle uses its own built-in CSS framework to adhere to when setting <code>&lt;sub&gt;</code> and <code>&lt;sup&gt;</code> style, and some control reverts to Kindle when using their CSS <code>&quot;as is&quot;</code>.</p>
  <p>Both <code>&lt;sub&gt;</code> or <code>&lt;sup&gt;</code> are not ideally intended for complex MathML equations in an epub. Using <code>&lt;sup&gt;&lt;sup&gt;</code> is easy in a web browser, but it gets trickier to make it function exactly as desired in an EPUB. How will every eReader device render it?</p>
  <p>We presume you want to stick with <code>&lt;sup&gt;&lt;sup&gt;</code> or a <code>&lt;sup&gt;&lt;span&gt;</code> concept, so either of the next two options below should work (test it on your device!).</p>
  <p>This first method uses a span tag which says to Kindle that this is NOT a <code>&lt;sup&gt;</code> and to let us use our code. Per another StackExchange post they indicated that to get KDP to recognize your CSS you need to re-declare some of it (i.e. font info) and if so, add it to the CSS.
  The following was tested on ADE and KDP previewer tool in Windows environ (but didn't test it LIVE). It will be key to test it on your device to be sure it works as intended. Some more minor code adjustment may be needed on your part.</p>
  <p>XHTML code using a span tag:</p>
  <pre><code>2&lt;sup&gt;n&lt;span class=&quot;afterSuper&quot;&gt;2&lt;/span&gt;&lt;/sup&gt;
  </code></pre>
  <p>CSS code:</p>
  <pre><code>.afterSuper {
    font-size: inherit; /*get value of parent*/
    line-height: 0;
    top: -.5em;
    position: relative;
  }
  
  &lt;!--CSS that may or may not be needed--&gt;
  sub,
  sup {
    font-family: serif;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-size: 80%;
    font-size: 0.83em; /*or the above*/
    line-height: 0;
    position: relative;
  }
  sub {bottom: -0.25em;}
  sup {top: -0.5em;}
  </code></pre>
  <p>This second method uses <code>&lt;sup&gt;&lt;sup&gt;</code> twice in a row which is from an StackExchange (year 2020) post on this very subject. This works in the way you hope to do it.</p>
  <p>XHTML code:</p>
  <pre><code>2&lt;sup&gt;n&lt;sup class=&quot;afterSup&quot;&gt;2&lt;/sup&gt;&lt;/sup&gt;
  </code></pre>
  <p>CSS code:</p>
  <pre><code>.afterSup {
    font-size: inherit; /*get value of parent*/
    line-height: 0;
    top: -0.5em;
  }
  </code></pre>
  <p>If you code with MathML this is a useful link:
  <a href="https://w3c.github.io/mathml-core/#mathml-elements-and-attributes" rel="nofollow noreferrer">W3C external link</a></p>
  <p>The MathML spec doesn't seem to have a &lt;_&gt; code for a third level numeral. Perhaps explore:</p>
  <pre><code>&lt;munderover&gt;
  &lt;mpadded&gt;
  &lt;mphantom&gt;
  &lt;msubsup&gt;
  </code></pre>
  <p>Here is another link on superscript:
  <a href="https://stackoverflow.com/questions/501671/superscript-in-css-only">StackOverflow</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-12-27T11:07:07.910Z
Answers.Text: Thanks!  I ended up chancing "top" to 0.2em but otherwise using your first method.
Answers.UserDisplayName: Bob Brown
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-12-26T01:35:06.023Z
Answers.LastActivityDate: 2023-12-27T17:53:42.927Z
Answers.LastEditDate: 2023-12-27T17:53:42.927Z
Answers.UserDisplayName: granite
Body: <p>I am trying to convert (from Adobe InDesign) print book with a small amount of math.  I've used InDesign to save a reflowable ePub.  Now I'm polishing and fixing. A couple of items require double superscripts, <em>e.g.</em> 2 to the power <em>n</em> squared, or 2<sup>n<sup>2</sup></sup>.</p>
  <p>The fragment above was coded <code>2&lt;sup&gt;n&lt;sup&gt;2&lt;/sup&gt;&lt;/sup&gt;</code>.  If I feed that into the Kindle Previewer, it comes out 2<sup>n2</sup>.</p>
  <p>Is there a way to work around this to get a second-level superscript?</p>
  
Tags: <kindle>
Title: Double Superscripts in Kindle Ebooks
UserDisplayName: Bob Brown
ThreadText: # Double Superscripts in Kindle Ebooks
  
  (Asked by: username_0 on 2023-12-23)
  
  I am trying to convert (from Adobe InDesign) print book with a small amount of math. I've used InDesign to save a reflowable ePub. Now I'm polishing and fixing. A couple of items require double superscripts, *e.g.* 2 to the power *n* squared, or 2n2.
  
  The fragment above was coded `2<sup>n<sup>2</sup></sup>`. If I feed that into the Kindle Previewer, it comes out 2n2.
  
  Is there a way to work around this to get a second-level superscript?
  
  **Tags:** kindle
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2023-12-26. Score: 2 | Accepted answer
  
  The CSS KDP problem: KDP Kindle uses its own built-in CSS framework to adhere to when setting `<sub>` and `<sup>` style, and some control reverts to Kindle when using their CSS `"as is"`.
  
  Both `<sub>` or `<sup>` are not ideally intended for complex MathML equations in an epub. Using `<sup><sup>` is easy in a web browser, but it gets trickier to make it function exactly as desired in an EPUB. How will every eReader device render it?
  
  We presume you want to stick with `<sup><sup>` or a `<sup><span>` concept, so either of the next two options below should work (test it on your device!).
  
  This first method uses a span tag which says to Kindle that this is NOT a `<sup>` and to let us use our code. Per another StackExchange post they indicated that to get KDP to recognize your CSS you need to re-declare some of it (i.e. font info) and if so, add it to the CSS.
  The following was tested on ADE and KDP previewer tool in Windows environ (but didn't test it LIVE). It will be key to test it on your device to be sure it works as intended. Some more minor code adjustment may be needed on your part.
  
  XHTML code using a span tag:
  
  ```
  2<sup>n<span class="afterSuper">2</span></sup>
  
  ```
  
  CSS code:
  
  ```
  .afterSuper {
    font-size: inherit; /*get value of parent*/
    line-height: 0;
    top: -.5em;
    position: relative;
  }
  
  <!--CSS that may or may not be needed-->
  sub,
  sup {
    font-family: serif;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-size: 80%;
    font-size: 0.83em; /*or the above*/
    line-height: 0;
    position: relative;
  }
  sub {bottom: -0.25em;}
  sup {top: -0.5em;}
  
  ```
  
  This second method uses `<sup><sup>` twice in a row which is from an StackExchange (year 2020) post on this very subject. This works in the way you hope to do it.
  
  XHTML code:
  
  ```
  2<sup>n<sup class="afterSup">2</sup></sup>
  
  ```
  
  CSS code:
  
  ```
  .afterSup {
    font-size: inherit; /*get value of parent*/
    line-height: 0;
    top: -0.5em;
  }
  
  ```
  
  If you code with MathML this is a useful link:
  [W3C external link](https://w3c.github.io/mathml-core/#mathml-elements-and-attributes)
  
  The MathML spec doesn't seem to have a <\_> code for a third level numeral. Perhaps explore:
  
  ```
  <munderover>
  <mpadded>
  <mphantom>
  <msubsup>
  
  ```
  
  Here is another link on superscript:
  [StackOverflow](https://stackoverflow.com/questions/501671/superscript-in-css-only)
  
  > **Comments:**
  > **username_0**: Thanks!  I ended up chancing "top" to 0.2em but otherwise using your first method.  
  
  ---
  
  