Text wraps after reaching halfway across screen on Android

Forum Moderators: open

Message Too Old, No Replies

Text wraps after reaching halfway across screen on Android

Tonearm

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

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

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

I have only this single line on a page:

This is a test to demonstrate strange Android word-wrapping behavior.

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

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

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

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

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

double post

Tonearm

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 to 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:

This is another test to further demonstrate strange Android word-wrapping behavior.

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

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

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

This problem does not occur on my Android RazrX

GaryK

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

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

lucy24

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>
Some random blahblah here and then some more to make sure the line wraps
</html>

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

moTi

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

sounds like a similar problem you get with

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

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

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

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 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 .

!? 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

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

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 .

!? 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

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 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

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

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.