Mac CSS Text Bigger

January 15, 2009

Hi, i ve used CSS to style the following elements in the page,

the first image is the page as rendered in Firefox, IE/win

the second image is the same page in Firefox, Safari/Mac

Firefox, IE Windows

Safari, Firefox Mac

i ve used following code to style them:

.twoCr #sidebar12 h2 {
font-family: Helvetica, Arial, Sans-Serif;
font-size: 10pt;
color: #094b77;
text-decoration:none;
}

The problem is that the fonts are rendered bigger/ differently on Mac browsers

which i want to avoid.

Is there any way to use Mac specific stylesheet without scripts

Or is there a better fix?

Some CSS hack perhaps?

5,278 · January 15, 2009

You're going to get different versions of text on different operating system due to variations in the way Mac OS X, Windows, and Linux handle anti-aliasing.

Windows tests to handle text attempting to put things on the pixel grid to look sharper at the expense of making the fonts less-accurate. Mac OS X tends to preserve the basic shape of text.

There are arguments for both in terms of "what is right" and no clear "fix" for you.

The situation gets worse because you have no way of knowing exactly which format of anti-aliasing (if any) the user has enabled. Windows, Mac OS X, and Linux all provide at least 2 different modes.

One trick you can do to make rendered text appear slightly lighter in safari is to use the text-shadow CSS property to set a light shadow behind your copy.

for example:

h1 {
  font: normal 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 0 1px rgba(255,255,255,0.8);
  color:#999;
  background:#FFF;
}

January 15, 2009

@evn, you're really showing off the reasoning behind your mvc badge this week sir.

January 16, 2009

rson451 said:
@evn, you're really showing off the reasoning behind your mvc badge this week sir.

I agree!, thanks for your reply

Is there any way we can have mac specific stylesheets without scripting?

5,278 · January 16, 2009

Sujies said:
Is there any way we can have mac specific stylesheets without scripting?

The way I'd go about it if I had to was to use CSS3 media extension queries and the webkit vendor-prefixed selectors. Wsing vendor-prefixs for CSS rules is the W3C recommended

way of adding to CSS without breaking the standard implimentation. It's intended for testing/development purposes

