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