Video overlay: Make container for team names have flexible width

[annamontare-edu]

At our tournament this weekend we had some team names that didn’t fit in the video overlay and appeared cut off.

other solutions

I fixed it temporarily by setting a larger max width with OBS Studio’s option to add custom CSS. We could just increase the container width a little.

desired solution

A variable width might work well, and adapt to whatever length the team names are. Might be a problem if someone adds names that are really long, but we could set a max value.

[jeddai]

What about something like this? Used an inner div and CSS keyframes to animate the name moving back and forth

<!-- html/views/overlay/index.html -->
<div class="Team Row barBackground">
  <div class="Name VerticalCenter Box">
    <div class="NameInner" sbDisplay="AlternateName(overlay),Name"></div>
  </div>
  <!-- ... -->

/* html/views/overlay/index.css */
.TeamBox .Team .Name { height: 1.24em; width: 67%; padding-left: 2%; border-left: 2px solid #666; }
.TeamBox .Team .Name .NameInner { display: inline-block; position: relative; min-width: 100%; font-size: 80%; animation: NameMove 14s ease-in-out infinite; }
@keyframes NameMove {
 10%, 100% { transform: translate(0, 0); left: 0; } 50%, 60% { transform: translate(-100%, 0); left: 100%; }
 }

Animated.team.name.scroll.mov

There's a small amount of jittering on it, going to try to iron that out but I personally think this could be a decent solution?

[jeddai]

Better yet, here is exactly what you asked for!

Code changes:

• moved score/timeout dots into a div that's floated to the right
• switched width CSS values for the team row bar to be the roughly equivalentem values instead of %
• added a new interactive overlay setting called TeamNameBoxWidth (defaults to 12em)
• TeamNameBoxWidth setting is used to set the width of the Team Row barBackground div

Team.name.box.width.adjustment.mov

[michichan]

I always recommend that displayed scorebugs have shorter teams names as it may already be known from other resources which teams are playing. Scorebugs need to be informative and non-intrusive. Especially if you are also displaying jammer information or information on like I have seen in some cases, pack skater details, you need to use the last amount of space as possible during action.

While not done with CRG, you may want to look at the scorebug concept I am using for the episodes Michi-chan's RAW Derby (Michi-chan Sports on YouTube) (first full bout will debut on 9-18-25). Our bug concept uses abbreviations with the ability to pop out the entire team name on demand. It will also pop out the jammers names at the start of the jam (when it is most important) and will also indicate the lead jammer. It uses the DIN family of fonts (instead of a helvitica/arial style) which is designed for the broadcast and public transportation industries because of their improved readability, especially from a distance, which is why we use scorebugs in the first place.