Bug 14921 – Normal (non-bold) text in Safari on Windows looks bolder than the same text in Firefox or IE

• Component: Text
• Status: RESOLVED WONTFIX

[John A. Bilicki III]

There is no value of normal or under 500 that can be applied to the font-weight property.

Setting

[John A. Bilicki III]

Attempting to "recomment" this bug as I decided to post it with Safari. Unable to copy the text, CRITICAL BUG (see bug 14922).

Webkit does not correctly render normal text font-weight. Bug 14196 is an example of unwillingness to conform to standards. I am unable to set the font-weight to anything less then 500 or to normal. You folks are welcomed to set different default CSS styling to websites in Safari, but you are most unwelcome to not allow normal behavior. The text is bold and there is no way around that reality or argument. The font-smoothing user-only-option does not fix this nor is there any method to manipulate this through CSS.

These property/value combos need to be fixed!
font-weight: normal;
font-weight: 400;
font-weight: 300;
font-weight: 200;
font-weight: 100;

This issue directly effects sites such as mine that take aggressive advantage of CSS 2. The word Philosophy in one of the main menus has an added three pixels of width. If I were to add additional menus (while still maintaining an 800x600 minimal support policy) Safari would render the text (by default) outside of the parent block-level element while other browsers would still correctly render the text. Making the text smaller with a secondary stylesheet does not count as standards compliant/cross-browser compatible.

Hopefully this post WILL actually be posted this time.

[Mark Rowe (bdash)]

Created attachment 15918 [details]
Test case for font-weight

[Mark Rowe (bdash)]

Tested in Safari 3.0.3 beta on Windows XP.  font-weight behaves as expected with the attached test case.  Font weights 100 through 500 appear identical to "normal", while 600 through 900 are rendered as bold.

Closing as WORKSFORME because everything is working as expected as far as I can see.

[John A. Bilicki III]

Created attachment 15919 [details]
Gecko's rendering width at 610px of the initial attachment.

Gecko's correct rendering attachment (16 color GIF).

[John A. Bilicki III]

Created attachment 15920 [details]
Webkit's rendering width at 610px of the initial attachment.

This is Webkit's version of rendering text. Notice compared to my Gecko image of your attachment that Webkit adds width in addition to making the text bold. The text is cropped in this image. The same thing will/does happen in similar situations with text and parent elements depending on word-wrap.

This is a valid bug. Not only is the text bold but Webkit also adds width to the text. It is not possible to adjust the text by using a single CSS method that Webkit would adhere to. It is obvious that people are having difficulty understanding the difference between bold and normal text. Let me repeat myself: having this by default is acceptable; not making normal text weight available is not. Keep your personal feelings out of bug reports, designers have to answer to people who are asking us, "why is my text bold in Safari?" without us being able to remedy the issue correctly.

[John A. Bilicki III]

Reopening bug.

[Mark Rowe (bdash)]

The first five lines in the WebKit case are  *not* bold like you claim, as can be observed simply by opening the test case.  As my test case clearly demonstrates, font-weight works as expected.  Using font-weight values of 600 through 900 results in the text being rendered as bold.  100 through 500 (and normal) result in non-bold text being rendered.  As such, I cannot reproduce the bug as reported ("No normal value for font-weight available in CSS").

As for the text getting wider when it becomes bold (weights 600 through 900), your screenshot shows that this also occurs in Firefox.  In my testing Internet Explorer 6 does something a little odd in terms of width with the test case.

It's unclear why you've said "Keep your personal feelings out of bug reports" as my previous comment was simply a statement of observations, with nothing the least bit related to my feelings.

[Mark Rowe (bdash)]

Created attachment 15921 [details]
Internet Explorer 6's rendering

IE 6 appears to make the paragraph with font weight 600 both longer and bolder than those with weight of 700 through 900.  I'm not sure what to make of that.

[John A. Bilicki III]

Then please clarify the rendering difference between Gecko and Webkit?

If you can not agree that the text is bold please answer if you think the text looks exactly the same or not between the two browsers. If the text does not look the same then please explain how the text is being rendered differently since you insist it is not an issue of font-weight.

Secondly how would you through CSS make the rendering of the text between Gecko and Webkit consistent? It needs to look exactly the same using the same CSS across browsers.

I'm going by Gecko's rendering as it much more standard compliant then Internet Explorer though (after resizing IE and moving it so the text is as closely positioned as possible) it renders the text the same width and weight. Opera also renders the text the same way.

[John A. Bilicki III]

Created attachment 15922 [details]
IE's rendering of original attachment.

Mark, your attachment of IE looks like it's rendering the text differently from mine.

[Mark Rowe (bdash)]

John, in your attachment IE also appears to have rendered the first bold line as substantially wider than the following lines.  Due to your cropping it is hard to see.  Is that the case?

[Adam Roben (:aroben)]

Hi John,

(In reply to comment #9)
> Then please clarify the rendering difference between Gecko and Webkit?
>
> If you can not agree that the text is bold please answer if you think the text
> looks exactly the same or not between the two browsers. If the text does not
> look the same then please explain how the text is being rendered differently
> since you insist it is not an issue of font-weight. 

As you can see in the comments in bug 14196 (which you already mentioned), WebKit on both Mac OS X and Windows uses the CoreGraphics library to draw the text in web pages. Firefox and Internet Explorer on Windows use the Windows GDI library to draw their text. These two libraries have different font smoothing/kerning and glyph shaping algorithms, so the differences you're seeing between Safari's text and Firefox's on Windows are expected. In fact, if you open your test case in Firefox on OS X, you'll find that the text looks pretty much identical to Safari's on both Mac OS X and Windows, since Firefox on OS X uses CoreGraphics as well.

Mark was pointing out that text with font-weight:bold does indeed appear bolder in Safari than text with font-weight:normal.

> Secondly how would you through CSS make the rendering of the text between Gecko
> and Webkit consistent? It needs to look exactly the same using the same CSS
> across browsers.

There is no CSS standard I know of that mandates that text look identical in all browsers. All the CSS 2.1 spec says is "The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor," and Safari is meeting this specification. So to answer your question, we don't provide a way through CSS (or through any other method) to make text in WebKit look identical to text in Gecko.

By the way, thanks for filing this bug even though you hit bug 14922 in the middle of writing it up -- that looks like a nasty problem.