Skip to content

Christ the Lord Is Risen Today

The last post walked through ASCII art, CSS grids, sparse position markup, and the Unicode fretboard glyph. For a full seasonal song, this version uses the glyph-and-position approach with build-time templating, so concise source expands into a somewhat verbose HTML page.

In G:

Try one of these 4/4 strumming patterns:

  • ↓ ↓↑ ↑↓↑
  • ↓ ↓ ↓↑ ↓↑

●●◯◯◯●Christ the Lord is✕●●◯●◯risen to day-●●◯◯◯●ay, a-✕●●◯●◯al-✕●●◯●◯le-●●◯◯◯●lu-✕✕◯●●●u-●●◯◯◯●ia!

✕●●◯●◯Sons of men and✕◯●●●◯angels●●◯◯◯●say-✕✕◯●●●ay●●◯◯◯●, a-✕●●◯●◯al-✕●●◯●◯le-●●◯◯◯●lu-✕✕◯●●●u-●●◯◯◯●ia!

✕✕◯●●●Raise your joys and●●◯◯◯●try-✕✕◯●●●umphs,●●◯◯◯●high,✕✕◯●●●a-✕●●◯●◯al-✕●●◯●◯le-✕✕◯●●●lu-✕●●◯●◯u-●●◯◯◯●ia!

●●◯◯◯●Sing, ye heavens, and✕●●◯●◯earth re-ply-●●◯◯◯●y, a-✕●●◯●◯al-✕●●◯●◯le-●●◯◯◯●lu-✕✕◯●●●u-●●◯◯◯●ia!

●●◯◯◯●Lives again our✕●●◯●◯glorious Ki-●●◯◯◯●ing, a-✕●●◯●◯al-✕●●◯●◯le-●●◯◯◯●lu-✕✕◯●●●u-●●◯◯◯●ia!

✕●●◯●◯Where, O death, is✕◯●●●◯now thy●●◯◯◯●sti-✕✕◯●●●ing?●●◯◯◯●A-✕●●◯●◯al-✕●●◯●◯le-●●◯◯◯●lu-✕✕◯●●●u-●●◯◯◯●ia!

✕✕◯●●●Once He died our●●◯◯◯●souls✕✕◯●●●to●●◯◯◯●save,✕✕◯●●●a-✕●●◯●◯al-✕●●◯●◯le-✕✕◯●●●lu-✕●●◯●◯u-●●◯◯◯●ia!

●●◯◯◯●Where thy victory,✕●●◯●◯O●●◯◯◯●grave? a-✕●●◯●◯al-✕●●◯●◯le-●●◯◯◯●lu-✕✕◯●●●u-●●◯◯◯●ia!

●●◯◯◯●Love's redeeming✕●●◯●◯work is●●◯◯◯●done, a-✕●●◯●◯al-✕●●◯●◯le-●●◯◯◯●lu-✕✕◯●●●u-●●◯◯◯●ia!

✕●●◯●◯Fought the fight, the✕◯●●●◯battle●●◯◯◯●won-✕✕◯●●●on, a-●●◯◯◯●al-●●◯◯◯●le-✕●●◯●◯lu-●●◯◯◯●u-✕✕◯●●●ia!●●◯◯◯●

✕✕◯●●●Death in vain for●●◯◯◯●bids✕✕◯●●●Him●●◯◯◯●rise,✕✕◯●●●a-✕●●◯●◯al-✕●●◯●◯le-✕✕◯●●●lu-✕●●◯●◯u-●●◯◯◯●ia!

●●◯◯◯●Christ hath opened✕●●◯●◯para●●◯◯◯●dise, a-✕●●◯●◯al-✕●●◯●◯le-●●◯◯◯●lu-✕✕◯●●●u-●●◯◯◯●ia!

For hymn background, this United Methodist Church history note is a good companion to the lead sheet.

The first line in the source looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{{
    lead_line(
        Christ_the_Lord_is='G',
        risen_to_day_2d='C',
        ay_2c_a_2d='G',
        al_2d='C',
        le_2d='C',
        lu_2d='G',
        u_2d='D7',
        ia_21='G',
    )
}}

That expands at build time into HTML like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<p class="lead-line">
    <span class="cell">
        <span class="chord-box" aria-label="G chord diagram" data-chord="G">
            <span data-pos="E3">●</span>
            <span data-pos="A2">●</span>
            <span data-pos="D0">◯</span>
            <span data-pos="G0">◯</span>
            <span data-pos="B0">◯</span>
            <span data-pos="e3">●</span>
        </span>
        <span class="lyric">Christ the Lord is</span>
    </span>
    <span class="cell">
        <span class="chord-box" aria-label="C chord diagram" data-chord="C">
            <span data-pos="E0">✕</span>
            <span data-pos="A3">●</span>
            <span data-pos="D2">●</span>
            <span data-pos="G0">◯</span>
            <span data-pos="B1">●</span>
            <span data-pos="e0">◯</span>
        </span>
        <span class="lyric">risen to day-</span>
    </span>
    <span class="cell">
        <span class="chord-box" aria-label="G chord diagram" data-chord="G">
            <span data-pos="E3">●</span>
            <span data-pos="A2">●</span>
            <span data-pos="D0">◯</span>
            <span data-pos="G0">◯</span>
            <span data-pos="B0">◯</span>
            <span data-pos="e3">●</span>
        </span>
        <span class="lyric">ay, a-</span>
    </span>
    <span class="cell">
        <span class="chord-box" aria-label="C chord diagram" data-chord="C">
            <span data-pos="E0">✕</span>
            <span data-pos="A3">●</span>
            <span data-pos="D2">●</span>
            <span data-pos="G0">◯</span>
            <span data-pos="B1">●</span>
            <span data-pos="e0">◯</span>
        </span>
        <span class="lyric">al-</span>
    </span>
    <span class="cell">
        <span class="chord-box" aria-label="C chord diagram" data-chord="C">
            <span data-pos="E0">✕</span>
            <span data-pos="A3">●</span>
            <span data-pos="D2">●</span>
            <span data-pos="G0">◯</span>
            <span data-pos="B1">●</span>
            <span data-pos="e0">◯</span>
        </span>
        <span class="lyric">le-</span>
    </span>
    <span class="cell">
        <span class="chord-box" aria-label="G chord diagram" data-chord="G">
            <span data-pos="E3">●</span>
            <span data-pos="A2">●</span>
            <span data-pos="D0">◯</span>
            <span data-pos="G0">◯</span>
            <span data-pos="B0">◯</span>
            <span data-pos="e3">●</span>
        </span>
        <span class="lyric">lu-</span>
    </span>
    <span class="cell">
        <span class="chord-box" aria-label="D7 chord diagram" data-chord="D7">
            <span data-pos="E0">✕</span>
            <span data-pos="A0">✕</span>
            <span data-pos="D0">◯</span>
            <span data-pos="G2">●</span>
            <span data-pos="B1">●</span>
            <span data-pos="e2">●</span>
        </span>
        <span class="lyric">u-</span>
    </span>
    <span class="cell">
        <span class="chord-box" aria-label="G chord diagram" data-chord="G">
            <span data-pos="E3">●</span>
            <span data-pos="A2">●</span>
            <span data-pos="D0">◯</span>
            <span data-pos="G0">◯</span>
            <span data-pos="B0">◯</span>
            <span data-pos="e3">●</span>
        </span>
        <span class="lyric">ia!</span>
    </span>
</p>

Happy Easter!