7

I have seen this weird issue multiple times. For some reason, on Chrome, Arabic text sometimes breaks into two lines in the middle of a word. For example, this url: http://aitnews.com/?p=168010

Here's how it looks on Chrome: Chrome Screenshot

An here's how it's supposed to be (Firefox): Firefox Screenshot

I have no idea why this is happening. I think it's solvable using overflow but I would like to know the reason if possible.

Update: The issue seems to be related to word-wrap: break-word; in my css. Removing this line solved the issue. I'm still interested in knowing the reason however.

Louay Alakkad
  • 7,132
  • 2
  • 22
  • 45
  • 1
    Can you also provide plain Arabic text we can copy & paste for testing? – Adriano Repetti Mar 16 '15 at 13:34
  • that is what word-wrap does. perhaps chrome is seeing that word-wrap is needed. – Daniel A. White Mar 16 '15 at 13:36
  • Is this same issue described [here](https://code.google.com/p/chromium/issues/detail?id=393178)? – Adriano Repetti Mar 16 '15 at 13:40
  • @AdrianoRepetti That's exactly the issue. Here's a CodePen based on the same bug report. http://codepen.io/anon/pen/pvQPvm – Louay Alakkad Mar 16 '15 at 13:47
  • 1
    I would **suppose** (I didn't check) it's a problem in the font's kerning table. You don't need to change `work-break`, also `letter-spacing` will fix it (if you do not set `normal` and you can accept `1px` space between each character) and it won't affect `word-break` rule. Well you may (I'm guessing again) also fix it adjusting `font-kerning` but it may be much harder (at least from my POV). – Adriano Repetti Mar 16 '15 at 13:57
  • I think `letter-spacing` is not possible given that Arabic letters must be connected. I also don't want to remove `word-break` because there are some data coming from users that might have long words and break the layout. Can you explain how to adjust `font-kerning`? Demonstrating it in an answer would be great. We are already using custom fonts so this is doable. – Louay Alakkad Mar 16 '15 at 15:07
  • @Louy I just tried but unfortunately advanced typographic styles in CSS are almost unsupported (or supported IMO badly) so `font-kerning` isn't viable. I played with other properties but I didn't find anything you can use to fix **only** this issue without also changing something else (primary breaking)...do not forget to post your own answer if you find the solution for this! – Adriano Repetti Mar 17 '15 at 12:46
  • @AdrianoRepetti well that's unfortunate. I'll see what I can do. Thank you. – Louay Alakkad Mar 17 '15 at 17:11

1 Answers1

7

This CSS

.entry-tags li a {
    white-space: nowrap;
}

Fixed the issue.

Enijar
  • 6,387
  • 9
  • 44
  • 73
user3197492
  • 117
  • 3