homepage Welcome to WebmasterWorld Guest from 54.227.56.174
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Text wraps after reaching halfway across screen on Android
Tonearm




msg:4531789
 12:48 am on Dec 29, 2012 (gmt 0)

My website's text is being wrapped after reaching the halfway point across the screen on my Galaxy Nexus. It doesn't happen on the iPhone or any other browser I've seen. Does this sound like a familiar issue?

 

drhowarddrfine




msg:4531792
 1:04 am on Dec 29, 2012 (gmt 0)

It's the web site's fault more than likely but without more info it's only a wild guess.

Tonearm




msg:4531826
 4:59 am on Dec 29, 2012 (gmt 0)

I have only this single line on a page:

<p>This is a test to demonstrate strange Android word-wrapping behavior.</p>

On Chromium and Firefox on my laptop and Safari on my iPhone, the line doesn't wrap. On my Galaxy Nexus (Android) phone, the line wraps right after the word Android even though that point is only about 30% of the way across the screen.

phranque




msg:4531831
 5:12 am on Dec 29, 2012 (gmt 0)

have you tried any other browsers on your android?

i would try overriding default CSS width properties for the relevant elements to see if that "fixes" anything.

for example:

p {
width: 100%;
}

lucy24




msg:4531844
 5:59 am on Dec 29, 2012 (gmt 0)

Inevitable question: If you rearrange the sentence, does the wrapping stay at the 30% point or at the after-"Android" point?

This is a test to demonstrate strange Android


:: thinking that the Android must use the world's teeniest default font size if all that is only 30% of the screen, since it's about 40% of my desktop browser ::

drhowarddrfine




msg:4531885
 3:50 pm on Dec 29, 2012 (gmt 0)

The markup you show is irrelevant to the problem. We need the complete markup. Unfortunately you can't supply a link.

drhowarddrfine




msg:4531886
 3:51 pm on Dec 29, 2012 (gmt 0)

double post

Tonearm




msg:4531912
 7:40 pm on Dec 29, 2012 (gmt 0)

have you tried any other browsers on your android?

i would try overriding default CSS width properties for the relevant elements to see if that "fixes" anything.

for example:

p {
width: 100%;
}

I tried changing <p> to <p style="width:100%"> but the behavior did not change.


Inevitable question: If you rearrange the sentence, does the wrapping stay at the 30% point or at the after-"Android" point?

I changed the code to:

<p style="width:100%">This is another test to further demonstrate strange Android word-wrapping behavior.</p>

It wrapped after demonstrate which is about 30% of the way across the screen. If I rotate the screen so it is oriented horizontally instead of vertically, it wraps at about 60% of the way across the screen instead of 30%.


The markup you show is irrelevant to the problem. We need the complete markup.

This is the complete markup. The only code on the page is the above single line. It isn't valid of course, but I see the same behavior with valid markup as I do with the ultra-simplified markup posted here.

lucy24




msg:4531953
 1:07 am on Dec 30, 2012 (gmt 0)

Does the Android come with more than one font? Can you change them within the browser?

If you set your paragraph to bold (more horizontal space) or italic (less), does it wrap after the same number of words, or after the same physical space?

This is getting into grasping-at-straws territory, but I'm wondering if something in the innards of your Android is miscalculating the amount of horizontal space your text takes up, so it "thinks" it has reached the end of the line. I assume that if you give it a long paragraph, every line will end at about the same point. And if you set it to-- ugh! -- justify, does the right margin line up straight?

drhowarddrfine




msg:4532002
 12:06 pm on Dec 30, 2012 (gmt 0)

This problem does not occur on my Android RazrX

GaryK




msg:4532064
 7:56 pm on Dec 30, 2012 (gmt 0)

Have you, perhaps inadvertently, styled the body element to something less than 100%?

lucy24




msg:4532073
 9:15 pm on Dec 30, 2012 (gmt 0)

This is the complete markup. The only code on the page is the above single line.

I took this at face value. That is, if you make a "page" that says in its entirely

<html>
<p>Some random blahblah here and then some more to make sure the line wraps</p>
</html>

the text will wrap too soon. I don't suppose Android browsers come with an "inspect" mode?

moTi




msg:4532082
 10:50 pm on Dec 30, 2012 (gmt 0)

sounds like a similar problem you get with

<p style="text-align: justify">blabla..

a longer sentence is supposed to wrap at the end of the line but it wraps at about halfway. so simple and no one seems to care. it's the worst browser i can think of. nearly 2013 and bugs like ie5..

Tonearm




