iosobjective-cuiwebviewepub3

UIWebView clipped for Arabic content on iOS 10.3

I am facing a problem with the latest iOS version (10.3) concerning arabic content epub loaded on UIWebView. The text gets clipped on the left side as shown by the screenshot.

text

The same problem is faced on iBooks as I try to load the file on it. This problem has arisen previously on iOS 7 but was later fixed in iOS 8.

This question has been already tackled in this link: webview clipped on ios7 but the answers are not applicable. Are there any other approaches?

UPDATE: Kindly note that this is the CSS used for the paging of the epub, and this is how the margin is set, and manipulating the margins and width percentage or the width size, doesn't solve the problem.

 html {
     height:840px;
     font-size:24px;
     width:100%;
 }

 body {
     margin:0px;
     padding:0px;
     width:100%;
 }

 #viewer {
     width:668px;
     height:840px;
 }

 #book {
     width:668px;
     height:840px;
     margin-left:50px;
     margin-right:50px;

     -webkit-column-count:auto;
     -webkit-column-width:668px;
     -webkit-column-gap:100px;
     text-align:justify;
 }

 .h {
     margin-top:8px;
 }
Solution

  • I have the same issue, it seems a bug in iOS 10.3 and also still there in 10.3.1, every thing is working fine on any device below iOS 10.3, after a lot of debugging and inspecting elements I found that this problem happens while the Arabic HTML Text alignment was set to justify and text direction is RTL, so I changed the alignment to right and everything works fine -without text justification- I find this bug in any website has RTL direction and justified text.

    Here is how to change the direction to the HTML String Objective-C:

    NSString *HTMLString = [NSString stringWithFormat:@"<body><div style='text-align: right; %@/></body>", yourHTMLString];
[webView loadHTMLString:HTMLString baseURL:nil];

    Swift:

    let HTMLString = "<body><div style='text-align: right; \(yourHTMLString)/></body>"
webview.loadHTMLString(HTMLString, baseURL: nil)

    It is working now with right alignment till we find update in OS web elements.