Browser issue RTL: post new thread button wraps in chrome

[5fyf]

I have a problem when browsing my site with a chrome browser and when using Arabic language the button appears a little awkward than in English

In English it Appears like this:


However In Arabic It looks like this:


When I use Safari it looks fine though..

Is there a fix for this?

 

[Paul B]

Are other buttons similarly affected? Or just that one?

Does it do it in a default style?

 

[Mike]

This looks like it might be a browser bug -- I can see it locally and I actually just noticed it in a location in the style properties as well. This is a situation where it really shouldn't wrap. May need to look at a test case to possibly report, but will move this to bugs in the meantime.

You can workaround it by applying white-space: nowrap; to the callToActionSpan style property (search for that in the ACP search).

 

[5fyf]

@Brogan This was the only button I remember seeing like that with all the styles I have,

Thank you @Mike the workaround fix worked perfectly.

 

[magdi5]

I have the same problem with chrome browser in other places, here are two examples:

Home link in footer:



Resource prefix:


Any idea on how to fix this?

 

[ibnesayeed]

This looks like it might be a browser bug -- I can see it locally and I actually just noticed it in a location in the style properties as well. This is a situation where it really shouldn't wrap. May need to look at a test case to possibly report, but will move this to bugs in the meantime.

You can workaround it by applying white-space: nowrap; to the callToActionSpan style property (search for that in the ACP search).

In some places like thread prefixes as illustrated in the post of @magdi5 above, it even brakes single words, hence I am not sure if white-space property will be any helpful. For instance we have this issue in our forum for a thread prefix "انٹرویو" which has no space in it, but breaks into "انٹرو" and "یو".

 

[Mike]

This was certainly a browser bug, but I'm not actually seeing it happen any more (Chrome 35.0.1916.153). It may be sorted now.

Anyone still see it with the latest Chrome?

 

[ibnesayeed]

This was certainly a browser bug, but I'm not actually seeing it happen any more (Chrome 35.0.1916.153). It may be sorted now.

Anyone still see it with the latest Chrome?

Google Chrome Version 35.0.1916.153 (Ubuntu 14.04), I can still see this happening, no change observed.

 

[magdi5]

Version 35.0.1916.153 m

No change here, the problem as is.

 

[Mike]

Since this isn't happening to me any more, can someone link to a page where I could see it? (Preferably as a guest, but if you want to send me a test login that works too.)

 

[ibnesayeed]

Since this isn't happening to me any more, can someone link to a page where I could see it? (Preferably as a guest, but if you want to send me a test login that works too.)

To me it looks like the problem has something to do with ligature based fonts. Recently Google Chrome has introduced a lot of issues related to rendering ligature based complex script languages (potentially in RTL languages). There is a problem in which it cannot calculate the width of the ligatures properly and accumulates the empty space in the beginning of the line that results in an indented line when it is rendered. I was able to fix that issue by using a CSS property "-webkit-font-feature-settings: "ccmp" 0;", which is essentially instructing the browser not to apply CCMP feature of the font.

I can give you a link where I can see the word wrapping, but you wont observe it unless you have our preferred font installed. To me it really isn't a XenForo bug. But others might have a different explanation of the issue.

 

[magdi5]

I notice that this issue dose not appear in our testing website.

The only difference (that I noticed) between testing and live websites is the "font-family"

snapshot from testing website:


snapshot from live website:


Removing Tahoma from font-family in the body fixed the issue.

I returned back Tahoma, and sent you PC with links, so you can see the issue.

 

[ibnesayeed]

I notice that this issue dose not appear in our testing website.

The only difference (that I noticed) between testing and live websites is the "font-family"

snapshot from testing website:
View attachment 77468

snapshot from live website:
View attachment 77469

Removing Tahoma from font-family in the body fixed the issue.

I returned back Tahoma, and sent you PC with links, so you can see the issue.

If it is happening with Tahoma then my assumption that it only happens with ligature based fonts is not right. Considering Tahoma as a very common font, I think this needs some sort of fix if possible.

And yes, I can replicate it on my site using Tahoma.

 

[Mike]

Well, this is certainly a browser bug. It is directly caused by the use of word-wrap: break-word I believe, though it could just be that triggering a redraw sorts it. It is triggering wrapping where it most definitely shouldn't, likely due to inconsistent box/text width calculations.

Mostly, I was just looking to get a reduced test case to report to Chromium. A workaround would be to use white-space: nowrap in some cases, but that's not really an acceptable general fix. (Nor is removing word-wrap: break-word.)

I have now seen this on @magdi5's site, so hopefully I can make a test case from that.

 

[magdi5]

I found open bug reports in Chromium related to our issue:

Issue 163020:Incorrect rendering of Tahoma font
Issue 123522:"tahoma" font problem in joomla websites using "chrome"

Now I removed Tahoma, although things better now, but I found cases in chrome for android (in some devices) where titles break, not sure if this is related to the same bug or another issue, see below a snapshot:



Let me know of you need more information from my side.

 

[Mike]

I have now filed a bug report regarding this: https://code.google.com/p/chromium/issues/detail?id=393178