I read all possible questions/response on stackoverflow, but i still can't do what i would like.
I created an application to show News
1. Used**Thoolika.ttf** Unicode font.
2.Now I am using **AnjaliOldLipi.ttf** font
3.Older data was in the form **c¬¥Vvp¢: d¡...**.
4.New data is in the form **സ ; ൂ ; പ ; ് ; പ ;** .
My problem is I can't justify this news inside a webview.For this,I am using html given below.
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8 />
<meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=5.0; user-scalable = yes /><style>#font-face { font-family: 'Anjali';src: url('file:///android_asset/fonts/**AnjaliOldLipi.ttf'**);}body { font-family: 'Anjali';}</style></head><body style=font-family:Anjali;margin:5px;><div style=padding:5px;**text-align:justify;** >
<span style=color:#3070AC;font-family:Anjali;font-size:20px;font-weight:bold;text-decoration:none;>NEWS TITLE</span><br>
<div style=width:100%;text-align:right;padding-top:2px;padding-right:2px;color:#BCBCBC;font-family:monospace;font-size:11px;><i>NEWS DATE</i></div></div>
<div style=padding-top:5px;padding-left:5px;padding-right:5px;color:#000000;font-family:Anjali;font-size:14px;text-decoration:none;text-align:;>
NEWS CONTENT
</div></body></html>
How can i align both left and right side of this webview(justify).
Related
I have html code that I need to render in webview to display HTML text editor styled content. The one and only option is to use webview. So, I implemented my API to send response particular <div> element and displayed it using official flutter webview. Android its displaying correctly and IOS font sized is very small(can't even read). What I am doing wrong?
Relevant code snippet:
var contentBase64 = base64Encode(const Utf8Encoder()
.convert(
"""<html>
<body style='"margin: 0; padding: 0;'>
<div>
$htmlString //my html code snippet coming from API
</div>
</body>
</html>"""));
//.....
WebView(
initialUrl: 'data:text/html;base64,$contentBase64',
// gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(()=>VerticalDragGestureRecognizer())),
),
The reason is, you only wrapped with html element. You have to specify meta tag to responsive in IOS devices. To do that you also have to add head element as below:
var contentBase64 = base64Encode(const Utf8Encoder()
.convert(
"""<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body style='"margin: 0; padding: 0;'>
<div>
$htmlString
</div>
</body>
</html>"""));
In my opinion:
Android is smart enough to identify html code without <meta> with viewport, but IOS does not. You have to explicitly set viewport to mobile device, like you make webapp responsive to mobile devices.
It's better to wrap <!DOCTYPE html> annotation to render correctly.
This is what you need exactly to your code:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><!--rest of your html-->
I'm trying to define a title for a <select> tag which is read by the Android screen reader, mostly called "Talkback". On my test device (Galaxy S8+) it's called "Voice Assistant".
Interestingly, the following HTML works with NVDA (PC) and with VoiceOver (iOS), but I don't have any idea why it doesn't work on Android.
Here's the minimal example as HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<style>
form{
background: red;
margin: 5px 0;
}
label,
select{
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
Test link
<form action="/en" method="post" accept-charset="UTF-8">
<label name="edit-destination-1-label" id="edit-destination-1-label" for="edit-destination-1">Choose language</label>
<select id="edit-destination-1" name="edit-destination-1" aria-labelledby="edit-destination-1-label">
<option value="/de">German</option>
<option value="/fr">French</option>
<option value="/en" selected="selected">English</option>
</select>
</form>
Test link
</body>
</html>
As you can see it's just a reference of for and id as well as a reference of aria-labelledby.
Does anyone know a solution here? I just want the Android screen reader to speak "Choose language" and when you activate it, it should jump to the select menu.
For a working example reference take the post.ch page, section "calculate prices". When you navigate to it with Android it reads "Country" before the <select>.
EDIT What I've done to solve the problem temporary is to use a link instead of a label, as this works.
Using input field type='time' - when open the page with chrome on android and the phone language is set to Hebrew, the field is displayed fine, but when I try to set value, the inner fields are in reversed order (i.e. the hours in the right side, the minutes on the left). Is it solvable?
Simplest code to reproduce:
<!doctype html>
<html>
<head>
<title>
input type=time example
</title>
</head>
<body>
<input type='time' value='13:55:00'>
</body>
</html>
link to screenshot: http://www.ddc.co.il/wordpress_heb/demos/stam_input_time.jpg
I have a WebView in my Android App that is loading an HTML string using the loadDataWithBaseURL() method.
w = (WebView)findViewById(R.id.webview);
w.getSettings().setJavaScriptEnabled(true);
String html = "<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Smooth Scroll</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- stylesheets --> <style type="text/css"> body { max-width: 40em; width: 88%; margin-left: auto; margin-right: auto; } </style> </head> <body> <main id="top"> <nav> <hr> </nav> <section> <p> <strong>Ease-Out</strong><br> <a data-scroll href="#ANCHORLINK">Quad</a><br> </p> <p> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. </p> <p id="ANCHORLINK"><a data-scroll href="#1##%^-bottom">SCROLL TO ANCHOR LINK!</a></p> <p> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. </p> </html>"
w.loadDataWithBaseURL("http://bar",html,"text/html", "utf-8", "");
I want to use a android button to scroll to anchor link in webview. How to do it?
Your String html is broken. Because you've nested double quotes without the escape slashes.
Also, you need to make sure that you didn't nest your WebView inside a ScrollView in your layout. Because WebView has its own scroll function, and it might not work properly, if you nest it inside a ScrollView.
You can do it with an android Button as follows:
protected void onCreate(Bundle savedInstanceState) {
w = (WebView)findViewById(R.id.webview);
w.getSettings().setJavaScriptEnabled(true);
String html = "<!DOCTYPE html> <html lang=\"en\"> <head>....<body><p id=\"top\">Top of the page content</p>....</body></html>";
w.loadDataWithBaseURL("http://bar",html,"text/html", "utf-8", "");
Button topButton = (Button) findViewById(R.id.topButton);
topButton.setOnClickListener(TopButtonHandler);
Then outside the onCreate function:
View.OnClickListener TopButtonHandler = new View.OnClickListener() {
#Override
public void onClick(View v) {
w.loadUrl("javascript:document.getElementById(\"top\").scrollIntoView()");
}
};`
I got this to work with an html file in my assets folder. Which is a little different from loading a string html. But a string html should work the same way, as long as it doesn't have any errors, such as forgetting to put escape slashes for nested double quotes.
Instead of using an android Button, you can also get an html link to work this way inside your html file, located in your assets folder:
<!DOCTYPE html>
<head>
....
</head>
<body>
<p id="top">Content at the top of the page</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Go to Top
</body>
</html>
When you click on the Go To Top link, then the page will scroll to the top paragraph, provided that you didn't nest your WebView inside a ScrollView in your layout.
I'm trying to show a preview of URL with jsoup in android.
But my concern now is that I can not decide which image to show in preview. What I want is to show the website image, such as the "F" logo for Facebook, "t" logo for Twitter.
So, can anyone help me with this problem?
I guess you are looking for favIcon.
a favIcon might be in following ways-
like
<head>
<link rel="icon" href="http://example.com/image.ico" />
</head>
or
<head>
<link rel="icon" href="http://example.com/image.png" />
</head>
or
<head>
<meta content="/images/google_favicon_128.png" itemprop="image" />
</head>
For fist 2 types-
Connection con2=Jsoup.connect(url);
Document doc = con2.get();
Element e1=doc.head().select("link[href~=.*\\.(ico|png)]").first(); // example type 1 & 2
String imageUrl1=e1.attr("href");
Element e2 = doc.head().select("meta[itemprop=image]").first(); //example type 3
String imageUrl2=e2.attr("itemprop");
then load the imageUrl in ImageView.