I am using a WebView to align RTL text correctly.
Simply, I want to add "..." ellipsis when the text is lengthy.
Which is archived in a TextView using android:ellipsize="end"
Is there a way to achieve "..." ellipsis or to control the number of lines in a WebView?
Here is the code:
String header = "<html><head><meta http-equiv=\"Content-Type\" +" + "content=\"text/html; charset=UTF-8\" /></head>";
String dt = "<body dir=\"rtl\">" + o.get(p).getTitle() +"</body></html>";
webView.loadData(URLEncoder.encode(header + dt,"utf-8").replaceAll("\\+"," "), "text/html", "UTF-8");
You could parse the html and find out which is the last visible html element on the page. You could then use the following by appending the #ellipsis id to that element.
CSS Text Wrapping:
http://jsfiddle.net/6HcWM/
The problem will be finding the last visible html element as the screen size can vary, also the zoom level could presumably vary. I'm guessing that you'll need to append JavaScript to the html to discover this...
Maybe this would work:
How to tell if a DOM element is visible in the current viewport?
You have two simple options:
Use CSS and the text-overflow property on your HTML element: directions here.
If you need a bit better control where the ellipsis appears and have the means — include jQuery and a jQuery ellipsis plugin in your HTML via script tags: directions here.
Related
I was hoping to get some help in how I should approach a program I have attempted to write a few times now.
I have a number of folders. In each folder, there is a HTML file, and a .txt file which contains text in the HTML file, stripped of all HTML tags.
As an example, a simplified HTML file may be
<html><head></head><body><p>This is some <b>text</b></p><p>Please ignore me</p></body></html>
And within a .txt in the same folder, I have "This is some text".
From these two files, I would like to create a new file which is a HTML with a box drawn around "This is some text", like so :
The obvious problem here is that the pretty-printed text files do not contain any mark-up, and so finding it within the HTML document is difficult.
My idea thus far has been :
-Save the .txt contents in a variable.
-Grab the HTML contents, strip of all HTML tags :
public static String html2text(String html) {
return Jsoup.parse(html).text();
}
I'm unsure how to proceed from this point. I mean...I could try to add a div with a class surrounding the text, and then add a border style to this...but how do I find the sub-string in the HTML reliably, retaining all of the markup within the HTML ?
I'm sure there is a simple way to do this and I am just overthinking it, I would usually have a chat with a friend about this and solve it but everyone seems to be offline - so I come to you for guidance here.
Can anyone offer any feedback please? Thanks.
This should work for you:
More information on selectors and setting attribute values
private void test(){
//replace with your stored variables
String html = "<html><head></head><body><p>This is some <b>text</b></p><p>Please ignore me</p></body></html>";
String txt = "This is some text";
Document doc = Jsoup.parse(html);
String query = "p:contains(" + txt + ")";
Elements htmlTxt = doc.select(query); //selects all the paragraph elements with your target txt
//Loop through each element and add a red border around it
for(Element e : htmlTxt){
System.out.println("e: " + e.toString());
e.attr("style", "border:3px; border-style:solid; border-color:#FF0000; padding: 1em;");
}
}
Given the following Html:
<button type="button"><b><em><u>Next</u></em></b></button>
In the page source I have more than one button. I have only option to find this element with text Next. I tried following methods but without success:
driver.findElement(By.cssSelector("button>b>em>u[text()='Next']"))
driver.findElement(By.cssSelector("button>b>em>u[.='Next']"))
driver.findElement(By.cssSelector("button>b>em>u.contains('Next')"))
It might be the case that the button has whitespace or other characters, I would switch to an xpath selector.
Selecting the u element
This xpath will select the u element:
driver.findElement(By.xpath("//button/b/em/u[contains(., 'Next')]"))
Selecting the button
To select the button containing the above u element, e.g. so that the button can be clicked:
driver.findElement(By.xpath("//button[b/em/u[contains(., 'Next')]]"))
Xsl fiddle of this here
Element not Found?
As an aside, and in general, when looking at HTML to determine css or xpath selectors for Se, ensure that you are looking at the final rendered version of Html, and not just the original Html served from the web server - client side javascript may have modified the html significantly after loading, and also note that if the served html was not well formed, that browsers can also change html. In Chrome, I use the Developer tools : Elements pane to view html.
Try assigning an ID to the button and then map the functionality to the button ID rather than button text like this:
<button id ="btn1" type=button">
You are combining xpath selector syntax in your css selector. Try this in stead:
driver.findElement(By.xpath("//button/b/em/u[text()='Next']"))
or
driver.findElement(By.xpath("//u[text()='Next']")).
If you do wish to use a css selector, remove the text() part like so:
driver.findElement(By.cssSelector("button>b>em>u"))
Below xpath should find 1st occurrence of "Next" button:
//button[text()='Next'][1]
If you want to get 2nd occurrence:
//button[text()='Next'][2]
I have some amount of informations to be displayed in Dialog Box. It comes like Title, then under it text; Title, then under it text. Like wise, there are 4 titles and 4 descriptions to be displayed. It should come like this
Title One
description;description;description;description;description;description;description;description;description;description;description;description;description;description;description
Title Two
description;description;description;description;description;description;description;description;description;description;description;description;description;description;description
As you can see, there are bold texts, underlined texts, line breaks etc. I want to add this kind of a text to the alert box, so below is what I tried.
TextView msg = new TextView(this);
msg.setText("<html><u>Message</u></html>")
AlertDialog.Builder ab = new AlertDialog.Builder(this);
ab.setTitle("Title");
ab.setView(msg);
ab.setCancelable(false);
//rest of the code
However this trick didn't work. What happened is, all the HTML tags showed up as they are! And the text is not clear! Seems like it mixed with the background of the default colour of AlertBox, black. How can I solve this issue? Please help!
PS: Or am I using the wrong method? Wrong dialog box?
You will need to use Html.fromHtml() to use HTML tags in TextView as:
msg.setText(Html.fromHtml("<u>Message</u>"))
And you also see all HTML tags supported by TextView.
As it turns out, you don't actually need any extra TextViews to do this. Simply include the HTML in your alert's "setMessage()" call (which replaces the "setView()" call in your question) and pass it the html-formatted string. Be sure to only use <b>, <u>, and <i> in your formatting, though because those are the only tags it supports. If you're using a String resource for the text in your alert, call getResources().getText(R.id.yourHtmlString) rather than getResources().getString(R.id.yourHtmlString), though, or the tags will be completely stripped from the String.
If you want to add a link and make it clickable,
msg.setMovementMethod(LinkMovementMethod.getInstance());
msg.setClickable(true);
If you need to add more complex HTML, with CSS and META, you can add a WebView to the dialog, like this:
String webViewString = yourMeta + yourCss + yourHtml;
yourCustomWebView.loadData(webViewString, "text/html; charset=UTF-8",
null);
yourAlertDialog.setView(yourCustomWebView);
This way, you can display fully formatted HTML pages in your dialog.
Try this,
Font color,
String source = "<b><font color=#ff0000> Loading. Please wait..."
+ "</font></b>";
Font underline,
String source = <u>Message</u>
msg.setText(Html.fromHtml(source));
In case if you need it.
Better to use HtmlCompat.fromHtml((htmlString, 0) for compatibility with older versions.
I've been trying to style html option tags, unsuccessfully. The code I've issued is the following:
String htmlString = <something inline styled>;
$("#nombreFuenteLB > option[value^='" + "Helvetica" + "']").replaceWith(htmlString);
But there was no good, any idea?
Thanks in advance,
Before selecting anything you have to attach the elements to the document, you should test if the select returns something. Proly your filter doesnt match any element.
I have a list of Strings that I add to TextViews one by one. The text is html so I can add images within the text.
So my question is... How can I add an Image so that the text appears above it. currently while using HTML.ImageGetter class text is added below the image, not above it:
Here is my Html text to be shown:
myText += "<img src='titles.png'><span> text to be above image </span>";
Please try following code as example(Html text is changed):
myText += "<div style='position: relative;width: 100%;'> <img src='titles.png'><span style='position: absolute;top: 100px;left: 0;width: 100%;'> text to be above image </span></div>";
I referred http://css-tricks.com/text-blocks-over-image/ for checking for css properties.
Hope this is helpful for you.
Thanks & Regards,
Chanchal
you can add a simple alt="texthover" to the anchor tag and it will display the text in the alt in most browsers.
But that is not as good as creating an a.hover class that would display text or a div that has text.
Does that help?