Text formatting/wrapping problem - help needed

[Sadler]

Problems are with this page: http://www.ort.org/index.php?id=1009

In Google Chrome on the PC it formats correctly as it is in XDP.
In Firefox 27 on Windows 7 it wraps words with punctuation incorrectly (see image).
In Internet Explorer 11 on Win7 it wraps words with punctuation incorrectly (see other image).
In Google Chrome on Android KitKat it wraps incorrectly on almost every row (see screenshot).

Chrome on Android


FF


IE


If I manually fiddle with the generated HTML I can correct some of the formatting by adding a few pixels to the span width for the affected lines. Of course this fiddling is lost when the files are regenerated.

You will notice that the XDP generated HTML is embedded in a CMS page, however I have tested the page generated directly from XDP and it exhibits the same issues (at least in FF).

[gwpriester]

This has come up before and my mind being what it is (or is not) I cannot remember the solution.

But I do remember it had to to with text wrapping and perhaps with changing the default text size in the browser.

Check back, I am sure someone is in possession of a better memory will have the answer.

[Miko]

All works fine for me in Firefox 27 on Win 7, but displays the issues in Chrome and IE

[Boy]

If I recall correctly, this has to do with the fact that the text is full-justified and that some of the browsers have difficulty with that.

[Albacore]

Did you at any time use the Selector (V) tool to re-size the text block? as if you do, it can cause this problem, always use the Type tool (T), when it is exported. You can also right click the textblock => Click Names => Write htmlblocktext and add it. Can also try formatting your text only using Google fonts to see if that is any better. All of these are just suggestions may or may not work.

[Sadler]

Thanks all for your replies. I changed to ragged right which fixed the wrapping on PC based browsers (IE and FF). It fixed the wrapping in Android browsers too (Chrome and FF tested) but the images now overlap the text by around 7-8 characters.

[Acorn]

Can you place the images over the text and then apply Repel text under?

Acorn

[Sadler]

The images are already repelling the text under - the mobile browsers are respecting that, just not enough. For a workaround to what seems to be a browser issue I need a repel text over facility. Of course I can kludge that with a dummy transparent object but then (I imagine) if I fix the mobile browser, the desktop browser spacing would be too wide.

[Acorn]

Thanks for explaining.
I wonder if there are default webkit settings that are skewing your results.
You could try searching for "webkit text smallest size"

It might be some like:

<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
</style>

Some background (and issues): https://developer.mozilla.org/en-US/...xt-size-adjust

Acorn