JSFiddle - React, Tailwind, and code Playground

by gweax

HTML

<p><small>Explanation below</small></p>

<section class="song">
    <h1 class="title">Jingle Bells</h1>

    <p class="verse">
        <b>G</b>Dashing through the snow<br>
        in a one horse open <b>C</b>sleigh<br>
        <b>Am</b>o'er the fields we <b>D7</b>go<br>
        <b>C</b>laughing all the <b>G</b>way<br>
        <b>G</b>Bells on bob tails ring<br>
        Making spirits <b>C</b>bright<br>
        What <b>Am</b>fun it is to <b>D7</b>ride and sing<br>
        a <b>C</b>sleighing <b>D</b>song to<b>G</b>night
    </p>

    <p class="chorus">
        <b>D7</b>Oh, <b>G</b>Jingle bells, jingle bells<br>
        Jingle all the way<br>
        <b>C</b>O what fun it <b>G</b>is to ride<br>
        In a <b>D</b>one horse open <b>A7</b>sleigh<b>D7</b><br>
        <b>G</b>Jingle bells, jingle bells<br>
        Jingle all the way<br>
        <b>C</b>O what fun it <b>G</b>is to ride<br>
        In a <b>C</b>one horse <b>D7</b>open <b>G</b>sleigh
    </p>    
</section>

<hr>

<article><p>
    I often thought that typesetting of songs - by which I mean lyrics and chords - should be easier than it is. Nowadays you mostly have one line for chords and one line for lyrics alternating, with lots of spaces to put the chords above the words. To make this work, you'd have to use a monospace font, or else the chords would end up at wrong places.
</p>
    
<p>
    My idea was to write markup. HTML, where the chords are placed within the lyrics. The question was, how to position the chords that they were above the words, yet not leaving any space.
</p>

<p>
    The answer was quite simple. Use the CSS property <code>position: relative</code> in combination with <code>top: -1em</code>. This allows you to place the chords one line above the words. We need a <code>line-height</code> of at least 2, so the chords would not overlap the line above.
</p>

<p>
    Now with <code>position: relative</code> the original space still is there. We get rid of it by setting <code>display:...

CSS

body {
    padding: 0.5em;
}

.song {
    color: #444;
    line-height: 2.8;
    /* Try one of the following */
    /**/ font-family: serif; /**/
    /* font-family: Comic Sans MS; */
    /* font-family: Ubuntu; */
    /* font-family: Verdana, sans-serif; */
    /* font-family: Courier New, monospace; */
}

.title {
    font-size: 1.3em;
    text-decoration: underline;
}

.verse,
.chorus {
    margin-bottom: 2em;
}

.chorus {
    padding-left: 2em;
}

.song b {
    color: #448;
    position: relative;
    top: -1.3em;
    left: 0.3em;
    width: 0;
    display: inline-block;
}

article p {
  line-height: 1.5;
  margin-bottom: 1em;
}