Member Avatar for Nathaniel10

I would like to express a superscript and a subscript in the same vertical space. For example, consider a variable called X with a subscript 1 that is squared.

I have searched for examples of what I want to do but cannot find anything close.

X<sub>1</sub><sup>2</sup>

The above is the best I can do, but I want the 1 and the 2 aligned vertically.

Does anyone know if this is possible and, if so, how to do it?

Thanks in advance.

PS: Word processors call this overstrike, but most search hits treat overstrikes as strike throughs.

  • 2 Contributors
  • 2 Replies
  • 108 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by Nathaniel10

Dani AI

Generated

A quick note: ' CSS nudge is a perfectly valid quick fix and it solved 's original problem. For a more robust, maintainable approach that keeps semantics (so assistive tech still sees the sub/sup), two patterns are useful: an inline-grid stack for modern layout, or a small positioned wrapper for precise control.

Example (inline-grid, easy to center and scale):

X<span class="stacked">
  <sup>2</sup>
  <sub>1</sub>
</span>
.stacked {
  display: inline-grid;
  justify-items: center;
  line-height: 0;
}
.stacked sup { transform: translateY(-0.45em); }
.stacked sub { transform: translateY(0.45em); }

Example (absolute positioning, precise control):

X<span class="overstrike">
  <sup>2</sup>
  <sub>1</sub>
</span>
.overstrike { position: relative; display: inline-block; }
.overstrike sup,
.overstrike sub { position: absolute; left: 50%; transform: translateX(-50%); }
.overstrike sup { top: -0.6em; }
.overstrike sub { top: 0.6em; }

Notes and troubleshooting: use em values so the offsets scale with font-size; test with the actual fonts used (sup/sub metrics vary by font). Grid is simpler and degrades nicely in modern browsers; absolute positioning gives finer control if the stacked characters need pixel-perfect alignment. For real mathematical typesetting, consider MathML/MathJax instead of handcrafted CSS.

See MDN for details on the semantics of sup/sub and layout techniques: MDN: sup element and MDN: CSS Grid Layout.

Recommended Answers

All 2 Replies

Member Avatar for hericles

You can use CSS to move the second one to the left:

<style>
sup {margin-left: -5px;} // or whatever suits
</style>
Edited by hericles because: made a small mistake!
Member Avatar for Nathaniel10

Thank you very much, Hericles. Your suggestion worked perfectly!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.