UIWebView clipped for Arabic content on iOS 10.3

Question

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.

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;
 }

I have updated the question to include what is used for pagination and to manipulate the text margins and width if the view. As mentioned in the update manipulating these input doesn't solve the problem — coder, Apr 05 '17 at 09:03
Should I use another way to manipulate the width or the margins of the displayed html? — coder, Apr 05 '17 at 09:05
I was talking about `[[yourWebView scrollView] setContentInset:UIEdgeInsetsMake(...)];`. Probably it's not the issue, but it's worth the try. — meaning-matters, Apr 05 '17 at 09:26
Adding inset to the left does not have solve the problem, thank you for suggestion. — coder, Apr 05 '17 at 09:38

Hesham · Accepted Answer · 2017-04-08T09:28:48.523

3

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.

edited Apr 08 '17 at 09:28

answered Apr 06 '17 at 13:40

Hesham

132
2
12

It didn't work unfortunately, I have tried the following based on your suggestion: bodyContents = [NSString stringWithFormat:@"
%@
", bodyContents]; – coder Apr 07 '17 at 07:15
Can you post your HTML string, it may contain the style='text-align: justify; and sorry I updated the answer as I forgot to add – Hesham Apr 08 '17 at 09:28
I will check this out, I can make a replace all for the string inside the body. Will try it out and keep me you updated, thank you for the note. – coder Apr 08 '17 at 09:30
I tried the following: if([bodyContents containsString:@"justify"]) { bodyContents = [bodyContents stringByReplacingOccurrencesOfString:@"justify" withString:@"right"]; } with no success – coder Apr 10 '17 at 07:55
It worked I had to fix the internal .css file in the epub, thank you for your guidance, which I could double up vote, you saved my day, thank you loads – coder Apr 10 '17 at 09:41
@coder Glad you found a solution. I took care of that 'double up vote' for you ;-) – meaning-matters Apr 11 '17 at 11:26
@HeshamHaleem Excellent, Hesham. Thank you! – Ahmed Khalaf Apr 12 '17 at 07:51
@HeshamHaleem could u tell me it is not working for me – Dilip Tiwari Nov 21 '17 at 07:21
i want to left align in swift inside webview – Dilip Tiwari Nov 21 '17 at 07:21
1

did you try: let HTMLString = "
– coder Nov 21 '17 at 10:28

UIWebView clipped for Arabic content on iOS 10.3

1 Answers1