Search code examples
htmlcssappearance

Customize Superscript as in Songbook

I want to do a songbook in HTML, something like

enter image description here

I wonder whether this can be easily achieved by some css trick on the <sup> tag (or similar)

<sup>F</sup>Yesterday <sup>Em7</sup>  all my <sup>A7</sup> troubles seemed so <sup>Dm</sup>far away <sup>Dm/C</sup>   

<sup>Bb</sup>now I <sup>C7</sup>need a place to <sup>F</sup>hide away <sup>C</sup>oh <sup>Dm</sup>I <sup>G7</sup>believe in <sup>Bb</sup>yes<sup>F</sup>terday

enter image description here

Now two questions:

  1. Which adjustments should be added to the <sup> tag for this to work? At least it must be higher and must behave as if it occupied no space at all (for example, 'yesterday' should not be divided)

  2. Is there a better trick than using the <sup> tag?

Thanks for all your comments

Solution

  • Rather than a sup, I'd suggest a span with a data-attribute in a pseudo-element.

    The pseudo-element can then be positioned as you desire and provided a suitable line-height is used this all works out fairly dynamically.

    Size everything in em and:

    p {
  line-height: 2em;
  margin: 1em;
}
span {
  position: relative;
}
span::after {
  content: attr(data-note);
  display: inline-block;
  position: absolute;
  top: -2em;
  color: red;
  font-size: .75em;
  padding-right: 1em;
}
    <p>
  <span data-note="F"></span>Yesterday <span data-note="Em7"></span>all my <span data-note="Dm"></span>troubles seemed so <span data-note="A7"></span>far away
  <br><span data-note="Bb"></span>  <span data-note="Bb"></span>now I <span data-note="C7"></span>need to find a place to <span data-note="F"></span>hide away <span data-note="C"></span>oh <span data-note="Dm"></span>I beli<span data-note="G7"></span>eve in yes<span data-note="Bb"></span>terday
</p>

    As the span's are empty screenreaders shouldn't have a problem with them (although I'm unsure as whether the content is read by screenreaders.