Any way to use html code for chords into lyrics track?

Tech Talk
1

HI,

I’m preparing new show for my small band. In order to have flexibility on musician, I want to create chords like lyrics track but today if I use | to separate measure, it’s not really readable. do you have a way to use html code into lyrics ? For exemple my objetive is to show chords like table with border like that

table{ width:95%; border-collapse:collapse; }

td{
border:1px solid black;
text-align:center;
height:60px;
font-size :40px;
font-weight:bold;
font-family:arial;
}

A-7 B-7 D %
C5b A-7 G-7 C7M11
. Thanks for your reply ?
2

Hey @Pat,

A good way to approach this would be to combine lyrics track attributes with a small CSS tweak.

For chord charts, a dedicated lyrics track like this usually works well:

Chords +LYRICS [onlychords][progress]

If you’d like to visually separate each line (which can make chord bars much easier to read), you can add a small Custom Styles rule.

Click on AbleSet’s icon tray → Gear icon → Show Global Custom Styles and add this:

.lyrics-page.your-lyrics-track-slug .line {
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

.lyrics-page.your-lyrics-track .line p {
  padding: 0.4em 0;
}

Just replace your-lyrics-track with the name of your lyrics track (the lowercase version of the track name). This way the styling only applies to that specific lyrics track, so you can customize different layouts for different musicians if needed.

This will add a separator between each line.

Let me know if this works for your use case!

3

HI , Thanks for your reply. I don’t want to separate by line but realy to put the chords made by myself (no [chords] used but text) into table to looks like jazz grid for exemple. cell is 1 measure. This is why I think about html code to reach this code which draw table with border cell and text centered

table{ width:95%; border-collapse:collapse; }

td{
border:1px solid black;
text-align:center;
}

A-7 B-7 D %
C A-7 G-7 C

Because ableset chrods track is shown into navigator, my idea is to used html code to have what I want. but If I paste this code is not interpreted.