Incorporating CSS into a UIWebView on iPhone SDK: A How-To Guide

Question

Incorporating CSS into a UIWebView on iPhone SDK: A How-To Guide

After browsing through numerous questions and answers related to my issue, I have not found a specific and simple solution.

In my app, I am presenting multiple HTML files and I would like to utilize a CSS file for formatting. Both the CSS and HTML files are located locally together.

I believe that adding the CSS reference inline might be the correct approach - is this assumption accurate?

The code snippet looks like:

- (void)viewDidAppear:(BOOL)animated {
[super viewWillAppear:animated];
[adviceContent loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle]
                                                                                        pathForResource:[advice objectForKey:@"HTML"] ofType:@"html"]
                                                                           isDirectory:NO]]];
[super viewDidAppear:animated];

}

Within the <head> tags of my HTML file, I've added the CSS reference like so: < link rel="stylesheet" type="text/css" href="photovaluesCSS_2column.css" media="screen"/>

Could someone please point out where I might be making an error? Thank you

iphone html css sdk uiwebview

Answer 1

Answer №1

When you initialize the HTML, it is important to define a base URL for the CSS file so that your controller can identify the location of the CSS file.

Below is a snippet of code that loads an HTML string utilizing a CSS file. You have the option to load the entire CSS from a separate file or make modifications as necessary.

// The HTML files are kept in the main bundle
NSBundle *bundle = [NSBundle mainBundle];
NSString *path = [bundle bundlePath];

NSString *filename = @"none";
NSString *fullPath = [NSBundle pathForResource:filename ofType:@"html" inDirectory:path];

// Load an HTML file
NSString *chapter_filename = [NSString stringWithFormat:@"Section%d", _chapter];
NSString *sectionHTMLPath = [[NSBundle mainBundle] pathForResource:chapter_filename ofType:@"html"];

NSString* htmlContent = [NSString stringWithContentsOfFile:sectionHTMLPath encoding:NSUTF8StringEncoding error:nil];

// Add a generic template and include the CSS file directive
NSString* htmlString = @"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"he\" lang=\"he\"><head><style type=\"text/css\" media=\"all\">@import \"styles.css\";</style><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /></head><body>%@</body></html>";

// Load the HTML content into a web view
NSURL *url = [NSURL fileURLWithPath:fullPath];
[_webView loadHTMLString:[NSString stringWithFormat:htmlString, htmlContent] baseURL:url];

Answer 2

When you initialize the HTML, it is important to define a base URL for the CSS file so that your controller can identify the location of the CSS file.

Below is a snippet of code that loads an HTML string utilizing a CSS file. You have the option to load the entire CSS from a separate file or make modifications as necessary.

// The HTML files are kept in the main bundle
NSBundle *bundle = [NSBundle mainBundle];
NSString *path = [bundle bundlePath];

NSString *filename = @"none";
NSString *fullPath = [NSBundle pathForResource:filename ofType:@"html" inDirectory:path];

// Load an HTML file
NSString *chapter_filename = [NSString stringWithFormat:@"Section%d", _chapter];
NSString *sectionHTMLPath = [[NSBundle mainBundle] pathForResource:chapter_filename ofType:@"html"];

NSString* htmlContent = [NSString stringWithContentsOfFile:sectionHTMLPath encoding:NSUTF8StringEncoding error:nil];

// Add a generic template and include the CSS file directive
NSString* htmlString = @"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"he\" lang=\"he\"><head><style type=\"text/css\" media=\"all\">@import \"styles.css\";</style><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /></head><body>%@</body></html>";

// Load the HTML content into a web view
NSURL *url = [NSURL fileURLWithPath:fullPath];
[_webView loadHTMLString:[NSString stringWithFormat:htmlString, htmlContent] baseURL:url];

Incorporating CSS into a UIWebView on iPhone SDK: A How-To Guide

Answer №1

Similar questions

Checking if an Element is Visible in Selenium

What's the secret to creating floating content in one go?

Displaying the output/feedback of a PHP file being executed when the webpage loads

Master the art of manipulating tags in Django templates using JavaScript

Is your href in javascript not functioning properly?

Positioning parent and child elements using CSS

Adjust the height based on the size of another div when the window is resized

Exclude a specific link from a JQuery function

Convert a list into nested JSON items by utilizing the getJSON function

Firefox changes the sequence of form input attributes

Choose solely the initial and concluding hyperlink within the divs

Adjusting the color scheme of a Checkbox Button in Bootstrap 4

Is there a way to display an XML listing recursively similar to the functionality of an ASP:MENU in the past?

Is there a way to reposition a popup window to the center of the page after launching it?

Correctly showcasing image text

Is there a way to convert a button into clickable text that performs the same function as the original button?

Placing an eye icon on the password input field for optimal visibility and positioning

The height of the Bootstrap Sidebar is not displaying correctly

Having trouble positioning text alongside a checkbox in Bootstrap v3.3.6?

Leveraging the power of Angular to send the contents of a div via email