Why does the font in these TD elements render at different sizes?

Question

Here is a simple table with 2 TDs. http://z5h.github.io/broken_render/broken.html

On recent Chrome / Firefox on Android they render at VERY different sizes. I'm not clear why.

On Desktop browsers they do not.

Reducing the ammount of text in the first td fixes the problem. Specifying per element styles does not change the font size. e.g. http://z5h.github.io/broken_render/broken-styled.html

Why is this?

Code is

<html>
  <head>
    <meta content='text/html;charset=utf-8' http-equiv='Content-Type'> 
  </head>
  <body>
    <table>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </td>
      </tr>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        </td>
      </tr>
    </table>    
  </body>
</html>

This is what it looks like on a fully up to date Chrome on Nexus 4. Same problem on Firefox.

example

The browser is applying the default font styling which may differ from browser to browser. Apply some CSS rules for the font to clear up the issue. — sbeliv01, Apr 12 '13 at 17:57
I would suspect useragent stylesheets are applying style to either the first child row or last child row, so you could try specifying styles for those pseudo selectors — Justin Bicknell, Apr 12 '13 at 17:58
Also, when there is less text in the first td, it renders a smaller size! — Mark Bolusmjak, Apr 12 '13 at 18:00

score 3 · Answer 1 · edited May 23 '17 at 11:44

3

What you're seeing is Chrome for Android's "helpful" font boosting feature. There's no guaranteed way to disable it.

If you open the page in the normal Android browser (or anything using a WebView), you won't see this effect.

edited May 23 '17 at 11:44

Community

1
1

answered Apr 15 '13 at 11:58

Delyan

8,881
4
37
42

Sleavely · Accepted Answer · 2013-04-16T17:23:32.667

Most mobile browsers try to detect the main content of the page and enlarge it so that the user wont have to zoom in on pages without an explicit mobile design, this is called "Text Inflation" and is controlled by the text-size-adjust CSS property in most cases.

Stolen syntax example from the above link:

text-size-adjust: none               /* text is never inflated */
text-size-adjust: auto               /* text may be inflated */
text-size-adjust: <percentage>       /* text may be inflated of this exact proportion */

Please note that the text-size-adjust property is not standardized, and thus may have to be prefixed with -webkit-, -moz-, and other browser vendors' prefixes.

Also, not to be confused with font-size-adjust. :-)

jjjjjjjjjjjjjjjjjjjj · Answer 3 · 2013-04-19T22:19:24.343

I had a similar problem with irregular resizing of text on handhelds. I solved it by adding following three lines inside <head></head>.

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Read more about the viewport meta-tag here: http://davidbcalhoun.com/2010/viewport-metatag
Hopefully this was of some help.
Good luck!

Why does the font in these TD elements render at different sizes?

3 Answers3

Linked