Hi there,

I am finding that text can sometimes render slightly differently in the editor versus the browser.

The below screenshot demonstrates how some text fits in a single line in the editor but will wrap to a 2nd line in the preview (and when published to HTML).

Screenshot 1 - https://ibb.co/dgcW6ZG

Usually this is not a problem, but there is an edge-case where it does become a problem…

When using the Action to calculate the Y-position of a radio-button, the result can be wrong when a text label spans a different number of lines in the browser.

In other words, if a text label fits a single line in the editor, but two lines in the browser, the position of the radio-buttons below it appear to be calculated based on the first radio-button only spanning one line.

The below screenshot shows this issue more clearly (I hope). I appreciate this is a bit difficult to explain, so please ask any questions.

Screenshot 2 - https://ibb.co/S7Tfmbm

Is this something that can be fixed?

Many thanks in advance.

Hi Leon,
Unfortunately I suspect this is going to be a tricky one for a fix. Each browser decides how it wants to render text, so you'll see very slight differences in character and line spacing between Safari, Firefox, and Chrome / Edge, and on mobile devices. Sometimes the text and the container line up just right to cause something like this, where a line breaks differently.

You can see this in attached image - it's the same website loaded in Firefox and Chrome, and the images are overlayed. Tiny deviations in the character spacing cause lines to break differently. Here the line spacing seems to be the same.

The fix for the other issue may resolve this. If we calculate the position of the RB after it's rendered, that might resolve the issue. However, there might be some technical reason that cannot be done. I'll bring it to the dev team's attention.

In the meantime the workarounds are the same for any text rendering issue:

1. In the Properties for the object, change the Text Rendering property to WYSIWYG (more info here), which will make the text placement exact, but slightly less crisp.
2. Make the object a little wider to accommodate fluctuations in the size of the text.
3. Force the text onto 2 lines with Ctrl+Enter to add a line break. See attached image.

Thanks again for the quick reply.

Regarding….

Option 1) The text is indeed noticeably worse, so I think this isn’t an option right now.

Option 2 and 3) We can’t count on this as our courses get translated into about a dozen languages by another company, so we can’t expect that company to do these fine adjustments.

I will keep the forced-line-break in mind if our client raises it with us, and just hope the true position of the RB can be calculated somehow in a future update.

Thanks again.