Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
itp
Contributor
itp
Posts: 31
Registered: ‎10-01-2010
My Device: Blackberry Curve
My Carrier: Rogers

inconsistent rendering of text in html containers on Z10 native browser

We are having trouble rendering an html web page properly in Blackberry Z10.(os10.1)  It seems that by default the native browser renderes fonts to a very small size. If it did this consistently, we could deal with it.

 

However it seems that when there are more than two lines in a container (span, div, table cell etc..) the font will suddenly double in size.  This makes for very irregular pages.  Even worse, you you tilt horizontal and then back to vertical, the fonts get smaller.

 

We tried some css directives to define font , but the browser seems to have the last word on layout.

 

For example see the example below. Note that Line 3 is rendered in a larger font for no apparent reason other than it is large than line 1 and 2.  Same behaviour for divs, spans and paragraphs.

 

<table>

    <tr><td>

              <p>Line 1</p>
            12345678901234 12345678901234 12345
            12345678901234 12345678901234 12345
            12345678901234 12345678901234 12345
            12345678901234 12345678901234 12345         
      </td></tr>

             <tr><td>

             <p>Line 2</p>       
            12345678901234 12345678901234 12345
            12345678901234 12345678901234 12345
            12345678901234 12345678901234 12345
            12345678901234 12345678901234 12345
            12345678901234 12345678901234 12345
            </td>

</tr><tr>

            <td>

            <p>Line 3</p>       
            12345678901234 12345678901234 123456
            12345678901234 12345678901234 123456
            12345678901234 12345678901234 123456
            12345678901234 12345678901234 123456
            12345678901234 12345678901234 123456
            </td></tr></table>

 

 

Is there a tsetting or echnique to work around this problem?

 

thanks

 

itp

Please use plain text.
BlackBerry Development Advisor
chadtatro
Posts: 614
Registered: ‎10-01-2009
My Device: Z10
My Carrier: Bell

Re: inconsistent rendering of text in html containers on Z10 native browser

Hello,

 

Is this just for a website, or an actual application?

 

Either way, I have a feeling the issue may be the Viewport settings which control how content is scaled in the browser/webview.

 

Your best bet would be to check-out Anzor's Knowledge Base article on how to set the Viewport -> https://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-...

 

