CODEWITHSUNDEEP
htmlcss
Nathan
Nathan

Reputation: 11149

Styling text to make it appear above the line (for chords above the lyrics)

I'd like to be able to show chords above the lyrics in music using CSS. This is what I'd really like it to look like:

C                                           F
This line has a C chord, and it also has an F chord

so that the chord changes are shown in the right places. In HTML it looks like this:

<span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">F</span>F chord

And I managed to nearly get the effect with this styling:

.chord {
  position: relative;
  top: -1em;
}

But the problem is that it has gaps:

C                                            F
 This line has a C chord, and it also has an  F chord

If only width:0 (which I would use with overflow:visible) worked on an inline span. Does anyone have a solution?

Edit: Solved thanks to @Kyle Sevenoaks. For anyone who's interested, here's my complete CSS, which allows verses to be marked with <p>, chords to be marked with <span> and whether chords are displayed to be toggled with the show-chords class on the parent div:

p.song span {
  display: none;
}
p.song.show-chords p {
  line-height:2.3em;
  margin-bottom:2em;
}
p.song.show-chords span {
  position: relative;
  top: -1em;
  display:inline-block;
  width: 0;
  overflow:visible;
  text-shadow:#CCC -1px 1px;
  color:#00F;
  font-weight:bold;
  font-family:Arial, Helvetica, sans-serif;
}
<p class="song show-chords">
  <span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">F</span>F chord
</p>

Upvotes: 14

Views: 6804

Answers (3)

fcalderan
fcalderan

Reputation:

Here is a variant using data-* attributes and :before pseudoclass

HTML: 

<span data-chord="C">T</span>his line has a C chord, and it 
also has an <span data-chord="F">F</span> chord

CSS: 

span[data-chord]:before {
    position    : relative;
    top         : -1em;
    display     : inline-block;
    content     : attr(data-chord);
    width       : 0;
    font-style  : italic;
    font-weight : bold;
}

http://jsfiddle.net/fcalderan/4wKkp/

Upvotes: 6

Pekka
Pekka

Reputation: 449485

Yeah, position: relative still reserves the space needed.

Here is a solution that wraps a position: absolute span around the relatively positioned one, so that the space does not get reserved any more:

 <span class="chord">
  <span class="inner">C</span>
 </span>This line has a C chord, and it also has an 
 <span class="chord">
  <span class="inner">F</span>
 </span>F chord

CSS:

.chord { position: absolute
 }

.chord .inner {  position: relative;
    top: -1em;}

The advantage over the left approach is that this will work for any chord width (think Esus or F7.

JSFiddle here. Tested in IE6,7,8, Chrome 6

Upvotes: 6

Kyle
Kyle

Reputation: 67194

For inline elements, you can use display: inline-block; to have it accept width. But for your problem, why not simply add left: 3px; /*em or whatever*/? It will indent it.

Upvotes: 2

Related Questions