Add custom css to html code with jsoup

Question

I'm working on an Android app, which loads a HTML page and shows it in a webview. The problem is I want to add my custom css (the loaded HTML hasn't any CSS or link to a css). How do I add the custom css to the HTML code using jsoup? I cant modify the html. And how does the webview can open it afterwards? Thank you

Answer 1

Probably the easiest way is to search and replace on the HTML text to insert your custom styles, before loading it into your WebView. I do this in my app BBC News to restyle the news article page slightly. My code looks like this:

text = text.replace("</head>",
        "<style>h1 {font-size: x-large;} h1, div.date, div.storybody, img {margin:4px; padding:4px; line-height:1.25;}</style></head>");

See how I search and replace on the end head tag (including my own </head> tag in the replaced segment. This ensures that the new snippet goes in the right pace on the page.

Answer 2

Several ways. You can use Element#append() to append some piece of HTML to the element.

Document document = Jsoup.connect(url).get();
Element head = document.head();
head.append("<link rel=\"stylesheet\" href=\"http://example.com/your.css\">");

Or, use Element#attr(name, value) to add attributes to existing elements. Here's an example which adds style="color:pink;" to all links.

Document document = Jsoup.connect(url).get();
Elements links = document.select("a");
links.attr("style", "color:pink;");

Either way, after modification get the final HTML string by Document#html().

String html = document.html();

Write it to file by PrintWriter#write() (with the right charset).

String charset = Jsoup.connect(url).response().charset();
// ...
Writer writer = new PrintWriter("/file.html", charset);
writer.write(html);
writer.close();

Finally open it in the webview. Since I can't tell it from top of head, here's just a link with an example which I think is helpful: WebViewDemo.java. I found the link on this blog by the way (which I in turn found by Google).