Hello Smartbuilder,

Our client wanted us to rebuild parts of their software interface as part of the course, so that we could use the Translation function to make it accessable to an international audience, rather than manually swapping screenshots for all international versions.
The problem arises when previewing the course, or even viewing it through SmartTracker, as seen in the screenshots below.

All the text seems to be nudged around, while I have properly aligned it all.
Is there some sort of Preference or Setting I can use for these visual bugs?
I assume it has something to do with the excellent Scaling feature native to Smartbuilder.

Hi Daniel,
This is most likely a tricky issue with how browsers render HTML text. Each browser decides for each font what the line spacing and character spacing it wants to use. This means there is a lot of variability when you switch between browsers (Edge and Chrome, Firefox, Safari, etc). The Preview is usually identical to the Published output, but different browsers still behave differently. SmartBuilder on Windows (as of 4.8.0) uses Edge for the Preview, which is based on Chrome. On OSX, it uses Safari.

With that context in mind, that is a large difference from the authoring stage to the Preview in your screenshots! More than you usually see.

Some questions to consider:

• What font are you using? Is the problem better with a different font?
• Try viewing the published lesson on different browsers, different devices (Windows, OSX, Android, iOS), and see if they are all the same. If it's only a problem on your computer, then perhaps there is something unique in your situation that can be resolved.

There are a couple things that you can do.

1. You can try a different font to see if it renders better. I suspect this may help.
2. If you need to use that font, and the text is consistently lowered after publishing on all browsers, you could raise all the text on the authoring stage.
3. You can leave the text where it is, and try to use CSS to change how the font is rendered, so it is close to what you see on the authoring stage. This will effect ALL text, though, so we need to know if that's okay. Please send us your source file (sb4 file) and we can play with this.
4. You can use WYSIWYG text rendering, which basically treats the text as an image (with some downsides) - more info here.

Overall, next steps would be to send us your source file, try a couple different fonts (maybe create a test page with several different fonts on the same page), and look at the published lesson on different machines to see if it's a local problem. You can send us your source file via email or upload it here.

- Nav

Hello Navdeep,
Thank you for taking your time to help us resolve this issue.


What font are you using? 
For this segment we are using Arial, standard with no alterations, in various sizes between 8 to 12p.
All text elements are put into objects.
Depending on the context, they can be aligned to the left, right or center.

Is the problem better with a different font?
Switching over to Calibri has no impact on this issue.

Try viewing the published lesson on different browsers, different devices (Windows, OSX, Android, iOS), and see if they are all the same.
This issue first came to light when reviewing the course set up by my colleague.
When a similar course, that I am building and providing screenshots from, was submitted for a quick internal review, we noticed that this was a pattern.
In the meantime we have used many computers and laptops to create and review material on, in different browsers, with no noticable difference between them.

You can try a different font to see if it renders better.
Sadly, no such luck yet.

[...] you could raise all the text on the authoring stage.
The text in the buttons at the bottom of the screenshots provided yesterday all have the same alignment, using the alignment tools.
and
As you can see, some are reasonabily aligned to the vertical center, while the others straddle the bottom of the button.

[...]try to use CSS to change how the font is rendered, so it is close to what you see on the authoring stage.
This course contains a lot of NDA material, so lets leave that as a last resort option.
We would also need to get approval internally to share these materials.

You can use WYSIWYG text rendering, which basically treats the text as an image[...]
The attached screenshot below shows this method. It seems that the misalignment becomes more predictable, so we would be able to work with it, if my colleagues and the client OK`s the sharp reduction in the font quality in the rest of the course.

I am taking the feedback back to my colleagues and we will decide on the next step.
Thank you once again!

Hi Daniel,
See if you can get authorization to send us this lesson (we'll be happy to sign an NDA if necessary). Also, you can just send us this one page (copy the page into a new lesson, and send that to us). If you want, you can even delete the background image, and just keep the SmartBuilder objects. We can work with just that - all we care about is the text/buttons that are SmartBuilder objects, and can find a different way to mark their position on the authoring stage vs preview.

Also, this is a public facing forum. So if you want to delete your screenshots and take this conversation to email (support at smartbuilder com), we can do that. We'll post back here later if we find a solution.

- Nav

Hello Navdeep,

Thank you for thinking with us for a solution for this problem.

We have opted to replace all Rich Text items with Plain Text, since the strange jumps are more predictable with these elements.
It is still impossible to 100% line them out based on the view, but it was a workable solution.

Do you have any insight why there is such a big difference between Rich Text and Plain Text items, at this font scale? (Font size 8 on a 1280*720 canvas)

Kind regards

Hi Daniel,
These issues are always tricky to troubleshoot via back and forth email or forum posts. It may be better if we can do a screenshare meeting. Also, if you still have an old copy of the lesson with Rich Text, it will help to start from a known broken place. As I mentioned, you can create a copy of the lesson, delete most of the pages, and even delete the images. Then we can do something like this to test the Authoring Stage vs the Preview - https://lrs.smartbuilder.com/l/v5e3l9eiwlyi

For this one, I took a screenshot of the authoring stage text and placed it behind the text to see how much it changes when you Preview / Publish. See the attached image for what I see - it's pretty close. Arial @ 8, 9, and 10. Please test this lesson on your machine, and let us know if you see anything different.

I also attached my source file if you want to open that up and see if the problem starts to occur when you Preview it from your machine.

There may be other factors at play (perhaps you have a different version of Arial installed. Perhaps you are embedding the font and I am not). The first step is to reproduce the issue (which we currently cannot do). Then isolate the issue. And only then can we start to look for a fix.

Please reach out via support chat or email, and we can try to find a time that works to meet, or share a copy of the lesson that has any proprietary information removed.

Thanks!

Hello Navdeep.

Attached are two images, first our own Plain Text vs Rich Text, red being Rich and black being Plain.
These objects are all aligned to the same position, with the same dimensions, alignment, etc.

The second image is your Text Testing 1 file, which seems to function as well as on your machine.
We are using Microsoft Edge for testing.

Due to time constraints we have no time to dive deeper into this issue.
It works "good enough" on our end with Plain Text and if this issue rears its head again in the future, we might reach out again.
Thank you very much for your time.