Re: [css-d] Do modern mobile browsers deliberately ignore font size?
mar 13 2014 23:02 MiB : > mar 13 2014 Ezequiel Garzón : > >> http://81.4.104.136/fonts.html > > > I don’t see your issue in Android nor in IOS. Anyone else? I have now tested this page on several other Android hand sets and the text sizes of both the elements are the same. Clearly this issue is limited to some sets or alternatively some Android versions. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
Le 15 mars 2014 à 05:52, Tom Livingston a écrit : > You say "Font inflation exists to solve only this problem, which is a > problem that fundamentally would make mobile Web browsers unusable. > It doesn't happen if pages declare a ". > > The OP's page here: http://81.4.104.136/fonts.html doesn't inflate the > fonts for me on my iPhone. It miniaturizes them. Severely. This page > doesn't have the viewport meta tag in the head. Without the meta tag, > I will need to pinch and zoom, but the sizes are ridiculously small. > I'm gonna guess that because there is no layout, the width of the page > is very large so it is zoomed OUT a great deal. Right? Am I missing > something? Mobile Safari, in the absence of any viewport declaration, assumes a viewport 980px wide (that is equivalent to 980px wide window on a desktop browser). Of course the 'window' on iPad/iPhone is (much) narrower, thus the uniform downwards scaling of the page - this is/was done to insure that pages designed for the desktop would be viewable as a whole on those devices. Apple then invented two things to improve the usability: the double-tap on a column zooms/inflates that column and center it in the viewport, and then the viewport meta to set a specific width. (OK, and a few more - font-inflation in some circumstances [*], and the ability to control it via the text-size-adjust property) So no, you're not really missing anything. And fwiw apple.com still has [*] it always puzzles me how it exactly works, most of the time relying on it is like a game of Russian roulette… and gives bizarre results. On sites that can't really be made “responsive” for a variety of reasons I routinely set the text-size-adjust property to 100% (prefixed!), and use the viewport meta to set a width - similar to what apple.com does. Although Apple doesn't use the text-size-adjust property afaict; but then, they structured their content to avoid the font-inflation problem, I think. Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
> The alternative to font inflation is substantially worse. > > Mobile browsers give you a viewport in which you can pan and zoom > around a desktop-size viewport of the page. This feature exists for > compatibility, to allow mobile Web browsers to view Web pages > designed before good mobile Web browsers existed, or designed > without considering them. If you've considered mobile in your > design, you can use a in your page to opt out of > parts or all of this behavior. > > Some Web pages contain text that the user wants to read, and to do > this, and in cases where these dual viewports exist, the user needs > to zoom in to make the text a decent size. If, at that zoom level > where the font is readably large, the user needs to scroll side to > side to reach *each line* of the text, because the width of the > block is wider than the device. This is a horrible experience. > > Font inflation exists to solve only this problem, which is a problem > that fundamentally would make mobile Web browsers unusable. It > doesn't happen if pages declare a that means there's > no viewport scaling involved, and it doesn't happen if all their > blocks are narrow enough to be readable without side-to-side > scrolling for each line. > > -David > > -- > 𝄞 L. David Baron http://dbaron.org I'd go along with this except... You say "Font inflation exists to solve only this problem, which is a problem that fundamentally would make mobile Web browsers unusable. It doesn't happen if pages declare a ". The OP's page here: http://81.4.104.136/fonts.html doesn't inflate the fonts for me on my iPhone. It miniaturizes them. Severely. This page doesn't have the viewport meta tag in the head. Without the meta tag, I will need to pinch and zoom, but the sizes are ridiculously small. I'm gonna guess that because there is no layout, the width of the page is very large so it is zoomed OUT a great deal. Right? Am I missing something? -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
[ cc:ing list again, with Ezequiel Garzón's permission ] On Friday 2014-03-14 10:36 +0100, Ezequiel Garzón wrote: > >> Is this font boosting/inflation? > > > > It sounds like it is. > > > > Thanks for the feedback, David. I don't mean to extend this thread ad > infinitum, but it's basically the core of my question to this list. > Doesn't a feature named "font inflation", which basically decides > what's the best size for a given chunk of text, break CSS badly? If > this is the industry trend I wouldn't be surprised to see major > browsers apply font boosting even with the meta tag, etc. What's next? > "Font wisdom", where the browser chooses font family, color, weight, > etc., ignoring all the styling? I wish browsers spent more time on > making CSS-free content look better, improving their defaults (tables > come quickly to mind), instead of ignoring CSS declarations. The alternative to font inflation is substantially worse. Mobile browsers give you a viewport in which you can pan and zoom around a desktop-size viewport of the page. This feature exists for compatibility, to allow mobile Web browsers to view Web pages designed before good mobile Web browsers existed, or designed without considering them. If you've considered mobile in your design, you can use a in your page to opt out of parts or all of this behavior. Some Web pages contain text that the user wants to read, and to do this, and in cases where these dual viewports exist, the user needs to zoom in to make the text a decent size. If, at that zoom level where the font is readably large, the user needs to scroll side to side to reach *each line* of the text, because the width of the block is wider than the device. This is a horrible experience. Font inflation exists to solve only this problem, which is a problem that fundamentally would make mobile Web browsers unusable. It doesn't happen if pages declare a that means there's no viewport scaling involved, and it doesn't happen if all their blocks are narrow enough to be readable without side-to-side scrolling for each line. -David -- 𝄞 L. David Baron http://dbaron.org/ 𝄂 𝄢 Mozilla https://www.mozilla.org/ 𝄂 Before I built a wall I'd ask to know What I was walling in or walling out, And to whom I was like to give offense. - Robert Frost, Mending Wall (1914) signature.asc Description: Digital signature __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
mar 14 2014 00:24 L. David Baron : > On Sunday 2014-03-09 21:52 +0100, Ezequiel Garzón wrote: >> Is this font boosting/inflation? > > It sounds like it is. Could it be that only certain android versions are affected? I’ve never encountered this issue on any platform before. I also have never heard of it. Maybe the context and/or the specific rules affect the outcome? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
On Sunday 2014-03-09 21:52 +0100, Ezequiel Garzón wrote: > Is this font boosting/inflation? It sounds like it is. It sounds like the thread has already uncovered some links about the Chromium implementation. There's some information about Gecko's implementation here: http://www.jwir3.com/blog/2012/07/30/font-inflation-fennec-and-you/ and the start of a spec draft for the behavior here: http://dev.w3.org/csswg/css-size-adjust/ -David -- 𝄞 L. David Baron http://dbaron.org/ 𝄂 𝄢 Mozilla https://www.mozilla.org/ 𝄂 Before I built a wall I'd ask to know What I was walling in or walling out, And to whom I was like to give offense. - Robert Frost, Mending Wall (1914) signature.asc Description: Digital signature __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
On a Motorola G phone with Android Kitkat the text is quite large and the text is tiny. On an iPhone 4 all the text is the same size, and tiny. Peter El 13/03/2014, a las 23:31, Ezequiel Garzón escribió: Thanks again for your reply. Now I'm really beginning to second-guess myself! And here I was so convinced it had something to do with the font boosting and inflation John Mellor refers to here [1]. I will ask tomorrow a couple of friends to let me use their cell phones... I'm beginning to fear this is a bug specific to my Galaxy Note II... Thanks once more, and goodnight from Spain. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
Sent from my iPhone On Mar 13, 2014, at 5:32 PM, Ezequiel Garzón wrote: >> >> >> >> You don't explain what you mean with "same size" -- in a valid HTML5 >> document I wouldn't get that issue you claim -- nor do you post online code >> as HTML/CSS. It's pointless to debate what you think happened with a >> picture. Make it happen in all of our browsers too -- by posting validated >> code that illustrates your problem -- or talk about a specific known issue. > I did post (almost) valid code in my first message, but here it goes again. > Seeking validation I added a forgotten pair of forgotten TR tags, as well > as !doctype, charset information and a title: > > > > Inconsistent font size? > > table { border-spacing: 0 } > td,p { font-size: medium } > > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, > cumque, pariatur, deserunt id impedit delectus at porro eum quaerat > officia atque eligendi tempora corporis necessitatibus quos minima > eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde > consectetur! > Lorem ipsum dolor sit. > > I also posted a picture, http://i.imgur.com/WtmgiXQ.png, that shows what > happens using three main browsers (Chrome, Firefox and Opera) in the > leading mobile OS (Android)... I would test it with an iPhone if I had one, > but I think this is far from a niche question. I can't "make it happen in > all browsers" since it doesn't affect desktop browsers, the Android 2.3 > stock browser, etc. For convenience, here is a URL with such code: > http://81.4.104.136/fonts.html . I don't know what else to do in order to > present my question. > At the 81.4 address, all the text is microscopic on my iPhone iOS 7.1 Safari. > Thanks for replying. > > Cheers, > > Ezequiel > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
I see the problem on my new android galaxy tab3. Yolanda __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
> I don't see your issue in Android nor in IOS. Anyone else? Thanks again for your reply. Now I'm really beginning to second-guess myself! And here I was so convinced it had something to do with the font boosting and inflation John Mellor refers to here [1]. I will ask tomorrow a couple of friends to let me use their cell phones... I'm beginning to fear this is a bug specific to my Galaxy Note II... Thanks once more, and goodnight from Spain. [1] https://lists.webkit.org/pipermail/webkit-dev/2012-May/020819.html __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
mar 13 2014 Ezequiel Garzón : > http://81.4.104.136/fonts.html I don’t see your issue in Android nor in IOS. Anyone else? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
> > > > You don't explain what you mean with "same size" -- in a valid HTML5 > document I wouldn't get that issue you claim -- nor do you post online code > as HTML/CSS. It's pointless to debate what you think happened with a > picture. Make it happen in all of our browsers too -- by posting validated > code that illustrates your problem -- or talk about a specific known issue. > > I did post (almost) valid code in my first message, but here it goes again. Seeking validation I added a forgotten pair of forgotten TR tags, as well as !doctype, charset information and a title: Inconsistent font size? table { border-spacing: 0 } td,p { font-size: medium } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, cumque, pariatur, deserunt id impedit delectus at porro eum quaerat officia atque eligendi tempora corporis necessitatibus quos minima eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde consectetur! Lorem ipsum dolor sit. I also posted a picture, http://i.imgur.com/WtmgiXQ.png, that shows what happens using three main browsers (Chrome, Firefox and Opera) in the leading mobile OS (Android)... I would test it with an iPhone if I had one, but I think this is far from a niche question. I can't "make it happen in all browsers" since it doesn't affect desktop browsers, the Android 2.3 stock browser, etc. For convenience, here is a URL with such code: http://81.4.104.136/fonts.html . I don't know what else to do in order to present my question. Thanks for replying. Cheers, Ezequiel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
mar 12 2014 22:07 Ezequiel Garzón : > I specified in my example td,p { font-size: medium }. I would hence expect > the font size in my very simple table and in my single paragraph to be the > same, whether I include a meta viewport tag or not. It turns out it only > happens in modern Android browsers when I include such a tag, even though > that's not the described purpose of the tag. > > And, in any event, my main question to you guys is if you don't think it is a > violation of CSS standards for browsers to render text in different sizes > even though it's supposed to be the same size throughout. You don’t explain what you mean with "same size” — in a valid HTML5 document I wouldn’t get that issue you claim — nor do you post online code as HTML/CSS. It’s pointless to debate what you think happened with a picture. Make it happen in all of our browsers too — by posting validated code that illustrates your problem — or talk about a specific known issue. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
mar 10 2014 21:54 Ezequiel Garzón : > I again feel font size in particular is not supposed to be > affected by this meta tag Feel? Incongruent with something (what?) would seem more appropriate. Case in point? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
On Mon, Mar 10, 2014 at 4:54 PM, Ezequiel Garzón wrote: >> http://www.quirksmode.org/mobile/metaviewport/ > >> This has a good explanation of what it's for. > > Thanks, Tom. Still, the word "font" cannot be found in that article, > and I again feel font size in particular is not supposed to be > affected by this meta tag. Besides, I'm still puzzled by the way > modern browsers consistently font-size declarations in the absence of > the meta viewport tag. > Maybe this? Although you mention FF... https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust I use -webkit-text-size-adjust: 100%; HTH -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
> http://www.quirksmode.org/mobile/metaviewport/ > This has a good explanation of what it's for. Thanks, Tom. Still, the word "font" cannot be found in that article, and I again feel font size in particular is not supposed to be affected by this meta tag. Besides, I'm still puzzled by the way modern browsers consistently font-size declarations in the absence of the meta viewport tag. On Mon, Mar 10, 2014 at 11:36 AM, Tom Livingston wrote: > http://www.quirksmode.org/mobile/metaviewport/ > > This has a good explanation of what it's for. > > Sent from my iPhone > >> On Mar 9, 2014, at 4:52 PM, Ezequiel Garzón wrote: >> >> Greetings to all, >> >> I can't figure out why a webpage as simple as [2] renders text with >> uniform size in desktop browsers (which I would expect), but like this >> [1] in Android browsers such as Chrome, Firefox and (the main version >> of) Opera. I mean... both P and TD are given font-size: medium! Isn't >> this a violation of CSS standards? I have (rather empirically) found >> that adding the line > content="width=device-width"> fixes the issue, though I thought this >> meta tag was meant to make the value of width more predictable under >> media queries. >> >> Is this font boosting/inflation? If so, how is this not violating CSS >> standards? >> >> Thanks in advance for your advice. >> >> Cheers, >> >> Ezequiel >> >> [1] http://i.imgur.com/WtmgiXQ.png >> [2] Please consider the following: >> >> >> table { border-spacing: 0 } >> td,p { font-size: medium } >> >> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, >> cumque, pariatur, deserunt id impedit delectus at porro eum quaerat >> officia atque eligendi tempora corporis necessitatibus quos minima >> eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde >> consectetur! >> Lorem ipsum dolor sit. >> >> (If the paragraph is a bit shorter the font size is the same in P as in TD.) >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
http://www.quirksmode.org/mobile/metaviewport/ This has a good explanation of what it's for. Sent from my iPhone > On Mar 9, 2014, at 4:52 PM, Ezequiel Garzón wrote: > > Greetings to all, > > I can't figure out why a webpage as simple as [2] renders text with > uniform size in desktop browsers (which I would expect), but like this > [1] in Android browsers such as Chrome, Firefox and (the main version > of) Opera. I mean... both P and TD are given font-size: medium! Isn't > this a violation of CSS standards? I have (rather empirically) found > that adding the line content="width=device-width"> fixes the issue, though I thought this > meta tag was meant to make the value of width more predictable under > media queries. > > Is this font boosting/inflation? If so, how is this not violating CSS > standards? > > Thanks in advance for your advice. > > Cheers, > > Ezequiel > > [1] http://i.imgur.com/WtmgiXQ.png > [2] Please consider the following: > > > table { border-spacing: 0 } > td,p { font-size: medium } > > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, > cumque, pariatur, deserunt id impedit delectus at porro eum quaerat > officia atque eligendi tempora corporis necessitatibus quos minima > eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde > consectetur! > Lorem ipsum dolor sit. > > (If the paragraph is a bit shorter the font size is the same in P as in TD.) > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Do modern mobile browsers deliberately ignore font size?
Greetings to all, I can't figure out why a webpage as simple as [2] renders text with uniform size in desktop browsers (which I would expect), but like this [1] in Android browsers such as Chrome, Firefox and (the main version of) Opera. I mean... both P and TD are given font-size: medium! Isn't this a violation of CSS standards? I have (rather empirically) found that adding the line fixes the issue, though I thought this meta tag was meant to make the value of width more predictable under media queries. Is this font boosting/inflation? If so, how is this not violating CSS standards? Thanks in advance for your advice. Cheers, Ezequiel [1] http://i.imgur.com/WtmgiXQ.png [2] Please consider the following: table { border-spacing: 0 } td,p { font-size: medium } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, cumque, pariatur, deserunt id impedit delectus at porro eum quaerat officia atque eligendi tempora corporis necessitatibus quos minima eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde consectetur! Lorem ipsum dolor sit. (If the paragraph is a bit shorter the font size is the same in P as in TD.) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/