1116751 - <strong> or <b> not working when parent styled with font-weight:(<=300) or font-weight:lighter in Firefox

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[Avijit Gupta]

Attachment: Screenshot of same webpage open in Chrome and Firefox side by side

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20141231124830

Steps to reproduce:

Open the following link with the Firefox Nightly/Developer Edition web browser:
http://avijitgupta.me/examples.html


Actual results:

Under the headings which say "HTML <b> tag examples" and "HTML <strong> tag examples", the text does not appear bold/emphasised even though it is clearly written inside <b> and <strong> HTML tags.


Expected results:

On opening the above link in Chrome, the text appear to be bold/emphasised as it should.

Comment 1

[Alice0775 White]

Pushlog:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=bdbef533364f&tochange=e250978a21be

Triggered by:
cf61d18f6210	L. David Baron — Make 'bolder' and 'lighter' values of 'font-weight' be computed in the style system, per recent edits to CSS 2.1. (Bug 93725) r=jdaggett a2.0=joedrew

Comment 2

[Alice0775 White]

IE11 seems to be same as Firefox's behavior on Windows7.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Avijit Gupta from comment #0)
> Open the following link with the Firefox Nightly/Developer Edition web
> browser:
> http://avijitgupta.me/examples.html

Since you specifically pointed to Nightly / Developer Edition -- are you saying that it doesn't happen for you in Firefox release?



Note that the behavior of 'bolder' and 'lighter' is defined in:
http://dev.w3.org/csswg/css2/fonts.html#font-boldness
http://dev.w3.org/csswg/css-fonts/#font-weight-prop

and https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 defines b as using 'font-weight: bolder', so I believe our behavior does match current specs (which might not be true of all browsers).  There may also be differences between browsers in font availability and selection because they use different font APIs.

Comment 4

[Avijit Gupta]

(In reply to David Baron [:dbaron] (UTC-5) (needinfo? for questions) from comment #3)
> (In reply to Avijit Gupta from comment #0)
> > Open the following link with the Firefox Nightly/Developer Edition web
> > browser:
> > http://avijitgupta.me/examples.html
> 
> Since you specifically pointed to Nightly / Developer Edition -- are you
> saying that it doesn't happen for you in Firefox release?
> 
> 
> 
> Note that the behavior of 'bolder' and 'lighter' is defined in:
> http://dev.w3.org/csswg/css2/fonts.html#font-boldness
> http://dev.w3.org/csswg/css-fonts/#font-weight-prop
> 
> and https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3
> defines b as using 'font-weight: bolder', so I believe our behavior does
> match current specs (which might not be true of all browsers).  There may
> also be differences between browsers in font availability and selection
> because they use different font APIs.

My initial reason for pointing specifically to Nightly / Developer Edition was because i had found this behavior to be true in these 2 versions.

But now i have tested it for Firefox release(latest) as well on both platforms(Windows and Linux).
And the results are the same as for Nightly / Developer Edition browsers.

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Our behavior matches the relevant specs here, though isn't ideal.

(Should we switch b and strong to be 'bold' instead of 'bolder'?  It has advantages and disadvantages; I believe some other engines do it that way, or at least did.)

Curious if jdaggett has thoughts.

Comment 6

[John Daggett (:jtd)]

Right, there's nothing "buggy" about the testcase here. In this particular case it's not ideal but in the case of a font family with actual weights lighter than normal you would correctly see a distinction. That's why the HTML standard suggests the use of 'bolder' rather than 'bold'.  Chrome/Webkit have used 'bold' for both b and strong so they suffer from a similar problem when using heavier weights. For example, you'll see no difference within a heading that includes a strong or b tag.

Comment 7

[John Daggett (:jtd)]

Attachment: screenshot, b/strong tags with families containing light/heavy weights

Firefox on the left, Chrome on the right under OSX 10.8.

Comment 8

[John Daggett (:jtd)]

In general, when using lighter weights it's important to be aware that there may not actually be weights lighter than normal or heavier than bold. Additionally, for some font families, the next bolder step up may not result in enough contrast, in which case it would be better to explicitly set b/strong to a specific weight.

Comment 9

[Firefox Bug Husbandry Bot]

Moving from Core::Untriaged to Core::General https://bugzilla.mozilla.org/show_bug.cgi?id=1407598