Rendering HTML in a WebView with custom CSS

Question

My app is using JSoup to download the HTML of a message board page (let's say in this case it is a page containing the posts of a given thread). I'd like to take this HTML, strip out unwanted items, and apply custom CSS to style it to be 'mobile' in a WebView.

Should I inject the styles into the HTML as I process it (since I will be processing it anyway) or is there a good way to add a CSS file to my app's assets and simply refer to it. I figure the latter would be ideal, but unsure how to go about it.

I see hints in WebView's loadDataWithBaseURL that you can refer to local assets, but not sure how to utilize it.

Answer 1

You could use WebView.loadDataWithBaseURL

htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData; // lets assume we have /assets/style.css file webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null); 

And only after that WebView will be able to find and use css-files from the assets directory.

ps And, yes, if you load your html-file form the assets folder, you don't need to specify a base url.

Answer 2

I assume that your style-sheet "style.css" is already located in the assets-folder

1. load the web-page with jsoup:

   doc = Jsoup.connect("http://....").get(); 

2. remove links to external style-sheets:

   // remove links to external style-sheets doc.head().getElementsByTag("link").remove(); 

3. set link to local style-sheet:

   // set link to local stylesheet // <link rel="stylesheet" type="text/css" href="style.css" /> doc.head().appendElement("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", "style.css"); 

4. make string from jsoup-doc/web-page:

   String htmldata = doc.outerHtml(); 

5. display web-page in webview:

   WebView webview = new WebView(this); setContentView(webview); webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);