Forum Discussion

TheaJung-b71288's avatar
TheaJung-b71288
Community Member
2 years ago

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.

  • DarbyRalls's avatar
    DarbyRalls
    Community Member

    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"

  • DarbyRalls's avatar
    DarbyRalls
    Community Member

    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.

  • Nedim's avatar
    Nedim
    Community Member

    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.