Fluid Superscripts and Subscripts

Superscripts and subscripts are indispensable elements in academic and scientific content, and they are indispensable from references to chemical formulas and mathematical expressions. However, browsers handle these elements more statically, which can easily cause problems: elements may be too small on mobile devices and too large on desktop monitors.

I have been working on solving the scaling problem of superscript and subscript in CSS for many years, and now I propose a modern solution using fluid computing. This article will explain why there are shortcomings in static methods and how to provide better typography for all viewports while maintaining accessibility. Best of all, this solution requires only concise and pure CSS code.

Problems with static scaling

The zoom problem is especially noticeable when comparing professional typography with browser default settings. See this example (adapted from Wikipedia), where the first "2" is professionally designed and included in the glyph set, while the second uses _{(top) and ^{(bottom) elements:}}

Historically, browsers have used font-size: smaller for ^{and _{elements, which is approximately 0.83 times the scaling. This was reasonable when CSS was used in simple documents in the early days, but in modern responsive designs, the font size could vary greatly, which creates problems. This is especially true when using fluid typography, text sizes can be scaled smoothly between extreme values.}}

Fluid Scaling: Better Solution

I developed a solution that scales more naturally across different sizes by combining fixed and proportional units. This approach ensures readability in small sizes while maintaining the correct proportions at large sizes without context-specific adjustments.

The following is how it works:

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(0.42em - 1.66px) */
}

• Natural Scaling: The decreasing formula ensures that superscripts and subscripts remain proportional to all sizes.
• Baseline Alignment: By using vertical-align: baseline and relative positioning, we prevent elements from affecting row heights and provide better control over offsets to meet your specific needs. You may also want to know where these values ​​come from - I will explain it below.

Mathematical Decomposition

Let's analyze how it works one by one:

Calculate font size (px)

In small sizes, the fixed 4px component has a greater impact. In large sizes, the 0.5em ratio dominates. The result is a more natural scaling at all sizes.

sup, sub {
  font-size: calc(0.5em + 4px);
  /* ... */
}

sub { 
  /* ... */
}

Calculate parent font size (em)

Inside the ^{and _{elements, we can calculate the font size of the parent:}}

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(2 * (1em - 4px));
}

sub { 
  top: calc(2 * (1em + 4px));
}

Fluid font size is defined as calc(0.5em 4px). To compensate for 0.5em, we first need to solve 0.5em * x = 1em and get x = 2. Here 1em represents the font size of the ^{and _{elements themselves. We subtract the fixed component of 4px from the current em value before the multiplication operation.}}

Vertical offset

For vertical offsets, we start with the default CSS positioning value and adjust it to suit our fluid scaling:

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(0.42em - 1.66px) */
}

This formula has been carefully calibrated to match the standard browser positioning:

• 0.5em (superscript) and 0.25em (subscript) are the default vertical offset values ​​(for example, used in frameworks such as Tailwind CSS and Bootstrap).
• We multiply by 0.83 to consider the browser's font-size: smaller scaling factor, which is used by default for superscripts and subscripts.

This method ensures that our superscripts and subscripts remain in familiar vertical positions while benefiting from improved fluid scaling. The results are consistent with what users expect from traditional browser rendering, but scaling more naturally at different font sizes.

Helpful tips

The exact scaling factor font-size: (0.5em 4px) is based on my analysis of superscripted Unicode characters in common fonts. You can adjust these values ​​at will to match your specific design needs. Here are some ways you can customize this method:

For larger scaling:

sup, sub {
  font-size: calc(0.5em + 4px);
  /* ... */
}

sub { 
  /* ... */
}

For smaller scaling:

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(2 * (1em - 4px));
}

sub { 
  top: calc(2 * (1em + 4px));
}

For backward compatibility, you may want to wrap it all in a @supports block:

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px));
}

sub { 
  top: calc(0.25 * 0.83 * 2 * (1em - 4px));
}

Final Demo

I built this small interactive demo to show different fluid scaling options, compare them to the browser's static scaling, and fine-tune vertical positioning to see what's best for your use case: (The demo link should be inserted here)

Try it in your next project and I'd love to hear what you think!

The above is the detailed content of Fluid Superscripts and Subscripts. For more information, please follow other related articles on the PHP Chinese website!