[css-d] iPad font rendering in both orientations...

[Charles Turner]

Hi all-

First post, and a bit of a newbie with respect to much of this. Sorry if it's 
off-topic:

I've got a simple page that is supposed to render a font on the iPad at the 
same size in both portrait and landscape modes. It contains the following 
markup:



and in a media query for the (portrait) display mode:

-webkit-text-size-adjust: 133.%;

When I view the page on the iPad simulator all looks well, but on the actual 
hardware, the font looks slightly bolded in landscape mode (or narrower in 
portrait, depending on your perspective).

Any idea what I'm doing wrong, or need to do to fix this? I haven't yet found 
anything that addresses the issue on the Internet, but I can't imagine this 
hasn't been observed/addressed.

Thanks so much!

Charles Turner

__
css-discuss [cs...@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] iPad font rendering in both orientations...

[David Laakso]

Charles Turner wrote:

I've got a simple page that is supposed to render a font on the iPad at the 
same size in both portrait and landscape modes. It contains the following 
markup:



and in a media query for the (portrait) display mode:

-webkit-text-size-adjust: 133.%;

When I view the page on the iPad simulator all looks well, but on the actual 
hardware, the font looks slightly bolded in landscape mode (or narrower in 
portrait, depending on your perspective).


Charles Turner

  





Welcome!

An off-the-wall guess [ no iPad or iPad simulator ], try:


instead of:


Best,
~d






--
:: desktop and mobile ::
http://chelseacreekstudio.com/

__
css-discuss [cs...@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] iPad font rendering in both orientations...

[Charles Turner]

On Aug 23, 2010, at 6:35 PM, David Laakso wrote:

> An off-the-wall guess [ no iPad or iPad simulator ], try:
> 
> instead of:
> 

Hi David-

Thanks very much for your suggestion. It worked after I had removed the 
"-webkit-text-size-adjust: 133.%;" markup, which also enabled me to 
simplify the whole page by getting rid of the media queried CSS.

It turns out that my problem appears unrelated, however. If you can view this 
page on an iPad in landscape and portrait mode, you'll see the phenomenon:



The black-on-white text appears to preserve its thickness, while the 
white-on-black type appears "thicker" in landscape than portrait.

I assume this is some phenomenon of the way that the iPad display hardware 
works. Or it could be (LCD) displays in general, as I now realize that the 
iPhone simulator doesn't rotate the display, it rotates a frame around a 
simulated screen. Doh! ;-)

Odd also that I have a mockup on an iPhone 3G/iOS4 that doesn't seem to have 
this problem.

If anyone had further comments about this, I'd be most appreciative.

Best wishes,

Charles

__
css-discuss [cs...@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] iPad font rendering in both orientations...

[Philippe Wittenbergh]

On Aug 24, 2010, at 12:05 PM, Charles Turner wrote:

> It turns out that my problem appears unrelated, however. If you can view this 
> page on an iPad in landscape and portrait mode, you'll see the phenomenon:
> 
> 
> 
> The black-on-white text appears to preserve its thickness, while the 
> white-on-black type appears "thicker" in landscape than portrait.
> 
> I assume this is some phenomenon of the way that the iPad display hardware 
> works. Or it could be (LCD) displays in general, as I now realize that the 
> iPhone simulator doesn't rotate the display, it rotates a frame around a 
> simulated screen. Doh! ;-)
> 
> Odd also that I have a mockup on an iPhone 3G/iOS4 that doesn't seem to have 
> this problem

Could be the way font-smoothing for reverse text works on iPad screens and how 
text (characters) hook to the underlying pixel grid. It is almost certainly 
less visible at higher resolution (iPhone).
On my desktop mac (webkit and gecko browsers), the reverse text appears 
slightly 'fatter' than the black-on-white text. 

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@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] iPad font rendering in both orientations...

[tedd]

It turns out that my problem appears unrelated, however. If you can 
view this page on an iPad in landscape and portrait mode, you'll see 
the phenomenon:




The black-on-white text appears to preserve its thickness, while the 
white-on-black type appears "thicker" in landscape than portrait.


I assume this is some phenomenon of the way that the iPad display 
hardware works. Or it could be (LCD) displays in general, as I now 
realize that the iPhone simulator doesn't rotate the display, it 
rotates a frame around a simulated screen. Doh! ;-)


Odd also that I have a mockup on an iPhone 3G/iOS4 that doesn't seem 
to have this problem.


If anyone had further comments about this, I'd be most appreciative.

Best wishes,

Charles


Charles:

I have confirmed your observation -- the text does indeed becomes 
thicker. I suspect it is a problem with iPad and not something that 
can be corrected via css.


I have one suggestion, however, if you want iPad owners to review a 
page, how about giving us something easier to type? The url 
"vze26m98.net/css-discuss/test-ipad.html" is a lot to type.


I prefer having a shorter URL -- if you want to see the shortest URL 
possible for Mac's and iPads, contact me off list.


Cheers,

tedd

--
---
http://sperling.com/
__
css-discuss [cs...@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] iPad font rendering in both orientations...

[Philip Taylor (Webmaster, Ret'd)]

tedd wrote:


I have one suggestion, however, if you want iPad owners to review a
page, how about giving us something easier to type? The url
"vze26m98.net/css-discuss/test-ipad.html" is a lot to type.


Somewhat confused (not being an i- owner/user);
if you read your e-mail on an I-pad (as I know can
be done : I saw it done this weekend), can you not
then just "click" (or whatever the i-equivalent is :
"jab" ?) on an embedded URL in order to visit it ?

Philip Taylor
__
css-discuss [cs...@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] iPad font rendering in both orientations...

[Charles Turner]

On Aug 24, 2010, at 8:59 AM, Philip Taylor (Webmaster, Ret'd) wrote:

> Somewhat confused (not being an i- owner/user);
> if you read your e-mail on an I-pad (as I know can
> be done : I saw it done this weekend), can you not
> then just "click" (or whatever the i-equivalent is :
> "jab" ?) on an embedded URL in order to visit it ?

Hi tedd-

Yes, I'm confused as well: I can tap on the URL and it will take me to the page 
pointed to by the address.

What's up on your end that this isn't working?

Best, Charles


__
css-discuss [cs...@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/