msg:4532746
 7:14 am on Jan 3, 2013 (gmt 0)

Does the Android come with more than one font? Can you change them within the browser?

I can't seem to change the font. I can change the font size but the result is the same.

If you set your paragraph to bold (more horizontal space) or italic (less), does it wrap after the same number of words, or after the same physical space?

I tried bold and italic and it wraps after the same number of words and horizontal space. bold/italic doesn't seem to change the horizontal space taken up by the text in this case.

And if you set it to-- ugh! -- justify, does the right margin line up straight?

justify causes the text to take up a little more horizontal space but it wraps at about the same point.

Have you, perhaps inadvertently, styled the body element to something less than 100%?

I tried setting the body width to 100% explicitly with no change.

sounds like a similar problem you get with

<p style="text-align: justify">blabla..

a longer sentence is supposed to wrap at the end of the line but it wraps at about halfway. so simple and no one seems to care. it's the worst browser i can think of. nearly 2013 and bugs like ie5..

Does this mean you see the same thing on your Android device? If so, which device is it?

moTi




msg:4533178
 8:18 am on Jan 4, 2013 (gmt 0)

Does this mean you see the same thing on your Android device? If so, which device is it?

i don't have an android device at hand, but when i was testing my mobile website on the android browser emulator on my notebook, i got similar results as you describe. i won't link to the solution on stackoverflow, but in my case it had to do with a div that the android browser didn't fill with the text completely and instead wrapped the text halfway.

Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser.

the suggested solution in this case is to make a transparent png and set it as background for the <p>.

!? yeah, you heard right. crazy hack and it worked. but: eventually i decided to not implement it. on principle, no way i do that stuff to cater such a whack browser. i say it again: for me as a developer, the android browser is by far the worst and most annoying browser on the market these days.

google for "p style incorrect unless background color applied".
so are we talking about the same issue?

drhowarddrfine




msg:4533194
 11:22 am on Jan 4, 2013 (gmt 0)

I have now tested this on 5 Android devices in my office with other employees, including my old one from 3 years ago, and I still can't duplicate the problem.

Tonearm




msg:4533369
 8:33 pm on Jan 4, 2013 (gmt 0)

the suggested solution in this case is to make a transparent png and set it as background for the <p>.

!? yeah, you heard right. crazy hack and it worked. but: eventually i decided to not implement it. on principle, no way i do that stuff to cater such a whack browser. i say it again: for me as a developer, the android browser is by far the worst and most annoying browser on the market these days.

I'm with you. No way am I implementing that hack.


google for "p style incorrect unless background color applied".

so are we talking about the same issue?

We are indeed! I read over the stackoverflow page and discovered that I can fix the problem by adding background-color:white to my p's and h1's. Many thanks for pointing me in the right direction.


I have now tested this on 5 Android devices in my office with other employees, including my old one from 3 years ago, and I still can't duplicate the problem.

That is really strange. You're using my example exactly? Maybe moTi could point you to his Android emulator. I'm using a real Galaxy Nexus and I have the issue.

moTi




msg:4533459
 2:52 am on Jan 5, 2013 (gmt 0)

you're welcome. when i noticed the bug several months ago, i was wondering why the net isn't full of bug reports about this issue (wrong assumption in my memory, that "text-align: justify" was the culprit).

it's such very basic stuff, i mean a <p> inside a <div>, come on.. that's really like ie5 behavior, very frustrating. since the background color of my pages isn't plain, the only solution i found is the transparent image. no way.

That is really strange.

indeed. that being said, when i tested my website over at the electronics store on some random device, i believe the bug didn't appear either.
i have the standard android sdk for testing at home, downloadable from developer.android.com.

moTi




msg:4533473
 4:07 am on Jan 5, 2013 (gmt 0)

aha! now we have it! upon further fiddling i discovered the culprit for the strange behavior: it's the auto-fit function in the settings which is unfortunately on by default.

settings > advanced > auto-fit pages - format webpages to fit the screen

the text wraps in normal mode at the same point where it wraps in zoom mode. if you untick it, you get normal expected text wrapping. i'd definitely call it a bug rather than a feature, since the android stock browser is the only browser which causes this strange behavior and it breaks standard html and css on validated web pages. what a bummer.

same issue on stackoverflow:
google for "android autofit mode causing issues with css width in web page"

Tonearm




msg:4533613
 9:59 pm on Jan 5, 2013 (gmt 0)

Nice one, persistence pays off again. :) That's a bummer it's default, but it's nice to know what's causing it. The "solutions" are the same.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved