• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Browser issue RTL: post new thread button wraps in chrome

#1
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:
Screen Shot 2014-05-14 at 4.31.19 PM.png

However In Arabic It looks like this:
Screen Shot 2014-05-14 at 4.31.35 PM.png

When I use Safari it looks fine though..

Is there a fix for this?
 

Mike

XenForo developer
Staff member
#3
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).
 
#5
I have the same problem with chrome browser in other places, here are two examples:

Home link in footer:
upload_2014-6-4_11-38-39.png
upload_2014-6-4_11-40-23.png

Resource prefix:
upload_2014-6-4_13-32-4.png

Any idea on how to fix this?
 

ibnesayeed

Well-known member
#6
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

XenForo developer
Staff member
#7
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

Well-known member
#8
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.
 

Mike

XenForo developer
Staff member
#10
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

Well-known member
#11
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.
 
Last edited:
#12
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:
upload_2014-7-9_9-34-2.png

snapshot from live website:
upload_2014-7-9_9-41-26.png

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

Well-known member
#13
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

XenForo developer
Staff member
#14
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.
 
#15
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:

upload_2014-7-10_11-33-23.png

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