Styling text in Change Contents

jasonadal
jasonadal Community Member Posts: 439 ♪ Opening Act ♪
Is there a method for formatting text in a Change Content action independent of the formatting on the text box? For example, I want part of the text as a bulleted list, but even manually adding tabs and spaces in the value for the Change Contents does not hold the spacing.

In theory, I could always create separate text boxes, but it would be pretty cool to be able to format text within a Change Contents. This might be a post for the Suggestions forum as well.

Comments

  • klaatu
    klaatu Community Member Posts: 988
    You could use innerHTML in a runJS instead and change the text to whatever you want.
  • klaatu
    klaatu Community Member Posts: 988
    Here's one with a styled list.
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    Thanks, Darrel! I'll test it out with text blocks where I'm using a specific class to trigger ARIA behaviors. I wouldn't expect it should mess with that, since that's only affecting the text style in that box.
  • approg
    approg Community Member Posts: 250 ♪ Opening Act ♪
    Is that a "dangerous" way to change the style? In your example you're changing

    <div id="text74" style="visibility: inherit; opacity: 1;">
    <p leglh="1.127" style="margin-left:0px;text-indent:0px;line-height:1.080;margin-top:0px;margin-bottom:0px;text-align:left;">
    <span class="text74Font1">Mary had a little lamb,
    </span></p>
    <p leglh="1.127" style="margin-left:0px;text-indent:0px;line-height:1.080;margin-top:0px;margin-bottom:0px;text-align:left;">
    <span class="text74Font1">his fleece was white as snow,
    </span></p>
    <p leglh="1.127" style="margin-left:0px;text-indent:0px;line-height:1.080;margin-top:0px;margin-bottom:0px;text-align:left;">
    <span class="text74Font1">and everywhere that Mary went,
    </span></p>
    <p style="margin-left:0px;text-indent:0px;margin-top:0px;margin-bottom:0px;text-align:left;">
    <span class="text74Font1">the lamb was sure to go.
    </span></p>
    </div>

    to

    <div id="text74" style="visibility: inherit; opacity: 1; font-family: Arial, sans-serif;"><ul class="myList">This is list item 1<li class="itm">This is list item 2This is list item 3This is list item 4</div>

    So you end up losing the anchor with the associated tabindex...
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    My question back is why you would want to hide a text box from the tab index? Screen readers read text period, even if it's not in the tab order if I'm not mistaken. Screen reader users don't use the tab key to get to text boxes. From what I've observed from  someone using a screen reader, it's the down arrow key or "N" to move from reading one text box to the next.
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!