How can I wrap two rows at once / together?

Question

I have multiple pairs of rows of text.
I want that each pair of rows wrap together, and each character always stays above or below its counterpart, without sliding right or left.

Example: a songbook (my use-case)

E- A# G#7/9
these are the lyrics of my song
Db E-
if chords offset it's super-wrong

Is there a general / simple solution?

Since posting this question I found a way which requires a heavy use of the figure space (a non-breaking space, code: &numsp, result: > <). It's not general nor simple, but it's better than nothing, so I posted it below, as an answer (click here to jump to it).

user_18430361 · Answer

WARNING: the following is NOT a general solution, because it requires a heavy use of the figure space (a non-breaking space, code: &numsp, result: > <).
Fiddle with it here: https://onecompiler.com/html/3xwdbhck4

/* FUNCTIONAL CSS: needed to couple chords-lyrics */
.page {
  position: absolute;        /* prevents decoupling when wrapping */
  width: 96%;
}
.chords, .lyrics {
  white-space: pre-wrap;     /* whitespace collapse OFF, line breaks ON */
  font-family: monospace;    /* keeps chords-lyrics aligned */
  font-size: 12pt;           /* keeps chords-lyrics aligned (any value works) */
  margin-right: 2pt;         /* keeps chords-lyrics aligned (any value works) */
  line-height: 2.4;          /* makes room for the lines of the other div */
  margin-top: 0pt;           /* must be 0 or the divs will offset */
}
.chords {
  position: absolute;        /* makes .lyrics elements overlap */
}
.lyrics {
  padding-top: 14pt;         /* shifts the rows of text, must equal font-size of .chords */
  /*position: relative;      /* puts .lyrics behind .chords, not recommended */
}


/* DEBUG CSS: it helps visualizing telements */
.songs  { background-color: #eee; }
summary { background-color: #ddd; font-weight: bold;}




  EXPLANATION

  With this setup the common space (the spacebar space) allows the browser to break the line.

  You can prevent unwanted wrapping by replacing the common space with a figure space, which is a 
  non-breaking space (NBSP) and does not allow the browser to break the line. Use the code &nbsp. 
  (I personally prefer to use the output of &nbsp in my html, but it's risky, since it's invisible)


  In your case you want to use the &nbsp above or below any visible character. Check this example:
 




  
    (A) Song with standard spaces and UNDERSCOREs, to visualize the chunks
    Em_____ ___ ____A#____ __ __ G#7/9 __ ______ ___Db_ ____ _____ E____
    __these are the lyrics of my song, if chords offset it's super-wrong
    ___ __ __size ___ ___dow_ blank ___ _chor___ ______ ___ sli__
    try to resize the window, _____ the "chords" should not slide
  




If you replace the UNDERSCOREs in (A) this is the output:




  
    (B) Song with standard and FIGURE SPACEs in the right chunks
    Em              A#           G#7/9              Db             E    
      these are the lyrics of my song, if chords offset it's super-wrong
             size        dow  blank      chor               sli  
    try to resize the window,       the "chords" should not slide
  





  
    WRONG) Song with only standard SPACEs
    Em              A#           G#7/9              Db             Em   
      these are the lyrics of my song, if chords offset it's super-wrong
             size        dow  blank            the          sli  
    try to resize the window,       you'll see the "chords" slide

How can I wrap two rows at once / together?

1 Answers