Forum Discussion
Player in ALL CAPS (MENU/GLOSSARY/RESOURCES)
Hi Articulate Community,
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.
9 Replies
That worked, thanks!
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.im having the same issue but this JS does not work for me, maybe it's my version? Im using the v3, and I had a similar experience with the JS for turning off the volume icon, it only worked in one version that was with more info like this one below, the one simpler doesn't work.
WORKED
function hideVolumeControl() {
var volumeControl = document.getElementById('volume');
if (volumeControl) {
volumeControl.style.display = 'none';
}
}
hideVolumeControl();
NOT WORKEDdocument.getElementById('volume').style.display = 'none';
DO YOU HAVE ANY IDEIA? my client really wants the lower casing on custom tabs and notes.Try this code to transform text to lowercase. It targets tabs on both the left and right.
const tabs= document.querySelectorAll('.tab, .cs-tab'); tabs.forEach(tab => tab.style.textTransform = 'lowercase');As for the volume icon, both codes work for me. Use the one that works for you.
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.
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"
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!
