Playback ruler labels stretch or shrink when resizing the window #3010

Live demo of the proposed changes

@Danielku15, a live example of the proposed fix is available on my self-hosted alphaTab playground: open the playback ruler demo.

The proposed fix is also available in my fork.

All changes were manually reviewed before this issue was created.

Is there an existing issue for this?

• I have searched the existing issues

I have read the contribution rules

• I have read CONTRIBUTING.md and AGENTS.md.

AI authorship

AI-assisted (disclosure block included as described in AGENTS.md)

Current Behavior

In the Playground Control demo, the bar numbers and tempo labels on the playback ruler stretch horizontally as the window becomes wider and shrink as it becomes narrower. On a 3440-pixel-wide window the symbols and numbers become visibly distorted.

Expected Behavior

Text and symbols on the playback ruler remain the same size when the window width changes. The number of visible ticks and labels can adapt to the available space.

Steps To Reproduce

1. Run the Playground Control demo from the develop branch.
2. Open /demos/control/ in Chrome and wait for the sample score to load.
3. Resize the browser window from approximately 900 pixels to 3440 pixels wide.
4. Observe the bar numbers and tempo labels in the playback ruler.

Link to jsFiddle, CodePen, Project

Local checkout of CoderLine/alphaTab at commit 7d3efe78e9d00744e20d6db656518a5e45b93f7a.

Version and Environment

The checkout's package version is 1.10.0. The actual debug output below reports older generated version metadata (1.9.0, commit bf3fc48), which does not match the checkout above.

[AlphaTab][VersionInfo] alphaTab 1.9.0
[AlphaTab][VersionInfo] commit: bf3fc48f53d899ccb60454385001787132e04eca
[AlphaTab][VersionInfo] build date: 2026-10-07T08:47:05.171Z
[AlphaTab][VersionInfo] High DPI: 2
[AlphaTab][VersionInfo] Platform: BrowserModule
[AlphaTab][VersionInfo] WebPack: false
[AlphaTab][VersionInfo] Vite: false
[AlphaTab][VersionInfo] Turbopack: false
[AlphaTab][VersionInfo] Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/156.0.0.0 Safari/537.36
[AlphaTab][VersionInfo] Window Size: 3440x1288
[AlphaTab][VersionInfo] Screen Size: 1800x1169

Platform

Web

Anything else?

No additional details.

Screenshots

Playground at 3440 px before the fix, followed by the ruler before and after the fix at the same width:

Original Playground — 3440 px

Ruler before the fix

Ruler after the fix