HTML5 doesn't wrap unbroken string when it's in a variable

Jan 30, 2014

I have a simple project with two text boxes.

The first text box is just a standard text box, into which I have entered some text with no spaces (i.e. "123456789012345678901234567890". I've made the text box somewhat narrow. When I publish and view in Flash or HTML5, the text is displayed with a forced line break so that it doesn't overflow past its borders, as expected.

The second text box contains a reference to a variable (i.e. it says "%myVariable%"). I have set myVariable to be the same text value as the first text box. When I publish and view in Flash, it works as expected (a wrap is forced). When I view the HTML5 version, there is no wrap and the text extends past the text box off the screen.

Is there a way to prevent variables in text boxes from displaying past their borders if they have no spaces to wrap on? It's an edge case but something that would be nice to have as this variable is eventually going to be input by the user.

Thanks!

4 Replies

Christine Hendrickson
Staff

10 years ago01/31/14 at 7:49 am (UTC)

Hi there Keith,

Just curious, have you tried making the text box larger? You mentioned it's already pretty narrow, but I'm curious if you make it longer, if the content will stay within the field properly in the HTML5 output.

Also, are you able to share the .STORY file here, or an example file with this behavior? I'd like to take a look, if I may.

Thanks!

Keith K.
Author

10 years ago01/31/14 at 8:04 am (UTC)

Hi Christine,

Making the text box larger would fix the issue, but this is a case where the user is going to be inputting the value for the variable earlier in the course. It's unlikely that they would enter a long string with no spaces, but if they did I would like it to be able to display the same in HTML5 and Flash output and not break my screen design.

Here is a example Storyline file I put together. The text boxes are side-by-side so you can compare the differences. In Flash both boxes wrap (although the variable seems to wrap differently depending how the Flash object is scaled). In HTML5 the variable does not wrap and extends past the borders (even though shrink to fit is set to on).

html5+text+wrapping+issue.story

Christine Hendrickson
Staff

10 years ago02/03/14 at 7:38 am (UTC)

Good morning Keith,

I've been testing with your file and a new file as well. You're correct - it looks like this may be due to a string of text with no breaks. From what I'm seeing, even with breaks in the text, there are still some formatting issues. Those formatting problems are related, I believe, to an issue we're already investigating.

Here's the file I created to share with our Quality Assurance team:

HTML5 Variable Text Overflow

As you can see, the text box and shape both wrap for the first text variable, but the second variable (using a long string of letters/text) does not wrap.

I'm submitting a report for this issue, along with the file you provided and the new file where I was able to reproduce the issue. I'll be sure to provide the thread URL in the report as well, so I can update the thread when I have more information.

Thanks again for the information and file, Keith!

Best,

Christine