0

We code as team a parserfor text-files in onsong or chordpro-syntax and render them to html. You can find the source at github.

It works fine, but now we want to render plain html as clean as possible. For that we want to use css. So far we found a solution you can watch at jsfiddle. For chords we use the css-solution (see jsfiddle)

<span class="chord"><span class="inner">E</span></span>

.chord { 
   position: absolute;
   font-size: 13px;
   font-weight: bold;
   color: red;
 }

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

Now we have the problem that the chord at the end of the song are not correctly shown because there os no line-text between the following chords. The chord should be shown as H E Asus2.

Is it possible to solve this with CSS or need we to apply a solution in java by checking the elements in the sond to "force" some  .

Do you have a solution?

ThS
  • 4,597
  • 2
  • 15
  • 27
Matthias Wegner
  • 303
  • 4
  • 18
  • Java or javascript? big difference. My guess JS – SuperDJ Sep 08 '18 at 19:15
  • I'm being confused here, i'm used to see the chords below the lyrics, not on top of it. how ever, it seems readable to me. – G-Cyrillus Sep 08 '18 at 19:21
  • why not using them inside the same chord? – Temani Afif Sep 08 '18 at 19:21
  • @G-Cyr check the last one, there is 3 overlapping – Temani Afif Sep 08 '18 at 19:21
  • oh yes, without lyrics, your absolute span are written on the same spot. https://jsfiddle.net/0adkhxe7/124/ some kind of silence are to be added there – G-Cyrillus Sep 08 '18 at 19:24
  • I would propose you to break and wrap your lyrics into span to follow the tempo. on each span you can use a data-attribute (or an extra tag to insert the chord to play. . Make those span so much em width to stick to lyrics bits 's length , where ther is no lyrics, the span without text will occuppy the roon to show the chords – G-Cyrillus Sep 08 '18 at 19:32
  • this is somehow similar to what you are doing : https://stackoverflow.com/questions/50359121/make-selector-contribute-to-element-width/50359172#50359172 you may probably get some ideas – Temani Afif Sep 08 '18 at 19:34

1 Answers1

1

Maybe this is not what you need, but my idea is that you can use a ::before pseudo element instead of <span class="chord"><span class="inner">D</span></span>. 

.lyrics{
line-height:3em;
font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.lyrics span{
  position:relative;
  /*border:1px solid red;*/
}
.lyrics span::before{
  content:attr(data-chord);
  position:absolute;
  font-weight: bold;
  bottom: .2em;
  left:0;
  text-align:center;
  color:red;
  width:100%;
  /*border:1px solid green;*/
}
<p class="lyrics">1. I can only <span data-chord="D">imagine</span> what it will be like when <span data-chord="G">I walk</span> by Your side.</p>

I hope it helps.

enxaneta
  • 31,608
  • 5
  • 29
  • 42