1. 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

Discussion in 'Resolved Bug Reports' started by 5fyf, May 15, 2014.

  1. 5fyf

    5fyf Member

    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?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Are other buttons similarly affected? Or just that one?

    Does it do it in a default style?
     
  3. Mike

    Mike XenForo Developer Staff Member

    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).
     
    Adam Howard and Valter like this.
  4. 5fyf

    5fyf Member

    @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.
     
  5. magdi5

    magdi5 New Member

    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?
     
  6. ibnesayeed

    ibnesayeed Well-Known Member

    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 "یو".
     
  7. Mike

    Mike XenForo Developer Staff Member

    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?
     
  8. ibnesayeed

    ibnesayeed Well-Known Member

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

    magdi5 New Member

    Version 35.0.1916.153 m

    No change here, the problem as is.
     
  10. Mike

    Mike XenForo Developer Staff Member

    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.)
     
  11. ibnesayeed

    ibnesayeed Well-Known Member

    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: Jul 9, 2014
    Claudio likes this.
  12. magdi5

    magdi5 New Member

    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 likes this.
  13. ibnesayeed

    ibnesayeed Well-Known Member

    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.
     
  14. Mike

    Mike XenForo Developer Staff Member

    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.
     
    ibnesayeed likes this.
  15. magdi5

    magdi5 New Member

    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.
     
    ibnesayeed likes this.
  16. Mike

    Mike XenForo Developer Staff Member

    sami simo and ibnesayeed like this.

Share This Page