how do i stop random characters from appearing on android webpages? - android

i am wondering why these characters appear on certain pages on android devices and how to remove them. at first i thought they were appearing on :before :after selectors because of content:""; on .clearfix and .col- etc in the bootstrap css. but im stumped so i thought id post here. some devices they show up as little boxes with "x" inside and some with "?" inside but only on android devices..
the links below are screenshots taken from browserstack:
https://www.dropbox.com/s/7hm00z4bkt8m9i3/Screen%20Shot%202015-12-15%20at%202.17.21%20PM.png?dl=0
https://www.dropbox.com/s/qn4a934kos5kdww/Screen%20Shot%202015-12-15%20at%202.17.05%20PM.png?dl=0

Related

Android accessibility in Edit text box text not reading properly/Expect After Talk back on

I am creating app for blind people. there, when blind people after entered the zip code on that profile registration Edit Text box, like 45987. It reading as Fourty Five Thousand and Nine hundred eighty seven.
But, I want to read an Four Five Nine Eight Seven. 4 5 9 8 7.
Note: when i tried for the same in TexView, its reading as correctly. only problem with EditText.
My Sample Code: zipCode_EditText.setContentDescription("4 5 9 8 7");
I have referred these link:
Android Acccessibility: How do I change the text read out loud for an EditText View
How to make TalkBack read TextView error message automatically?
Thanks Advance
In general, you don't want to force a screen reader to read something a specific way. Unfortunately, screen reader users are used to the way things are read. If your input field has a properly associated label with it, such as "zipcode", then when they hear "zipcode Fourty Five Thousand and Nine hundred eighty seven", they will understand what it is. Screen reader users can navigate elements by character so they can read each number separately if they want.
The important part is that you have a label associated with the input field. I know you're writing specifically for Android (which I'm not familiar with), but if I compare what you're doing to html, in html you'd want something like:
<label for="zip">zipcode:</label>
<input id="zip">
There are ways (in html) to force what a screen reader says, but it typically messes things up for braille users. Any "hidden" text you add to force the screen reader speech is physically displayed on braille devices.
For html, the autocomplete attribute can be used as a "hint" to screen readers on the type of information that is in a field. Screen reading software can use that hint to change the way it reads the contents of the field (such as autocomplete="postal-code"), but support for this hint is not widely supported yet. Again, I know that's for html and you're writing specifically for android, but perhaps there's a similar "hint" concept for android.
It is best to not force Talk Back to do this. My recommendation would actually be to just stop doing this altogether. As a blind person it is actually easier to parse a single number than individual ones. 45,500 is easier to remember than 4, 5, 5, 0, 0. Covering "forty-five thousand nine-hundred eighty-seven" mentally to a zip code becomes second nature. And if there's a number long enough such that it requires inspection one number at a time, TalkBack has modes to support that. You can switch TalkBack to character mode and explore it like that manually.
This requirement really just comes from sighted individuals thinking like a sighted individuals and solving problems blind individuals don't have.
And since another user brought it up, the best way to code an edit text in Android is
TextView label = ....
EditText editBox = .....
label.setLabeFor(editBox);

How to display Ȳ (Ȳ) properly in Android?

