Drop the lyrics span

The lyrics text node after the block level chord row forms its own row by
itself, so the wrapper span was only extra markup and an extra CSS rule.

diff --git a/chordpro-web.js b/chordpro-web.js
index e818d174202e67064430096ec46d5ccd58efd6af..81f3492d9774c9d1bc479f78e1662b17a8c559fb 100644 (file)
--- a/chordpro-web.js
+++ b/chordpro-web.js
@@ -8,7 +8,7 @@ const song = [];
 
 // The chord span is emitted even when empty, so that lyrics before the first
 // chord of a line still end up in the lyrics row; see chordpro.css.
-const segment = (chord, text) => html`<span class="seg"><span class="chord">${chord}</span><span class="text">${text}</span></span>`;
+const segment = (chord, text) => html`<span class="seg"><span class="chord">${chord}</span>${text}</span>`;
 
 const directive_handlers = {
     title: value => {

diff --git a/chordpro.css b/chordpro.css
index ef73f9d19869138156baea63c13975f1120ed09a..6e1cf8dbe45a4a8c05eff1447eed5fbb0f12ab89 100644 (file)
--- a/chordpro.css
+++ b/chordpro.css
@@ -28,12 +28,8 @@ h2 {
   vertical-align: top;
 }
 
-.verse.chords .chord,
-.verse.chords .text {
-  display: block;
-}
-
 .verse.chords .chord {
+  display: block;
   /* chord names have no descenders, so keep the row tight to the lyrics */
   line-height: 1;
   /* keep lyrics in the bottom row when there is no chord above them */