Lyric view scrolls from right to left

General
1

Leo or Ableset community.

is it possible for a lyric track to scroll from the right to the left instead of bottom to top?

the” text” in my case is a custom chord track so the width of the text is only a few characters. My hope is to see chords ahead but in the same way I would read a chord chart. I place the changes in ableton as actual beat lengths each chord has its own region then just add bar lines manually on beat one chords. Example

| G Am | C | G7 | D | (Chorus) etc…

I am guessing it could show about 4 to 8 chord ahead.

I know there are some display codes from other request so I was not sure if something like this already is possible.

Thanks for all you put into Ableset Leo.

Matt Walker

2

Hey @Mattwalker7362514,

To align all lines next to each other instead of vertically, you can use the following custom styles:

.lyrics > div {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: none;
}

.lyrics .line {
  flex-shrink: 0;
}

The only issue currently is that the current line will be aligned all the way to the right, so you won’t be able to read ahead. I’ll release a new beta soon that will align lines in the center instead.

I hope this helps!

3

Hey @Mattwalker7362514,

I just released a new beta that horizontally aligns lyrics clips in the center, so you can now see upcoming chords as well.

You can download it here: AbleSet 2.8.0-beta.8

4

Leo, The Canvas feature is great! does custom styles work in this feature? I hope to use a horizontal right to left feed “Lyrics” for chords under a normal vertical feed for the text lyrics. I look forward to using all the great features you added to Ableset 3.

Thanks

Matt

5

Hey @Mattwalker7362514, I’m glad you like the new Canvas feature!

You can indeed style elements on the canvas. To do this in Chrome, right-click your lyrics, click “Inspect”, and in the inspector, look for a component with an ID that starts with el-:

CleanShot 2025-04-26 at 19.30.22
CleanShot 2025-04-26 at 19.30.22998×144 40.3 KB

You can use this to target just that element and its children, e.g.

#el-yourelementidhere .lyrics > div {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: none;
}

#el-yourelementidhere .lyrics .line {
  flex-shrink: 0;
}

Let me know if this works for you :slight_smile:

6

Leo, great to hear It is possible.
I am not as familiar with the inspect elements in a browser so I was not sure what to paste over. I will learn it if that’s what it needs. I have a working version of putting the posted text in the css styles folder using text edit on Mac. It made both the lyrics windows in the canvas scroll from right to left. Is it possible to make just one of the lyrics boxes on my canvas to go left to right using the css folder? or I noticed a canvas folder does that handle css info?

I am learning as a go so thanks for understanding I might ask something that does not work or has a better way.

Thanks Leo

Matt Walker

7

Hey @Mattwalker7362514, no worries, I’m always happy to help :slight_smile:

In your case, you’d need to replace the existing styles in your styles.css file with the new ones that contain the ID of the lyrics element you’d like to target. This scopes the styles to ensure other lyrics elements on the canvas don’t get the same styles.

I hope this helps!

8

Leo or CSS folks,
I am new to CSS and have had success changing the fonts and accessing the different canvas windows. When I try to get the font size larger I only get the font size change from [large] in the channel name in albeton.
Since the text is going right to left my canvas has a short height and that shrinks the text size, so I hope to get it larger.

Let me know if I am doing something that is keeping CSS from working
Thanks Matt

Here is what is in my CSS

#el-rp7ugh5ZrtcmHcF5cphEfD .lyrics > div {
display: flex;
align-items: center;
overflow-x: auto;
scroll-snap-type: none;
}

#el-rp7ugh5ZrtcmHcF5cphEfD .lyrics .line {
flex-shrink: 0;
}
#el-rp7ugh5ZrtcmHcF5cphEfD .lyrics .line {
font-family: Academy Engraved LET;
}

.performance {
font-family: Georgia, “Times New Roman”, Times, serif;
}

#el-rp7ugh5ZrtcmHcF5cphEfD .lyrics .line {
padding: 1em;
}

#el-rp7ugh5ZrtcmHcF5cphEfD .lyrics .line {
Line-height: 12;
}
#el-rp7ugh5ZrtcmHcF5cphEfD .lyrics .line {
font-height: 7em;
}

9

Hi Matt! I’m unable to test your code due to being on a different version than you, but at first glance it appears you’re using the font-height property, which actually doesn’t exist in CSS. You should try using font-size instead.