I'm trying to display this character Ȳ Ȳ . All other characters display correctly except this(Ȳ). For example, ↑ , displays well but not Ȳ.
I've tried both Ȳ and the code(Ȳ) like:
mEditText.setText(Html.fromHtml("<h5><font color=\"Gray\">Ȳ</font></h5>");
mEditText.setText(Html.fromHtml("<h5><font color=\"Gray\">Ȳ</font></h5>");
How can I display this character correctly?
You could try using \u0232 as a String:
mEditText.setText("\u0232");
I found out the unicode value using Android Studio’s context menu option “Convert to Basic Latin” which has been helpful quite often recently.
Got same result; the overhead bar is at right of Y
Curious! I just tried what I recommended using an EditText as well as a Toast (as can be seen in my previous screenshot) and both worked just as expected.
The answer is where to run an app...I've run that app in BlueStacks and result wasn't good but over Nexus 5 the Ȳ displayed properly.So if you use BlueStacks and these kind of character just ignore the shape and check over real Android device.

HTML A Name attribute on android browser

I have a web page with about 150 HTML <a name="blah"></a> elements, plus 26 more that group these by letter, like <a name="lettera"></a>.
The page passes W3C HTML validation and renders and operates correctly in desktop browsers. Trying two different Android browsers and an emulator, the letter index does not work. When any letter is selected, the page only moves to the lettera tag. The location bar correctly shows <site>page.htm#letterx as the current location, but the display has not moved.
Other pages on the same site with a smaller number of name tags work correctly. I found one web reference saying that some browsers did not like to see two name tags in a row and suggesting placing the nonsense tag in between them to break them up, but this did not help. Any suggestions?
Answering my own question in case it helps someone else someday, it appears there needs to be actual renderable content between two successive name tags for the android browser (a comment alone didn't do it). When I added some all worked as intended.

Grey Colored box issue on web-view on text selection

I'm rendering a html page(html page is constructed using JQuery, text with html tags, used a canvas in it) to Activity with web-view & to default browser comes with device. When I long press on text in html page I'm getting dark grey colored boxes on it.This is unexpected & weird behavior of web-view.Please see attached images for my problem
I searched for such issue but not getting any solution for it.Same html page is tested on Mozilla app but not getting such square boxes, also on ACER tab running HoneyComb its working fine no such weird square boxes.How to get rid of such boxes?. I using Samsung Tab2 10.1 with android version 4.0.4. Please help me to solve this issue.
I don't know what you code for it?
But you can validate the page on http://validator.w3.org/
There may be problem with your html like any tag open but not closed, etc.
So once you validate it, then test it again.

Backflip Testing Results

Good Morning,
I got my app to install on the Backflip and started testing it. On the emulator everything appeared ok but on the Backflip there are a few notable differences.
I have edittext boxes which on the emulator automatically vary in size to accommodate the text. The text is a number, the max being two digits, i.e., 1-99. On the Backflip the edit boxes seem to be a fixed width and that width is larger than needed. Consequently some of the edittext boxes go past the end of the screen and can't be used or seen. This doesn't happen on the emulator.
I also have spinners. One set of spinners is created using android.R.layout.simple_spinner_dropdown_item populated by an array from array.xml. These spinners have the radio button showing and they work on both the emulator and the Backflip displaying a white background with black text.
The other spinner is created using int layoutID = android.R.layout.simple_spinner_item and is populated with strings from the database using an ArrayAdapter. This spinner displays ok on the emulator with a white background with black text. On the Backflip however, it displays the white background but with white text making the list essentially impossible to see. The list is populated because when I press on an item the background color changes to red, the text is white, and the program works ok.
My question is: Are these discrepancies peculiar to the Backflip or am I doing something wrong in the code? I'd hate to think all devices come with peculiarities that require workarounds. Hopefully I'm doing something wrong and hope someone can point out what it is. I'll post any code someone wants to see but right now I don't know what to post. Thanks.
[Edit] I should add that when I use android.R.layout.simple_spinner_dropdown_item for the other spinner the text shows up ok but I now have the radio buttons which I don't want.
I should add that when I use
android.R.layout.simple_spinner_dropdown_item
for the other spinner the text shows
up ok but I now have the radio buttons
which I don't want.
Do not use android.R.layout.simple_spinner_item for the drop-down item, since that is not what it is supposed to be used for. Use android.R.layout.simple_spinner_dropdown_item, or copy that layout into your project (in data/res/layout/ in one of your SDK platform directories), modify it to suit, and use it.
As to why the behavior difference, Motorola, for the MOTOBLUR handsets, appears to have modified some of the stock resources to fit their needs. While those resources will generally work, they will only have been tested for things they are supposed to be used for. Relying on android.R.layout resources will generally work, but only if those resources are used as intended. If you want full control, make your own copy.

Categories

Resources