For debugging an app, you can enable Remote Web Inspector (More info @ http://developer.blackberry.com/html5/documentation/gold/web_inspector_overview_1553586_11.html)

 

For debugging with Web Inspector in the actual Browser app you can do the following:

1. Load the Browser

2. Go to Settings > Developer Tools

3. Turn on Web Inspector

4. You can then go to the URL listed under "IP Address", something like "192.168.0.100:1337" and you will be able to access Web Inspector.

 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Please use plain text.
itp
Contributor
itp
Posts: 31
Registered: ‎10-01-2010
My Device: Blackberry Curve
My Carrier: Rogers

Re: inconsistent rendering of text in html containers on Z10 native browser

[ Edited ]

Thanks Chad, This is some great information that I had not found anywhere else!

 

It is a "conventional" web page (js, jquery/mobile). Actually the issue is observable with simple code above.

 

Although it answers some other questions, unless I am doing it wrong, it does not resolve the issue I am having namely -  when there are more than two lines in a container (span, div, table cell etc..) the font will suddenly double in size. 

 

 

However I am going to repeat what I learned from your reference so others benefit:

 

Viewport

The fixed rectangular area within which touch-based smartphone browsers display larger web pages
is called the viewport. Applying a viewport meta tag allows you to control how mobile browsers render
content within this rectangle, and whether users can magnify the page.

more: http://docs.webplatform.org/wiki/tutorials/mobile_viewport

 

Initial-scale

Initial-scale is a property of the viewport meta tag which is used to set the initial "zoom level" on a mobile browser.

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

 

thanks

itp

 

 

Please use plain text.
itp
Contributor
itp
Posts: 31
Registered: ‎10-01-2010
My Device: Blackberry Curve
My Carrier: Rogers

Re: inconsistent rendering of text in html containers on Z10 native browser

on second pass, adding this viewport meta tag is an improvement. I can makes fonts more consistent, but I still think there is a browser issue.

 

<meta name="viewport" content="width=device-width, initial-scale=1">

Please use plain text.
BlackBerry Development Advisor
rcraigbarnes
Posts: 40
Registered: ‎01-11-2013
My Device: BlackBerry Z10
My Carrier: Rogers

Re: inconsistent rendering of text in html containers on Z10 native browser

[ Edited ]

Without seeing all your code I can't be sure, but are you running into a too wide element somewhere that is causing the zoom to change?

 

Have a look at PPK's article 'width=device-width, initial-scale, and too-wide elements' http://www.quirksmode.org/blog/archives/2014/01/widthdevicewidt.html

 

edit: if you can post more complete source it would be helpful in debugging this (or you can email it directly to me if you aren't comfortable posting it in public). 

 

rcb

--
Website Relations - Web Technologies

@roryboy

1.Please resolve your thread by clicking the "Accept as Solution" button below the post which solved your problem!
2. If any post helps you please click the like/thumbs up button below the post(s)
Please use plain text.
itp
Contributor
itp
Posts: 31
Registered: ‎10-01-2010
My Device: Blackberry Curve
My Carrier: Rogers

Re: inconsistent rendering of text in html containers on Z10 native browser

Without seeing all your code I can't be sure, but are you running into a too wide element somewhere that is causing the zoom to change?

 

If we consider a span or div with 75 characters to be OK, but 150 characters to be too wide, then yes. However I have never seen a browse that does this.  Please take snippet of table code above and see if behaves in the same way in a Z10 as I describe it.

 

thanks,

itp

Please use plain text.
BlackBerry Development Advisor
rcraigbarnes
Posts: 40
Registered: ‎01-11-2013
My Device: BlackBerry Z10
My Carrier: Rogers

Re: inconsistent rendering of text in html containers on Z10 native browser

Neither 75 or 150 characters should be too wide using a regular size font :smileyhappy: I don't have a Z10 with 10.1 handy, but on a Z30 with 10.2.1 it works fine using a basic test page, code is below. 

 

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>viewport test</title> </head> <body> <table>
<tr>
<td>
<p>Line 1</p>
12345678901234 12345678901234 12345 12345678901234 12345678901234 12345 12345678901234 12345678901234 12345 12345678901234 12345678901234 12345 </td>
</tr> <tr>
<td> <p>Line 2</p> 12345678901234 12345678901234 12345 12345678901234 12345678901234 12345 12345678901234 12345678901234 12345 12345678901234 12345678901234 12345 12345678901234 12345678901234 12345 </td> </tr>
<tr> <td> <p>Line 3</p> 12345678901234 12345678901234 123456 12345678901234 12345678901234 123456 12345678901234 12345678901234 123456 12345678901234 12345678901234 123456 12345678901234 12345678901234 123456 </td>
</tr>
</table>
</body> </html>

 I should also note that if this turns out to be a bug in the 10.1 browser the only solution I will have for you is to upgrade to 10.2 or 10.2.1. I will double check when I am back in the office tomorrow with a Z10 using 10.1 (and 10.2). If it continues to happen for you when you load your code in 10.2 or 10.2.1 let me know but again  without seeing how you have your HTML/JS/CSS setup I can't do much else to debug the issue for you.

 

rcb

--
Website Relations - Web Technologies

@roryboy

1.Please resolve your thread by clicking the "Accept as Solution" button below the post which solved your problem!
2. If any post helps you please click the like/thumbs up button below the post(s)
Please use plain text.
itp
Contributor
itp
Posts: 31
Registered: ‎10-01-2010
My Device: Blackberry Curve
My Carrier: Rogers

Re: inconsistent rendering of text in html containers on Z10 native browser

[ Edited ]

I'm not sure if picture showed up below...

 

I used your code without viewport metatag.  I agree that it renders correctly with the viewport tag. However if not used,  the browser makes a mess of the layout, and adding it breaks layout in other browsers.

 

If I was starting fresh I will use viewport, but adding it now just for the Z10 breaks layout in other browsers.

 

bbtable.png

 

 

thanks,

itp

Please use plain text.
BlackBerry Development Advisor
rcraigbarnes
Posts: 40
Registered: ‎01-11-2013
My Device: BlackBerry Z10
My Carrier: Rogers

Re: inconsistent rendering of text in html containers on Z10 native browser

The pictures take a while to appear, it is there now. Defnitely doesn't look how you would want it to.

 

I just tested this on OS 10.1.0.273 on a Z10 using the code I posted above (with and without the viewport tag) and I am still not able to replicate the issue. Without the viewport tag it just zooms out all the text and treats it like desktop (which is expected). What is the exact OS version you are using?

 

Also the viewport tag shouldn't break other browsers. Desktop ones should ignore it and other mobile browsers with a page like this should have no issues rendering it (I just checked it on an iPhone with iOS 7, Galaxy S4 Chrome & FireFox and in Chrome desktop, it loads fine on all of them).

--
Website Relations - Web Technologies

@roryboy

1.Please resolve your thread by clicking the "Accept as Solution" button below the post which solved your problem!
2. If any post helps you please click the like/thumbs up button below the post(s)
Please use plain text.
itp
Contributor
itp
Posts: 31
Registered: ‎10-01-2010
My Device: Blackberry Curve
My Carrier: Rogers

Re: inconsistent rendering of text in html containers on Z10 native browser

[ Edited ]

thank you for your help!

 

My device is Z10 and OS is 10.2.1.537,

 

Here is result on  Q10 with 10.2.0.429.

 

Font size shown here is "8".  Varying the font size caused line 2 & 3 to change font size, but line 1 remained the same size. Maybe there is another setting that I should look at on device or BES server?

 

 

 Q10.png

 

best regards,

 

itp

Please use plain text.