AndroidNewBee AndroidNewBee - 2 months ago 18
Android Question

How to add padding to html content using Jsoup?

I am using the Jsoup library to parse HTML content. I am using the following code to add style to my code tags.

Document doc = Jsoup.parse(html_open);
doc.append(content);
doc.append(html_close);
webView1.getSettings().setJavaScriptEnabled(true);
webView1.setInitialScale(getScale());
webView1.getSettings().setAllowFileAccess(true);
webView1.getSettings().setLoadsImagesAutomatically(true);
webView1.setWebViewClient(
new WebViewClient() {

@Override
public void onPageFinished(WebView view, String url) {
String javascriptCode = "javascript:";
javascriptCode+="var elements=document.querySelectorAll(\"code\");";
javascriptCode+="var parent;";
javascriptCode+="var container;";
javascriptCode+="for(i in elements){";
javascriptCode+="container = document.createElement('div');";
javascriptCode+="parent = elements[i].parentElement;";
javascriptCode+="parent.replaceChild(container, elements[i]);";
javascriptCode+="container.appendChild(elements[i]);";
javascriptCode+="container.setAttribute(\"style\",\" white-space: nowrap; background-color: #EEEEEE; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px;\");}";
webView1.loadUrl(javascriptCode);
}
}
);
webView1.loadDataWithBaseURL("", String.valueOf(doc), "text/html", "UTF-8", "");


This is the html code I am trying to parse.

<h2>Checking Data Features</h2>
<h3>Get the names of the columns of an object</h3>
<p><code><strong>names</strong>(salary_data)</code></p>
<p><code>&gt; names(salary_data)</code> <code>[1] "First_Name" "Last_Name" "Grade" <br />[4] "Location" "ba" "ms"</code></p>
<h3>Compactly display the internal structure of an R Object</h3>
<p><code><strong>str</strong>(salary_data)</code></p>
<p><code>&gt; <strong>str</strong>(salary_data)</code></p>
<p><code>'data.frame': 12 obs. of 6 variables:</code></p>
<p><code>&nbsp;$ First_Name: Factor w/ 12 levels "Aaron","Adela",..: 4 3 10 5 9 11 1 8 12 7 ... <br />&nbsp;$ Last_Name : Factor w/ 12 levels "Brown","Chavan",..: 1 12 5 6 8 2 3 7 4 10 ... <br />&nbsp;$ Grade : Factor w/ 2 levels "GR1","GR2": 1 2 1 2 1 2 1 2 1 2 ... <br />&nbsp;$ Location : Factor w/ 2 levels "DELHI","MUMBAI": 1 2 2 1 2 2 2 2 1 1 ... <br />&nbsp;$ ba : int 17990 12390 19250 14780 19235 13390 23280 13500 20660 13760 ... <br />&nbsp;$ ms : int 16070 6630 14960 9300 15200 6700 13490 10760 NA 13220 ...</code></p>
<p>Structure gives the following information:</p>
<ul>
<li>Type of the variable.</li>
<li>Number of levels of each factor.</li>
<li>Some values of the first few rows</li>
</ul>


I am trying to add a border, background-color and padding to the code tags in my html. But this code does not add the required style to my html content.I am displaying this content in android web view.Is there a way to add all the code tags inside a div and then style the div.

My output looks something like :-
enter image description here

Any help or suggestion is appreciated.Thank you.

Answer

You could set the style using javascript. Add the following code before webView1.loadDataWithBaseURL(...)

webView1.setWebViewClient(
    new WebViewClient() {

        @Override
        public void onPageFinished(WebView view, String url) {
            String javascriptCode = "javascript:";
            javascriptCode+="var elements=document.querySelectorAll(\"code\");";
            javascriptCode+="var parent;";
            javascriptCode+="var container;";
            javascriptCode+="for(i in elements){";
            javascriptCode+="container = document.createElement('div');";
            javascriptCode+="parent = elements[i].parentElement;";
            javascriptCode+="parent.replaceChild(container, elements[i]);";
            javascriptCode+="container.appendChild(elements[i]);";
            javascriptCode+="container.setAttribute(\"style\",\"overflow:scroll; border: 1px solid black; background-color: #EEEEEE;  padding-top: 50px;  padding-right: 30px;  padding-bottom: 50px;  padding-left: 80px;\");}";
            webView1.loadUrl(javascriptCode);
        }
    }
);
Comments