Re: [css-d] Text Kerning and Other Oddities on MAC but not Windows
Safari on a Windows system. (Vista XP) However, when the same pages are viewed on a Mac (FF Safari) the alignments are off, there seems to be additional kerning on the text, etc. In short, it's a mess. Everything is fully updated. I don't see the issue on FF 3.5 Mac, but I do see it in Safari. I wonder if Safari is invoking some kind of advanced font-rendering support because of esoteric CSS items in the stylesheet. For example: font-size-adjust:0.49; Or maybe it has something to do with the very small letter spacing: letter-spacing: 0.01em; Another thing to check would be whether the same fonts are being used on the PC and the Mac. font-family:Geneva, Arial, Helvetica, sans-serif; Good luck. -Paul Burney __ 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/
[css-d] Text Kerning and Other Oddities on MAC but not Windows
Hello all, I've mostly been silently following the list here and the advice given has helped me in a few instances. So, thanks! What I've run into has completely stumped me and I'm hoping someone here may have seen the problem before or knows a quick workaround/fix. The site I've been working on (at link below) works as expected on FF, IE, and Safari on a Windows system. (Vista XP) However, when the same pages are viewed on a Mac (FF Safari) the alignments are off, there seems to be additional kerning on the text, etc. In short, it's a mess. Everything is fully updated. Trying everything from using absolute positioning of my DIVs to specifying every relevant component for my CSS classes I am unable to track this down. Using Firebug everything seems to check out which just adds to the frustration. Validating the HTML and CSS checks out as well. Has anyone else encountered this or could offer some advice? I'm really at a loss here. simple page that exhibits problem (clipping at bottom, images are not where they are supposed to be, etc.) http://um3d.dc.umich.edu/Temp/newsite/services/visualization/viz_intro_process.html The projects section has other offset and alignment issues...again, fine on Windows but not on Mac. CSS (but it's a bit messy from my haste) http://um3d.dc.umich.edu/Temp/newsite/shared/styles/main.css Thanks Eric __ 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] Text Kerning and Other Oddities on MAC but not Windows
2009/12/9 Maslowski, Eric emasl...@umich.edu:
Hello all,
I've mostly been silently following the list here and the advice given has
helped me in a few instances. So, thanks! What I've run into has completely
stumped me and I'm hoping someone here may have seen the problem before or
knows a quick workaround/fix. The site I've been working on (at link below)
works as expected on FF, IE, and Safari on a Windows system. (Vista XP)
However, when the same pages are viewed on a Mac (FF Safari) the
alignments are off, there seems to be additional kerning on the text, etc. In
short, it's a mess. Everything is fully updated.
Trying everything from using absolute positioning of my DIVs to specifying
every relevant component for my CSS classes I am unable to track this down.
Using Firebug everything seems to check out which just adds to the
frustration. Validating the HTML and CSS checks out as well. Has anyone else
encountered this or could offer some advice? I'm really at a loss here.
simple page that exhibits problem (clipping at bottom, images are not where
they are supposed to be, etc.)
http://um3d.dc.umich.edu/Temp/newsite/services/visualization/viz_intro_process.html
The projects section has other offset and alignment issues...again, fine on
Windows but not on Mac.
CSS (but it's a bit messy from my haste)
http://um3d.dc.umich.edu/Temp/newsite/shared/styles/main.css
Thanks
Eric
.tab_content_bg {
...
height:460px;
...
overflow:hidden;
...
}
This cannot work with text. You cannot control the text settings of
the user, you don't know how tall the container has to be. It's a
framed-sort of design you have here.
Ingo
__
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] Text Kerning and Other Oddities on MAC but not Windows
Maslowski, Eric wrote:
The site
I've been working on (at link below) works as expected on FF, IE, and
Safari on a Windows system. (Vista XP) However, when the same pages
are viewed on a Mac (FF Safari) the alignments are off, there
seems to be additional kerning on the text, etc. In short, it's a
mess. Everything is fully updated.
I have no idea of the alignment problems, and I don't have a working Mac to
test with, but the kerning problem might be cause by advanced typography
features in Firefox (and Safari?). I have found various descriptions of
those features, including
http://opentype.info/blog/2008/06/14/kerning-and-opentype-features-in-firefox-3/
which is appetizing but not very rich in hard facts - but its bloggish part
contains a link to page
https://developer.mozilla.org/en/CSS/text-rendering
which contains interesting information, including a live example of a way to
affect ligature formation with a simple (browser-specific) CSS property,
text-rendering (which follows the tradition of obscure naming in CSS...).
So I'd suggest the following quick test: add
* { text-rendering: optimizeSpeed; }
into your style sheet and see whether it turns off kerning.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
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/
