Is there an existing issue for this?
Current Behavior
The implementation of #2464 revealed an interesting layout shift problem we should improve. In short: the bar numbers cause a horizontal shift of the music notation generating unnecessary additional white-space. The centered notes then look quite strange as they center in the notation area, but the bar number space makes it look "not centered". here a simple notation with visual indicator shown where the notation starts
Expected Behavior
According to Behind Bars there are some recommendations on initial spaces.
Start of system
With clef only
- simple note: 2.5 staff spaces between clef and note
- note with one accidental: 1.5 staff spaces between clef and accidental
- note with multiple accidentals: 1 staff space between clef and initial accidental
With key signature:
- simple note: 2.5sp between key-signature and note
- note with one accidental: 1.5 staff spaces between key-signature and accidental
- note with multiple accidentals: 1 staff space between key-signature and initial accidental
With time signature:
- simple note: 2sp between key-signature and note
- note with one accidental: 1 staff spaces between time-signature and accidental
- note with multiple accidentals: 1 staff space between time-signature and initial accidental
mid-system
- There should be 1sp between bar line and the initial "header element" (clef, time signature,..)
- There should be 1sp before bar line and the last note in the previous bar
- if there are no header elements mid-system 1sp is the recommended spacing between bar line and first note.
Bar Number placement
Here it gets interesting. bar numbers are rather placed at the very start of the bar (even before the clef). and they are shifted using skyline based displacement.
Place bar numbers at the beginning of each system, ideally above the clef of
the top stave. (Behind Bars p.484)
Final conclusion
Bar numbers should be placed at the front of the bar above the clef respecting the 1sp space from the bar line. It should not be a header element causing a shift.
Its placement should respect the skyline.
Steps To Reproduce
- Render
C4 | C4.1 | r and notice how the second bar content is not aligned as expected
Link to jsFiddle, CodePen, Project
No response
Version and Environment
[AlphaTab][VersionInfo] alphaTab 1.9.0
Logger.ts:11 [AlphaTab][VersionInfo] commit: 1efc2ecc10ca13f2bfbec400427822dc4bdfc160
Logger.ts:11 [AlphaTab][VersionInfo] build date: 2026-07-10T14:48:32.742Z
Logger.ts:11 [AlphaTab][VersionInfo] High DPI: 1
Logger.ts:11 [AlphaTab][VersionInfo] Platform: BrowserModule
Logger.ts:11 [AlphaTab][VersionInfo] WebPack: false
Logger.ts:11 [AlphaTab][VersionInfo] Vite: false
Logger.ts:11 [AlphaTab][VersionInfo] Browser: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
Logger.ts:11 [AlphaTab][VersionInfo] Window Size: 1768x1011
Logger.ts:11 [AlphaTab][VersionInfo] Screen Size: 1920x1080
Platform
Web
Anything else?
#2781 introduced a hacky workaround on full bar note/rest placement which we have to revert as part of this rework.
Also this rework should likely be done before or together with #2688
Is there an existing issue for this?
Current Behavior
The implementation of #2464 revealed an interesting layout shift problem we should improve. In short: the bar numbers cause a horizontal shift of the music notation generating unnecessary additional white-space. The centered notes then look quite strange as they center in the notation area, but the bar number space makes it look "not centered". here a simple notation with visual indicator shown where the notation starts
Expected Behavior
According to Behind Bars there are some recommendations on initial spaces.
Start of system
With clef only
With key signature:
With time signature:
mid-system
Bar Number placement
Here it gets interesting. bar numbers are rather placed at the very start of the bar (even before the clef). and they are shifted using skyline based displacement.
Final conclusion
Bar numbers should be placed at the front of the bar above the clef respecting the 1sp space from the bar line. It should not be a header element causing a shift.
Its placement should respect the skyline.
Steps To Reproduce
C4 | C4.1 | rand notice how the second bar content is not aligned as expectedLink to jsFiddle, CodePen, Project
No response
Version and Environment
Platform
Web
Anything else?
#2781 introduced a hacky workaround on full bar note/rest placement which we have to revert as part of this rework.
Also this rework should likely be done before or together with #2688