SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Safari font issue :S

    Hi, everyone, I haven't been to this forum for a little while now.

    Just encountered another problem which I need help on. I realized that Safari does not render font widths the same as PC browsers. The font that I used is Times New Roman, and it must remain as it is. As the font width rendering differs, some pixel perfect portions of the site will not display properly...Anyone have any idea on how to play around with the Safari font widths problem? Sorry I cannot provide further detail than this. If this is insufficient information. Then thanks anyways.
    In search of the clouds...and maybe some work

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally don't use pixels for font-sizing. I tend to go with EM instead, including using it for my layouts. What I'll do is set the font size to be 100% of whatever the visitor's default is, then lay out my sites and font-sizes using EM. I also use Lucida Console for my default font, since that's the largest font I'm aware of (I use LC only for development and testing purposes, of course).

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh haha, sorry if I wasn't being clear on that. I did not say that I used pixel for font size. I do use em. However, what I am talking about here, is that Safari gives the font that extra pixel when rendering than FireFox, IE etc. Which is really troubling.
    In search of the clouds...and maybe some work

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kefeso View Post
    As the font width rendering differs, some pixel perfect portions of the site will not display properly...
    And therin lies your problem... if your design is tied to a fixed width, you should be using a fixed font (lucida console, fixedsys, fixed), not a variable one... and make sure the width of your container (which I'm assuming is the problem) is in the same metric as the fonts - on top of which minimum make sure you have 10-20% overpadding so the width change is compensated for in your layout.

    Sounds to me like a bad layout, or at least a bad implementation of the layout... I'd throw it out and start over - though I'd have to see it to be sure.

    In general, assuming ANY font is going to render the same between any two computers, much less that ANY font is going to be available on all machines (even the ones people claim are) is a BAD idea... Hell, you ever seen how badly freetype mangles Times New Roman (assuming it's even available)? Your page would have problems on Linux too.

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kefeso View Post
    Oh haha, sorry if I wasn't being clear on that. I did not say that I used pixel for font size. I do use em. However, what I am talking about here, is that Safari gives the font that extra pixel when rendering than FireFox, IE etc. Which is really troubling.
    Are you declaring the width of it's container in EM, or pixels? That alone could be your problem.

    If you use one metric, you need to stick with it, not mix and match IF you care about a fixed width without word-wraps OR a fixed height.

  6. #6
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow View Post
    Sounds to me like a bad layout, or at least a bad implementation of the layout... I'd throw it out and start over - though I'd have to see it to be sure.
    Yea...I agree with that. It's not exactly a brilliant layout. I should have not automatically assumed that the font widths rendering with the variable font would be the same across operating systems. I guess I just somewhat fixed it, or call it compromising. When the font-size is set to 0.7em instead of 0.8em, Safari rendered it in almost the same width as Windows did, thankfully but interestingly. Next time I should go for a mono width font. Thanks.
    In search of the clouds...and maybe some work

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kefeso View Post
    When the font-size is set to 0.7em instead of 0.8em, Safari rendered it in almost the same width as Windows did, thankfully but interestingly. Next time I should go for a mono width font. Thanks.
    Have you tested the effect of 'large font/120dpi' on that EM yet (specifically Opera and IE)? That probably breaks your layout too.

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Los Angeles CA
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What Windows browsers are you comparing Safari to?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •