Formatting issue with chords and lyrics

Question

Formatting issue with chords and lyrics

I am in the process of creating a website that features chords and lyrics. However, I want to ensure that the chords cannot be copied due to some formatting issues. The main objective is for users to be able to copy the chord and lyrics together and paste them into MS Word or any text editor while still maintaining the content (text, not html) without affecting its layout, which includes having the chord positioned above the corresponding lyrics.

https://i.sstatic.net/ZNz1b.jpg

Check out the jsfiddle here

var markUpChordLines = function() {
  jQuery('.post-content').html(function(i, html) {
    return html.replace(/\[(.*?)\]/g, '<span class="chord" data-chord="$1"></span>');
  });

  jQuery('.chord').each(function () {
    jQuery(this.nextSibling).wrapAll('<span class="lyric_content"></span>');
    jQuery(this.nextSibling).appendTo(this);
  });
};

markUpChordLines();

span.chord {
  position       : relative;
  display        : inline-flex;
  flex-direction : column;
  vertical-align : bottom;
  }
span.chord:before {
  content     : attr(data-chord);
  position    : relative;
  font-style  : italic;
  font-weight : bold;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="post-content">
  <p style="display: none;">G  D </p>
  <p>Al [G]contrario di [D]te  </p>
  <p>Io[F] non lo s[A]o</p>
  <p>[D] Se è g[G]iusto co[F]sì    </p>
  <p>C[A]omunqu[G]e [D]sia</p>
  <p>Io [G#sus]non mi mu[Fm]ovo</p>
  <p>Io r[Bm]esto qu[E]i</p>
</div>

javascript html jquery css

Answer 1

Answer №1

After struggling with the rtf format and wasting time, I eventually found success by working with html and tables.

const txtP        = document.querySelectorAll('.post-content p')
  ,  rgxCut       = /(?=\[)|(?<=\])/
  ,  zCopyChanged = document.querySelector('#copyChangedZone')
  ;
txtP.forEach(pLine=>pLine.innerHTML = setParagraph_Chord( pLine.textContent ))
  
zCopyChanged.addEventListener('copy', evt => 
  {
  let lines =  (''+document.getSelection()).split('\n').filter(Boolean)

  let tPlain = lines.join('\n')
    , t_html = lines.reduce((a,c)=>a+setTable_chord(c),'')

  evt.clipboardData.setData('text/plain', tPlain )
  evt.clipboardData.setData('text/html', t_html )

  evt.preventDefault()
  })

function setParagraph_Chord (line)
  {
  let newP = line
            .replaceAll('] [',']&emsp;[')
            .split(rgxCut)
            .map(el=>
          {
          if (el[0]!=='[') return el
          let chord = el.substring(1,el.length-1)
          return `<span class="chord" data-chord="${chord}">${el}</span>`
          })
  return  newP.join('')
  }
function setTable_chord( line )
  {
  let tc = []
    , tl = []
    , tx = true
    ;
  line.split(rgxCut).forEach(el=>
    {
    if (el[0]!=='[') 
      {
      if (tx) tc.push('');
      tl.push(el)   
      tx = true     
      }
    else
      {
      tc.push(el.substring(1,el.length-1))
      tx = false
      }
    })
  let rep = '<table style="border-collapse:collapse;white-space:pre;"><tboby>'
          + '<tr><td style="padding:0;font:12px;border:none"><b><i>'
          + tc.join('</td><td style="padding:0;font:12px;border:none"><b><i>')
          + '</td></tr><tr><td style="padding:0;font:15px;border:none">'
          + tl.join('</td><td style="padding:0;font:15px;border:none">')
          + '</td></tr></tboby></table><br>'
  return rep
  }

.post-content {
  line-height : 20px;
  font-size   : 16px;
  font-family : Arial, Helvetica, sans-serif;
  margin      : 2em .7em;
  }
span.chord {
  font-size : 0; 
  position  : relative;
  background: #ca7a6c;
  }
span.chord:after {
  position    : absolute;
  font-size   : 12px;
  top         :  -32px;
  content     : attr(data-chord);
  font-style  : italic;
  font-weight : bold;
  color       : blue;
  transform   : rotate( -30deg );  
  }
p {
  margin : .7em;
  }
h3 { margin-bottom:0; } 
h5 { margin:0 .8em; }

<h3> test a copy here <small>(on lyrics) </small>and past it to :</h3>
<h5> 1 - a simple text editor ( kEdit, notePad...)</h5>
<h5> 2 - a writter editor ( LibreOffice Writer, Word...)</h5>
<hr>
<div id="copyChangedZone">
  <div class="post-content">
    <p>Al [G]contrario di [D]te</p>
    <p>Io[F] non lo s[A]o</p>
    <p>[D] Se è g[G]iusto co[F]sì</p>
    <p>C[A]omunqu[G]e [D]sia</p>
    <p>Io [G#sus]non mi mu[Fm]ovo</p>
    <p>Io r[Bm]esto qu[E]i</p>
  </div>

Answer 2

After struggling with the rtf format and wasting time, I eventually found success by working with html and tables.

const txtP        = document.querySelectorAll('.post-content p')
  ,  rgxCut       = /(?=\[)|(?<=\])/
  ,  zCopyChanged = document.querySelector('#copyChangedZone')
  ;
txtP.forEach(pLine=>pLine.innerHTML = setParagraph_Chord( pLine.textContent ))
  
zCopyChanged.addEventListener('copy', evt => 
  {
  let lines =  (''+document.getSelection()).split('\n').filter(Boolean)

  let tPlain = lines.join('\n')
    , t_html = lines.reduce((a,c)=>a+setTable_chord(c),'')

  evt.clipboardData.setData('text/plain', tPlain )
  evt.clipboardData.setData('text/html', t_html )

  evt.preventDefault()
  })

function setParagraph_Chord (line)
  {
  let newP = line
            .replaceAll('] [',']&emsp;[')
            .split(rgxCut)
            .map(el=>
          {
          if (el[0]!=='[') return el
          let chord = el.substring(1,el.length-1)
          return `<span class="chord" data-chord="${chord}">${el}</span>`
          })
  return  newP.join('')
  }
function setTable_chord( line )
  {
  let tc = []
    , tl = []
    , tx = true
    ;
  line.split(rgxCut).forEach(el=>
    {
    if (el[0]!=='[') 
      {
      if (tx) tc.push('');
      tl.push(el)   
      tx = true     
      }
    else
      {
      tc.push(el.substring(1,el.length-1))
      tx = false
      }
    })
  let rep = '<table style="border-collapse:collapse;white-space:pre;"><tboby>'
          + '<tr><td style="padding:0;font:12px;border:none"><b><i>'
          + tc.join('</td><td style="padding:0;font:12px;border:none"><b><i>')
          + '</td></tr><tr><td style="padding:0;font:15px;border:none">'
          + tl.join('</td><td style="padding:0;font:15px;border:none">')
          + '</td></tr></tboby></table><br>'
  return rep
  }

.post-content {
  line-height : 20px;
  font-size   : 16px;
  font-family : Arial, Helvetica, sans-serif;
  margin      : 2em .7em;
  }
span.chord {
  font-size : 0; 
  position  : relative;
  background: #ca7a6c;
  }
span.chord:after {
  position    : absolute;
  font-size   : 12px;
  top         :  -32px;
  content     : attr(data-chord);
  font-style  : italic;
  font-weight : bold;
  color       : blue;
  transform   : rotate( -30deg );  
  }
p {
  margin : .7em;
  }
h3 { margin-bottom:0; } 
h5 { margin:0 .8em; }

<h3> test a copy here <small>(on lyrics) </small>and past it to :</h3>
<h5> 1 - a simple text editor ( kEdit, notePad...)</h5>
<h5> 2 - a writter editor ( LibreOffice Writer, Word...)</h5>
<hr>
<div id="copyChangedZone">
  <div class="post-content">
    <p>Al [G]contrario di [D]te</p>
    <p>Io[F] non lo s[A]o</p>
    <p>[D] Se è g[G]iusto co[F]sì</p>
    <p>C[A]omunqu[G]e [D]sia</p>
    <p>Io [G#sus]non mi mu[Fm]ovo</p>
    <p>Io r[Bm]esto qu[E]i</p>
  </div>

Answer 3

Answer №2

Finally, I have completed the task:

const txtP  = document.querySelectorAll('.post-content p')
  ,  rgxCut = /(?=\[)|(?<=\])/
  ;
txtP.forEach(pLine=>
  {
  let newP =
    pLine.textContent.split(rgxCut)
        .map(el=>
          {
          if (el[0]!=='[') return el
          let chord = el.substring(1,el.length-1)
          return `<span class="chord" data-chord="${chord}">${el}</span>`
          })
  pLine.innerHTML = newP.join('')
  })

.post-content {
  line-height : 20px;
  font-size   : 16px;
  font-family : Arial, Helvetica, sans-serif;
  margin      : 2em .7em;
  }
span.chord {
  font-size : 0; 
  position  : relative;
  }
span.chord:after {
  position    : absolute;
  font-size   : 12px;
  top         :  -30px;
  content     : attr(data-chord);
  font-style  : italic;
  font-weight : bold;
  color       : blue;
}

<div class="post-content">
  <p style="display: none;">G  D </p>
  <p>Al [G]contrario di [D]te</p>
  <p>Io[F] non lo s[A]o</p>
  <p>[D] Se è g[G]iusto co[F]sì</p>
  <p>C[A]omunqu[G]e [D]sia</p>
  <p>Io [G#sus]non mi mu[Fm]ovo</p>
  <p>Io r[Bm]esto qu[E]i</p>
</div>

Answer 4

Finally, I have completed the task:

const txtP  = document.querySelectorAll('.post-content p')
  ,  rgxCut = /(?=\[)|(?<=\])/
  ;
txtP.forEach(pLine=>
  {
  let newP =
    pLine.textContent.split(rgxCut)
        .map(el=>
          {
          if (el[0]!=='[') return el
          let chord = el.substring(1,el.length-1)
          return `<span class="chord" data-chord="${chord}">${el}</span>`
          })
  pLine.innerHTML = newP.join('')
  })

.post-content {
  line-height : 20px;
  font-size   : 16px;
  font-family : Arial, Helvetica, sans-serif;
  margin      : 2em .7em;
  }
span.chord {
  font-size : 0; 
  position  : relative;
  }
span.chord:after {
  position    : absolute;
  font-size   : 12px;
  top         :  -30px;
  content     : attr(data-chord);
  font-style  : italic;
  font-weight : bold;
  color       : blue;
}

<div class="post-content">
  <p style="display: none;">G  D </p>
  <p>Al [G]contrario di [D]te</p>
  <p>Io[F] non lo s[A]o</p>
  <p>[D] Se è g[G]iusto co[F]sì</p>
  <p>C[A]omunqu[G]e [D]sia</p>
  <p>Io [G#sus]non mi mu[Fm]ovo</p>
  <p>Io r[Bm]esto qu[E]i</p>
</div>

Formatting issue with chords and lyrics

Answer №1

Answer №2

Similar questions

I'm constantly running into a logic issue that is causing my array output to be filled with zeros

Adding individual flag icons for each country in your Datatables can be a significant enhancement to

What could be causing the data to be displaying as undefined when using AJAX

How can we develop a NodeJS function that returns a query result using a callback method?

Can a file be transferred from an Electron application to an Express server by supplying the file path?

Incorporate the list seamlessly into the remaining content of the page

Tips for prolonging the visibility of the Bootstrap 5 Toast alert

Showing a div element with the power of JavaScript

Mongoose: The aggregate method does not filter properly when using Model.field_1.field_2

Issue: mongoose.model is not a valid function

Working with Thymeleaf and DatePicker to establish a minimum date

Can you outline the distinctions between React Native and React?

Is there a way to configure Cordova to utilize Yarn JS instead of NPM when installing plugins?

Do API applications require a session to function properly?

How can you create HTML elements with a unique perspective?

Struggling with transferring information up the React component hierarchy to manipulate the Document Object Model

Tips on adjusting the label size of a radar chart in chart.js

The constructor window.CCapture is not valid in Node.js environment

The makeSVG function from GoJS is failing to generate the correct HTML SVG object

Converting the AppDelegate.m file to AppDelegate.mm and updating the AppDelegate.h file during the transition from React Native 0.66.4 to 0.71.3