Webview clipped on iOS7

Question

I have developed a reader that shows on a webview the content of an html file after adding horizontal paging to it using .css. Everything was working fine but on iOS7 I have noticed that the webview is getting clipped at the left edge.

I have tried the following:

readingWebView.frame = CGRectMake(0, 0, 768, 920);   
[readingWebView loadHTMLString:loadString baseURL:nil];
readingWebView.autoresizingMask = UIViewAutoresizingFlexibleHeight |        UIViewAutoresizingFlexibleWidth;
readingWebView.clipsToBounds = false;
self.edgesForExtendedLayout=UIRectEdgeNone;
self.extendedLayoutIncludesOpaqueBars=NO;
self.automaticallyAdjustsScrollViewInsets = NO;

This is the css file I have:

html {
height:820px;
//margin:0px;
font-size:24px;
width:628px;
}

body {
margin:0px;
    padding:0px;
    width:628px;

}

#viewer {
    width:628px;
    height:820px;

}

#book {
width:628px;
height:820px;

margin-left:50px;
margin-right:50px;
//margin-top:100px;

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

 }

.h {
margin-top:8px;
 }

Answer 1

I think this is a CSS issue. Apparently webkit has a few different text clipping issues that can be solved just by adding   at the end of any text line. Directly after a word has been clipped.

Could you try modifying one of your html files to add   after the letters being clipped and see if it fixes it? If so we can pursue writing javascript that automatically inserts   at the correct places!

---

edit: If it does work use this javascript code:

var bodyText = "هذا هو بلدي النص الأساسي.";
var newBodyText = bodyText.replace(" ","  ");

On second thought, since you are an RTL string you might need to use this instead, not sure how string.replace function handles RTL

var bodyText = "هذا هو بلدي النص الأساسي.";
var newBodyText = bodyText.replace(" ","  ");

---

edit edit:

To do this via RegEx (ignoring HTML <*>script tags, in Objective-C I believe you would use this code (I don't know much about RegEx so if it didn't work I would just open a new question with the RegEx tag about how to do this, they can probably get you an answer within minutes!)).

NSString *string = originalHTMLString;

NSError *error = nil;
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"(?i)(<script(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</script\\s*>|<style(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</style\\s*>|<textarea(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</textarea\\s*>|</?[a-z](?:[^>\"']|\"[^\"]*\"]|'[^']*')*>|\\S+)|\\s+" options:NSRegularExpressionCaseInsensitive error:&error];
NSString *modifiedString = [regex stringByReplacingMatchesInString:string options:0 range:NSMakeRange(0, [string length]) withTemplate:@"&nbsp; "];

finalHTMLString = modifiedString;

... Again, on second thought, since it's an RTL language you may actually use this variation of the code which puts the nbsp AFTER (left to right) the space:

NSString *string = originalHTMLString;

NSError *error = nil;
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"(?i)(<script(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</script\\s*>|<style(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</style\\s*>|<textarea(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</textarea\\s*>|</?[a-z](?:[^>\"']|\"[^\"]*\"]|'[^']*')*>|\\S+)|\\s+" options:NSRegularExpressionCaseInsensitive error:&error];
NSString *modifiedString = [regex stringByReplacingMatchesInString:string options:0 range:NSMakeRange(0, [string length]) withTemplate:@" &nbsp;"];

finalHTMLString = modifiedString;