Genius - Putting Lyrics Into HTML Tables lyrics

What Lyrics Should Go In Tables? Any song where lyrics that are performed at (or nearly at) the same time might benefit from having these simultaneous lyrics rendered in columns. The way to do this on Genius is to put them into HTML tables! Here's an example from Frank Ocean's "Futura Free": Roots run deep Family tree, throw a big shadow Tech company Please gimme immortality I'm going rapidly Fading drastically Jamming To the rhythm It's a face To face Keep me high Castrati But how do we actually go about writing this code? Basic HTML & Simultaneous Lyrics First, a short explanation of a table's HTML tags. Put it all together and you'll get something like this: Which becomes this: [WASHINGTON] “You gotta fend for yourself.” [COMPANY] “Alex, you gotta fend for yourself.” As you can see, some of these tags have an extra attribution, width! This helps the different columns display in the way that best fits the lyrics. You don't have to add those to every table, but they can be invaluable if the columns display really weirdly by default. You can fiddle with the percentages in any table and see what works best. More Complex Lyrics & the Non-Breaking Space For columns where the two singers do not have the same number of lines, you may have to manually add extra line breaks at the beginning of one column so that the lyrics in both columns line up properly. The way to do this that works best with Genius is to just add an invisible character—something that makes Genius think there's stuff on the extra lines, but does not show up when the lyrics are rendered. Your go-to invisible character should be the non-breaking space: For instance, here are two columns from Phantom of the Opera: [FIRMIN] "Gentlemen, I have now sent you several notes of the most amiable nature detailing how my theater is to be run You have not followed my instructions..." [PHANTOM] ...You have not followed my instructions I shall give you one last chance The Phantom comes in late, so we need to make sure his lyrics start four lines after Firmin's. The HTML looks like this: Each "blank" NBSP line corresponds to the lines in the other column. Technically you only need to add the first NBSP, as you can put as many line breaks (press enter) as many times as you want between lines. It's just that you can't start a column with a blank line, you must start with a character, which is where our invisible man comes to the rescue. However, beginners are encouraged to fill every extra line with an NBSP so that you can keep count between the columns as you're lining everything up. You can always delete the excess NBSPs when you have finished building your table. Mobile Compatibility & The TR Problem If you are reading this guide on your phone, you might be slightly confused by the table above, as it does not line up properly when rendered on mobile. This is an unfortunate side effect of the mobile display being much thinner than the desktop's. It s**s to realize that the tables you've painstakingly crafted look like crap when you check them out on your phone. However, don't despair just yet. The first piece of good news is this doesn't affect all lyrics. Most lines are short enough that they break essentially the same way across both platforms and small discrepancies can be mitigated through the use of the width attribute. Thank goodness! For longer lyrics where this issue does come up, there's a work-around: adding extra rows to your table. The most important point about adding extra rows is that your columns must continue to be nested within them. Here's the code by itself, so you can get an idea of the structure: And here's a rendering with the lyrics pasted within their proper column tags:Note that the top-right cell is empty, but we include it (with an NBSP just to be safe) to keep the table looking even overall. This code renders as: [FIRMIN] "Gentlemen, I have now sent you several notes of the most amiable nature detailing how my theater is to be run You have not followed my instructions... [PHANTOM] ...You have not followed my instructions I shall give you one last chance As you can see, these lyrics line up properly on mobile! Woohoo. However, there is one drawback: there's a noticeable margin between rows, making the lines seem oddly spaced. However, if you can reconcile yourself to this cosmetic imperfection, you now have all the tools you need to create even the most complex lyric tables! P.S. Even More Columns & The Small Tag All of the lyrics and tables here deal with two columns. What about in those few, terrifying instances where there are more than two voices singing? What if there are three or four? First of all, don't freak out! You just make more columns to fit each part, and adjust the widths so that it displays as evenly as possible. Easy-peasy. Here's a protip though: if you are working with more than three columns, you can render portions of the lyrics in the small tag to make everything fit more easily and look clean. ANYWAY, HOPEFULLY YOU AREN'T HOPELESSLY CONFUSED AFTER ALL THAT. If you need any more help on the DL, don't hesitate to ask @epaulettes!