How can I adjust the text labels in the player so they are not ALL CAPS?
I can make the < Prev, Next >, buttons in regular case. But the MENU, GLOSSARY, and RESOURCES always appear in ALL CAPS.
Readability is reduced with ALL CAPS because all words have a uniform rectangular shape, meaning readers can't identify words by their shape. Additionally, some screen readers pronounce ALL CAPS words as acronyms, misinterpreting content. With regular case, each word takes on a distinct shape, enabling them to be understood individually by users and screen readers.
This doesn't work for me. I can change the Resources tab text to upper, lower, caps, whatever, and it's always all caps. Even if I change the text to "Test" it shows up in the player as "TEST"
Nedim, thanks for the prompt reply. Unfortunately, I don't have the Frames\StoryFrame\TextLabels file path in my AppData folder, and resetting the player didn't help.
Sorry about that. I've just noticed that the same settings in my player are mirrored in the course content. For instance, the 'Resources' in the player appears as 'RESOURCES' within the course. This discrepancy arises from Storyline applying the CSS property 'text-transform: uppercase' to all player tabs. An alternative solution is to utilize JavaScript code with an Execute JS trigger to override this behavior. Here's an example:
6 Replies
Hello Thea,
Thanks for reaching out!
You can change how the Player buttons are displayed by editing the Player's text labels. Here's how:
Here, you'll be able to edit labels like 'NEXT' into 'Next', or however you see fit.
Hope this helps!
This doesn't work for me. I can change the Resources tab text to upper, lower, caps, whatever, and it's always all caps. Even if I change the text to "Test" it shows up in the player as "TEST"
Darby, check this post, see if it helps.
Nedim, thanks for the prompt reply. Unfortunately, I don't have the Frames\StoryFrame\TextLabels file path in my AppData folder, and resetting the player didn't help.
Sorry about that. I've just noticed that the same settings in my player are mirrored in the course content. For instance, the 'Resources' in the player appears as 'RESOURCES' within the course. This discrepancy arises from Storyline applying the CSS property 'text-transform: uppercase' to all player tabs. An alternative solution is to utilize JavaScript code with an Execute JS trigger to override this behavior. Here's an example:
const csTabs = document.querySelectorAll('.cs-tab');
csTabs.forEach(csTab => csTab.style.textTransform = 'none');
However, it's worth noting that in this case, all text labels would appear slightly smaller than their original size when previewed or published.
That worked, thanks!