I’m developing an iOS app who loads the content of a html string with a CSS style sheet into a UIWebView but I have problems when I use the percentage ‘%’ to define the width of a image. It just doesn’t work!
- (void) loadHTMLContent {
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
textFontSize = 120;
NSString *imggt;
if (item.imggt)
imggt = [NSString stringWithFormat:@"<br /><img src='%@' />",item.imggt];
else
imggt = @"";
NSString *cssCode = [NSString stringWithFormat:@" \n"
"body{ font-family: Georgia; color: #333; margin: 0; padding: 0; line-height: 1.2em; } \n"
"h4, h3, h5{ margin: 0 0 5px 0; padding: 0em; text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.8); } \n"
"h3{ font-family: Helvetica; font-size: 1.2em; letter-spacing: -1px; } \n"
"h3, #autor { color: #00365B; } \n"
"h4,h5{ font-weight: normal; font-size: 0.75em; }\n"
"h4{ color: #0069AA; } \n"
"h5{ text-align:justify; } \n"
"#zigzag { height:15px; background-image:url('zigzag.png');background-repeat:repeat-x; }\n"
"#destacados, #cuerpo{ padding: 0 10px; } \n"
"#destacados{ background-image:url('fndNoticia.png'); padding-bottom: 29px; margin-bottom: 0px; } \n"
"#destacados img { width: 97%; text-align:center; margin: 0 auto; border: 8px solid #FFF; } \n"
"#fecha_autor{ font-size: 0.75em; border-bottom: 1px solid #D7D7D7; height: 20px; padding-bottom: 8px; margin: 13px 0; } \n"
"#fecha{ color: #666;} \n"
"#autor{ float: right; } \n"
"#texto{ font-size: 0.80em; line-height: 1.2em; text-align:justify; } \n"];
NSString *htmlCode = [NSString stringWithFormat:@" \n"
"<html> \n"
" <head> \n"
" <title></title> \n"
" <style>%@</style></head> \n" //CSS
" <body> \n"
" <div id='destacados'> \n"
" <br /><h4>%@</h4> \n" //Category
" <h3>%@</h3> \n" //Title
" <h5>%@</h5>%@ \n" //Subtitle & Imggt in HTML
" </div> \n"
" <div id='zigzag'> </div> \n"
" <div id='cuerpo'> \n"
" <div id='fecha_autor'> \n"
" <span id='fecha'>%@</span> \n" //Date
" <span id='author'>%@</span> \n" //Author
" </div> \n"
" <div id='texto'>%@</div> \n"
" </div> \n"
" %@ \n" //Nielsen code
" </body> \n"
"</html> \n",cssCode,item.category,item.title,item.subtitle,imggt,item.pubDate,item.author,[item.text stringByReplacingOccurrencesOfString:@"[br]" withString:@"<br />"],[AppStaticData getNielsenSiteCensusHTMLImageOfArticle:item.url]];
[webView loadHTMLString:htmlCode baseURL:baseURL];
}
The CSS & HTML code tested on a browser works:
The problem seems to be here:
"#destacados img { width: 97%; text-align:center; margin: 0 auto; border: 8px solid #FFF; } \n"
Seems that I can’t use percentages to set the value of the image. Why? Is there other way to escale the original image relatively to the container size?
You have to escape the ‘%’ in your css code, before you build the
[NSString stringWithFormat]. In case you don’t even need a string build from format a simpleshould work.