A few more tips - you don’t have to re-select the element every time. Instead, you can put multiple properties inside the same brackets - like this:

#el-rp7ugh5ZrtcmHcF5cphEfD .lyrics .line {
    flex-shrink: 0;
    font-family: "Academy Engraved LET";
    padding: 1em;
    line-height: 12;
    font-size: 7em;
}

Also, when you make a post on this forum with code in it, you can highlight your code and select the “Preformatted text” button, which looks like this: </> up above. That makes it look

like this!

and is nicer for formatting :slight_smile:
Hope this helps!

10

Thanks for the information I have starting using it.
One thing I ran into is that this did not change the font size.

font-size: 7em;

I read that a lyrics page is three lines high unless the [full] is added to the name for full page images. but that did not open it up for higher text.
something is creating a limit and I don’t have the knowledge to change it.

This is in 3 beta 8 with a Lyrics going right to left page.

Matt

Thanks for the Help.

11

Leo,
Will version 3 have the ability to change the font size of lyrics in the canvas? Currently using CSS the text size is unchanged when the text scrolls right to left. I added [full] to the channel to see if that was the issue but it did not fix it.
I am trying up get the font about as tall as the window it is in, since it’s only one layer of text.

Thanks for any insight and all of the dedication you have to Abelset! It’s such a great tool to use.

Matt

12

I am using CSS to get bar lines using CSS borders. is it possible using CSS to make them dynamic in color? Since each clip gets a border bar line by default, when a measure has more than one chord it, the Border bar line needs to be hidden, my hope is the clip color will help make the bar lines visible or match the background color To hide them when the clip is not on the downbeat.
the work around is to put all the chords for a bar in one clip but I want to highlight each chord change as it goes by.

Also this is as large as I could make the Text for the chords in this window size, any ideas on how to get them the hight of the window?
Here is my CSS

#el-rp7ugh5ZrtcmHcF5cphEfD .lyrics > div {
  display: flex;
  align-items: left;
  overflow-x: auto;
  scroll-snap-type: none;
}

#el-rp7ugh5ZrtcmHcF5cphEfD .lyrics .line {
   flex-shrink: 0;
font-family: Arial;
padding-right:25px;
padding-left:0px;
Line-height: 40;
font-size: 800px;
font-weight: bold;
border-left: 3px solid Black;

}

Screenshot 2025-07-05 at 10.27.21 AM
Screenshot 2025-07-05 at 10.27.21 AM1514×448 23.5 KB

13

This looks awesome! I will definitely be incorporating this!

14

Hey @Mattwalker7362514,

You should be able to change the size of the lyrics using the following CSS:

.lyrics .lyrics-line p {
  font-size: 7em;
}

If you’d like to incorporate dynamic sizing, it could be something like:

.lyrics .lyrics-line p {
  font-size: calc(var(--font-size) * 2);
}

Or you could use the height of the window as a reference:

.lyrics .lyrics-line p {
  font-size: 50vh;
}

You can access the color of the lyrics line in CSS using:

var(--color)

This variable is only available inside of the p element that contains the border so you might have to move your styles:

.lyrics .line {
  flex-shrink: 0;
}

.lyrics .lyrics-line p {
  font-family: Arial;
  padding-right: 25px;
  padding-left: 0px;
  font-size: 800px;
  font-weight: bold;
  border-left: 3px solid var(--color);
}

Let me know if this works for you! :slight_smile:

15

Leo the sizing can now change and the dynamic colors are possible for the borders to be bar lines. I used white clips to hide Bar lines that did not start on the down beat. I can still keep the text the color I select from the canvas. I will still try to get sizing and a different chord fonts tested. I have learned that using custom fonts is a bit more involved and they have to be installed on the iPads I use with third party apps. I could only see the custom fonts in iOS chrome and not in iOS safari. I did not have to use @font-face since the font was installed on the device.

At this point this is ready to use with a group of musicians without having to explain much. I could see having the current chord more to the left and not center being a helpful option and if Black was a dynamic color the bar lines would not have to be purple.
Over all this is a Great tool for me and I want to thank you! for all your guidance in the CSS and the features you added to make it possible.

The chord font pictured is OpusChordsSansCondensedStd.otf and is Avids

Screenshot 2025-07-12 at 9.52.22 AM
Screenshot 2025-07-12 at 9.52.22 AM1976×394 42.3 KB