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!