Can't get Text to be WYSIWYG

[mike_kallet]

Using standard Arial, Size 12. The preview and published pages, (doesn't matter what browser is being used), has the width of the text just a little bigger than what displays in WYSIWYG editor. As a result, my text blocks are wrapping more and taller than expected, thus running into other objects. I get the same result whether I'm using styles, or just a text block without styles. I've tried this with a responsive and non responsive pages, with and without breakpoints, in the default mode and in a breakpoint mode. I've tried this with different font sizes. I've tried this with just a blank page, one text block, Arial, size 12. All the same .. the WYSIWYG displays the text wider than preview and therefore wraps differently.

Is there some tweak to Arial that must be done to get WYSIWYG to be spot on?

thanks,
Mike

[mike_kallet]

Update: I just tried this with a text border. When the preview wraps the text, making the text block higher than WYSIWYG editor, the border around the text block did not expand. I must have some setting wrong?

[Pablo]

Maybe this will be helpful?
viewtopic.php?f=10&t=34318

It is also possible that your computer is set to a non-standard DPI.
In that case you can enable 'High DPI support 'in Tools->Options->User Interface.

[BaconFries]

You can increase the size (length) of the text object this will give the text/font more room and stop it wrapping to the next line. Note:Each browser will display/render text differently Arial itself has display issues with Firefox so this is not related to how it works in the programme. See and read the following:
How to optimize text for different browsers?

[mike_kallet]

I tried this with and without high DPI. My desktop is set at 1920 x 1080. I also tried this on my laptop with 1280 x 720. Same result. I recognize that different browsers might have small differences, but I've looked at this on Chrome, Edge, and Firefox and the results are the same. I can sent you the wbs file and a link to the published page if you would like.

[Pablo]

Please share the project so we can see what you have done.
Before you share your project remove all non-relevant content, so it is immediately clear where to look.
Or just create a new project with just one text box and a screenshot of what it looks like for you.

[mike_kallet]

Here are the test files, thanks

Here's the link to the published page "http://headscratchers.com/WYSIWYG_TEST/ ... tPage.html"
Here's the link to the wbs project "http://headscratchers.com/WYSIWYG_TEST/TestProject.wbs"
Here's the screen shot "http://headscratchers.com/WYSIWYG_TEST/ ... n_Shot.jpg"

[Pablo]

As explained in the he FAQ, each browser has a different text rendering engine. So text will look different in each browser.
This may also depend on your graphics card and the settings of the browser. For example, using hardware acceleration will use a different rendering engine. Under Windows GDI text is rendered different than DirectX text.

In your test project your text boxes are too small, so there is no extra space in case the browser renders the text larger.
In this case you can make the text objects a little larger to take the variable size of the text into account.
Or you can use the 'font fine tuning' option to publish the text smaller.

Alternatively you can consider using layout grids where this is not an issue, because layout grids do not use absolute positions and sizes.

[mike_kallet]

Thanks Pablo. I'm using Layout grids in some places, but I have too many legacy pages that will take a lot of time to implement that throughout.

Making the text blocks a little bigger .. other than adding bottom padding, is there another way. The Text block boundary seems to be tied to the text itself, so I can't just stretch it vertically?

[Pablo]

so I can't just stretch it vertically?

If you set the overflow property of the text object to anything other than 'none' then you can resize the text object vertically.

Also, did you try 'font fine tuning'?

[mike_kallet]

Yes, I'm playing around with the font fine tuning a bit,and getting mixed results. I'm using different styles, so it might take a while to do that. If t's really however a function of browser and/or rendering engine, I'm not sure that will help. Speaking of that ... and your comment about rendering engines and browsers ... I completely understand that, but I'm using the same machine to run WYSIWYG as I am previewing, so the rending engine, etc. should be the same .. no?

[mike_kallet]

Sorry, where do I find "overflow" in a text object, I don't see it?

[Pablo]

I completely understand that, but I'm using the same machine to run WYSIWYG as I am previewing, so the rending engine, etc. should be the same .. no?

WYSIWYG does not use necessarily use the same rendering engine as the browser. WYSIWYG is not a browser.
WYSIWYG uses standard Windows rendering (GDI / GDI plus), browsers may use custom rendering or DirectX.

Sorry, where do I find "overflow" in a text object, I don't see it?

You will find it in the Property Inspector.

[mike_kallet]

Found it, thanks ... and thanks for being so responsive (no pun intended) in replying. I guess I just will need to leave a little extra room between objects for the time being.

Mike