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?

1 Answer 1


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-->
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

The MathML spec doesn't seem to have a <_> code for a third level numeral. Perhaps explore:


Here is another link on superscript: StackOverflow

  • Thanks! I ended up chancing "top" to 0.2em but otherwise using your first method.
    – Bob Brown
    Commented Dec 27, 2023 at 11:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.