If TAB Clef Is Only On Row 1 - How To Remove the Runway Space When Hidden? #2737
-
|
Wondering if there is a way to do this, as I don't believe there is a setting that would collapse the edges of svg when TAB clef is removed on Subsequent rows? By hiding them it creates an extra runway for the cursor to travel and then it will teleport or slingshot over the first beat. 
This is what my player looks like with the TAB Clef hidden in this First Image and you can see the long extended runway 
This last image with the TAB + Standard notation seems to match what my layout is now but with the TAB Clef's hidden. And in doing so it creates an extended runway for the cursor to travel, and for me this causes the cursor to either speed up or slingshot into the first beat in the new rows. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
There is no official way to hide clefs (including tab clef) if you just use svg modification/css this will obviously not change anything in the alphaTab layout process. in the backlog there is #2445 |
Beta Was this translation helpful? Give feedback.
-
|
Following up on Discussion #2737 — since you mentioned there's no official
way to hide clefs while also adjusting the layout, I wanted to share what
we ended up building as an unofficial workaround, in case it's useful
context for how #2445 gets prioritized or designed. Not asking for support
on this — just thought the real-world approach might be informative and
documented should this "How to" question come up again.
*What we did*: a post-render SVG pass that runs after alphaTab's
renderFinished fires, on every staff row after the first. It finds the clef
glyph group(s) (rendered as <g class="at"> elements positioned near the
left edge of the row, identified by their transform: translate(x, ...)
x-value being below a threshold) and sets display="none" on them, while
filtering out glyphs that are actually time-signature digits or tuplet
brackets (which share similar coordinate ranges) so only the clef itself is
hidden.
Simplified version of the matching logic:
javascript
function hideRepeatedTabClef(svg) {
svg.querySelectorAll('g.at').forEach((g) => {
const tf = g.getAttribute('transform') ?? '';
const m = tf.match(/translate\(\s*([-\d.]+)/);
if (!m) return;
const x = parseFloat(m[1]);
if (x >= 90) return; // outside clef's expected x-range
const raw = (g.querySelector('text')?.textContent ?? '').trim();
if (!raw) return;
// Skip non-clef glyphs that can appear in this x-range:
// SMuFL time-signature digits, barline-structure glyphs,
// tuplet brackets/numerals (anything containing a digit)
if (/\d/.test(raw)) return;
// ... additional SMuFL codepoint range guards for tuplets/flags
g.setAttribute('display', 'none');
});}
*Result*: the clef glyph is visually hidden on rows 2+, but as you noted,
boundsLookup, note X positions, and the rest of the layout coordinate
system are unaffected — alphaTab still reserves the same horizontal space
it would if the clef were visible. So we end up with a visual gap/gutter at
the start of those rows where the clef used to be.
Interestingly, we initially had our own cursor-side mechanism that used
that reserved space to animate a sustained note/chord/tie across the row
break — effectively a manual "glide through the gutter into the next row's
start" — which incidentally gave us a row-split cursor animation similar to
what we asked about in #2736. However, we ended up removing it, because the
cursor was treating that hidden-clef space as a real navigable runway,
which caused its own timing issues (the cursor would arrive at the first
beat of the new row later than the audio for that beat). Properly
supporting both — a clean row-start *and* a row-split sustain glide — would
require either remapping the cursor's coordinate handling for that space,
or a more invasive layout-side change to collapse the reserved gutter
entirely (Ultimate-Guitar-style), which would shift coordinates for every
element on affected rows, not just the cursor, and that would be quite the
project.
We're currently weighing whether to keep this (accepting the gutter) or
revert to default per-row clefs.
Thanks again for the quick responses on both threads — really appreciate
you taking the time.
So Below here is what we did as a result one last look:
[image: Screenshot 2026-06-14 at 7.04.37 PM.png]
<br><br><br>
And that is one Large Gutter when we look again as the custom re-working of
UG below
<br><br><br>
[image: Screenshot 2026-06-14 at 8.56.37 PM.png]
…On Sun, Jun 14, 2026 at 10:56 PM Daniel Kuschny ***@***.***> wrote:
There is no official way to hide clefs (including tab clef) if you just
use svg modification/css this will obviously not change anything in the
alphaTab layout process.
in the backlog there is #2445
<#2445>
—
Reply to this email directly, view it on GitHub
<#2737?email_source=notifications&email_token=BNLESQCL6AFWK4ZALTDGHZD476FXHA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNZTGAZTQNJUUZZGKYLTN5XKMYLVORUG64VFMV3GK3TUVRTG633UMVZF6Y3MNFRWW#discussioncomment-17303854>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BNLESQDCVJSHT6GWQDVBQ6T476FXHAVCNFSNUABGKJSXA33TNF2G64TZHMYTIOJRGE4TEO2ENFZWG5LTONUW63R3GEYDENJYGQYTRILWAI>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
There is no official way to hide clefs (including tab clef) if you just use svg modification/css this will obviously not change anything in the alphaTab layout process.
in the backlog there is #2445