so that browser makers can test new rules (either soon-to-be standardized ones, or just rules that have been added

to a standard but the implementation isn't stable yet).

It's definetly stepping on the grounds of exploitive but it should be a lot more dependable that things like the IE6 "_rule"

or "* html" hacks that were later broken in IE7.

That's a lot of talking and not much code, so here's an example:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">;html&gt;
  &lt;head&gt;
	&lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
	&lt;title&gt;testing&lt;/title&gt;
	&lt;style type="text/css" media="screen"&gt;
	  body {
		font:normal 72px/30px HelveticaNeue-UltraLight, "Helvetica Neue UltraLight", "Helvetica Neue", "Times New Roman", sans-serif;
		font-weight:200;
		letter-spacing:-20px;
		color:#333;
		text-align:justify;
		background:#EEE;
	  }
	  p {
		width:320px;
		margin:100px auto;
		border:100px solid #DDD;
		padding:20px 40px 17px 20px;
		background:#FFF;
	  }
	  /* These rules will only be parsed by Safari because the "-webkit-" rules
		 are only parsed by Webkit based browsers like Safari. You could also
		 toss the rules into their own CSS file (just body{} and {p}, not the
		 @media container) then call that file with a standard link:
		 &lt;link rel="stylesheet" href="safari.css" media="screen and (-webkit-min-device-ratio:0)"&gt;

	 */
	  @media screen and (-webkit-min-device-pixel-ratio:0) {
		body {
		  background:#111;
		}
		p {
		  border-color:#222;
		  background:#000;
		  color:#666;
		  text-shadow:0 0 1px #000;
		}
	  }
	&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
	&lt;p&gt;Lorem ipsum dolor sit amet, consecte tur adipi sicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exe rcita tion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volu ptate velit esse cillum do lore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aniddi&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;

The final rendered result is shown in the screenshot. Browsers that aren't based on webkit will look more like the

firefox example.

Note: the typeface is extra dark because Firefox is actually loading "Helvetica Neue Light" rather than

the ultralight variant?it's retarded that way?the part you should be paying attention to is the different

colors for Safari as specified in the @media section.

EDIT: a screenshot attached.

20,536 · January 17, 2009

evn. said:
...
Note: the typeface is extra dark because Firefox is actually loading "Helvetica Neue Light" rather than

the ultralight variant?it's retarded that way?the part you should be paying attention to is the different

colors for Safari as specified in the @media section.

...

That's actually an OS X bug, it assigns Ultra Light and Light to the same weight. WebKit's working since they accept Postscript names for font families, which is wrong.

Also, the text-shadow "hack" is probably going to make the text harder to read in FX3.1, since it doesn't change the anti-aliasing like WebKit does. There's a nicer method but nobody supports it.

5,278 · January 17, 2009

I find firefox doesnt look much lighter with the text shadow most times.

If it ends up being a concern he can always toss that rule in @media block for safari.

Edit: the css3 font smoothing rules don't help much here because the issue lies further up the font rasterization chain. Even with aliasing off operating systems still render text differently, the effect is just less pronounced. Also, not-aliased text almost always looks terrible.

One more solution is to use sIFR. You gain consistent rendering where flash and javascript are available but those come with their own concerns too.

You are right about the Mac OS X deal about font weights though: I should heap scorn more carefully.

Edited January 17, 2009 by evn.

20,536 · January 17, 2009

Yeah, but one benefit of having no AA is that it'll cause OS X and Linux to start rendering on the pixel grid like Windows does, looks like crap but at least it's kinda consistent.

And this could change yet again in the future, the new font rendering API in Windows 7 (DirectWrite) supports sub-pixel positioning of text (like OS X and Linux), so instead of taking up one row of pixels, an i might take up 2. And it just has better anti-aliasing than the current GDI renderer (it only does X direction AA when ClearType is enabled, DirectWrite can do X and Y direction, the corners of characters won't look so aliased now)

Off topic a bit, but man this system sucks, I thought my mac was old. This one pre-dates my mac, is running 10.4.10 and only has Firefox 2.0.0.7 (which sucks compared to 3.0 or 3.1/3.2)

Edit: about font-smooth, for some reason I keep forgetting it's just a toggle basically, I keep thinking it'd let you chose between no AA, greyscale and sub-pixel.

January 17, 2009

Hi, thanks for your replies!

How do you target Firefox on Mac using the above CSS 3 method?

20,536 · January 18, 2009

You can't.

The only way to can make for sure that text is rendered pixel perfect between OS's is to not use text and use an image instead, which is a terrible thing to do.

5,278 · January 18, 2009

^ sad but true.

You can go crazy with CSS hacks and what not but you're Going to significantly increase your workoad and you still won't have things identical in every case.

There's a phrase my friends and I use to explain why everything in las vegas Is over priced or super campy: "**** you: it's vegas!"

The web is a lot like vegas: flashy lights, dozens of goons you'd rather not meet, and the promise of sex around every corner.

Whenever I find myself wondering why I can't do something or why I have to do things to make others happy I remember the reason: "**** you it's vegas!"

Some things just are the way they are and the you'll have way more fun once you accept that perfection isn't required to have a good time.

Sign In

Mac CSS Text Bigger

Question

Sujies

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

the evn show

Link to comment

Share on other sites

rson451

Link to comment

Share on other sites

Sujies

Link to comment

Share on other sites

the evn show

Link to comment

Share on other sites

The_Decryptor Veteran

Link to comment

Share on other sites

the evn show

Link to comment

Share on other sites

The_Decryptor Veteran

Link to comment

Share on other sites

Sujies

Link to comment

Share on other sites

The_Decryptor Veteran

Link to comment

Share on other sites

the evn show

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker