Paste handler classifies font-weight 500 as bold, though it should be normal

[Discordius]

Do you want to request a feature or report a bug?

I want to report a bug

What is the current behavior?

When you copy text with font-weight: 500, the draftJS paste handler applies a bold tag to the pasted text.

This is the result of the following lines in this file:

// https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
const boldValues = ['bold', 'bolder', '500', '600', '700', '800', '900'];
const notBoldValues = ['light', 'lighter', '100', '200', '300', '400'];

What is the expected behavior?

But the mozilla documentation says the following:

This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Which puts font-weight 500 in the normal category, not the bold category.

[thibaudcolas]

According to those mozilla docs, what you're quoting is just the fallback behavior for fonts that do not support more than "normal" and "bold" (and from what I understand this is specific to Firefox).

Other browsers / fonts that support more weights correctly render 500 as something heavier/thicker than normal text ("medium"), so it seems sensible to put it in the bold category. It would be strange to treat 500 values as not-bold just because some browsers/fonts do not support that granularity.

[Discordius]

Hmm, there are definitely quite a few sites (including the one I run) that use 500 as their normal body font, and additionally have a bold tag that uses 700 or higher. Copying from these sites results in everything being bolded.

I don't know of any sites that use 500 as their bold font-weight, which would strike me as a pretty weird decision. And given the fallback behavior, it seems that firefox also thinks that if you try to translate a font with font-weight 500 to something that doesn't have that level of granularity, which is the problem we are facing here, then 500 should be interpreted as normal font-weight, not bold.

[Discordius]

Another datapoint might be that Firefox uses font-weight 500 as a fallback for normal text, if the font doesn't have a font-weight of 400. This also suggests that font-weight 500 is more naturally interpreted as normal text.

[colinjeanne]

For another data point, in our fork we made this change because we found 500 to be common and the transition to bold on paste pretty jarring.

[mitermayer]

Hi @Discordius, thanks for raising this issue. It sounds reasonable what are your thoughts @flarnie ?

[nadavl]

Same as in our app as well - I need to handle this using handlePastedText and actually replace 500 with 400 to avoid having it bold.

[j4hr3n]

I put up a PR with this change:

#3068