I was recently asked to help find a solution for an iOS App using a Webview to display Arabic Text – the text in the paragraphs where flowing over other elements in the paragraph and even out of the paragraph.

After much searching I finally pinpointed it down to the Arabic Ligatures that where flowing out of the paragraph or over other elements. Once I knew it was the ligatures I was able to pinpoint it to the Kerning of the ligatures that the Webview / Safari was not performing correctly.

I found a great post that explains everything – see link below.

To get the Arabic Ligatures Kerning correctly in the iOS Webview / Safari all I had to do was add this to the CSS for the Body:

<code>  -webkit-font-feature-settings: "kern";</code>

They suggested:

“The font-feature-settings property is still new and requires vendor prefixes (and vendor-specific syntax for older versions of Firefox), so you’ll need to include those as well.”

<code>p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
}</code>

Source: http://blog.typekit.com/2014/02/05/kerning-on-the-web/

Let me know if you have any suggestions:

 

SOLVED: iOS APP Webview Arabic Ligature Font Paragraph Overflow – Kerning Issues
Tagged on:                                                                                         

Leave a Reply

Your email address will not be published. Required fields are marked *