Search code examples
csstypography

Is it possible to visualize subscript and superscript letter elements with CSS?

Many languages have letters with superscript elements (b, d; ل لا; პ, ქ; б, ё) and subscript elements (j, g; ق غ; გ, კ; у, р), but for an isolated letter it's not always clear whether it has one, until we put it near another one (პკ).

I wonder if I can visualize them main part of the line vs sub/superscript elements using just CSS by either adding borders or colorizing the "main line" (from baseline to x-height).

I know that there are units ex, cap (beside em) related to this, but for instance the following attempt doesn't work as expected: the idea is that height 1cap should cover all the letters except for the subscript elements:

.text-elements-visualization {
  background: green;
  font-size: 1em;
  line-height: 1;
  height: 1cap;
}
<div class="text-elements-visualization">
  abj
</div>

but as you can see, this is not the case:

enter image description here

How can I fix the provided snippet so that the color covers the whole letters except for the subscript elements? Could you provide a similar solution for superscript elements (or, ideally, for both, with color line of 1ex shifted to the precise location)?

Solution

  • Providing you only need a single line of text depicted this way, you can use an empty inline-block ::before pseudo-element. Since it's empty, it will be aligned with its bottom on the baseline. You can then use its background to show the ex and cap height above that baseline. Like this:

    body {
  font-size: 2em;
}

.text-elements-visualization::before {
  content: '';
  display:inline-block;
  width: 100%;          /* As wide as the container ... */
  margin-right: -100%;  /* ... but take up no space     */
}
.text-elements-visualization.ex::before {
  height: 1ex;
  background-color: palegreen;
}
.text-elements-visualization.cap::before {
  height: 1cap;
  background-color: moccasin;
}
.text-elements-visualization.both::before {
  height: 1cap;
  background-image: linear-gradient(
    moccasin calc(1cap - 1ex), 
    palegreen calc(1cap - 1ex)
  );
}
    <div class="text-elements-visualization ex">
  abj Hx b, d; ل لا; პ, ქ; б, ё, j, g; ق غ; გ, კ; у, р
</div>
<div class="text-elements-visualization cap">
  abj Hx b, d; ل لا; პ, ქ; б, ё, j, g; ق غ; გ, კ; у, р
</div>
<div class="text-elements-visualization both">
  abj Hx b, d; ل لا; პ, ქ; б, ё, j, g; ق غ; გ, კ; у, р
</div>