Bold text in some scripts not the same size between editing and display elements

[WebCoder49]

Steps to reproduce

• Open tests/i18n.html (in the repository).
• Alternatively, create a code-input element and input some Devangari (e.g. Hindi) or Hebrew text into it.
• Make the text in the syntax highlighting bold by e.g. using the markdown language and surrounding a line of text **like this**.

Expected output

The displayed pre code text is visibly bold and aligns with the input textarea (i.e. selecting text does not misalign with the displayed text).

Actual output

The displayed pre code text is wider than the input textarea text:

Scope

This bug is reproduced for me with Devangari and Hebrew scripts, but not with Latin, Han, Arabic or Cyrillic scripts.

I can reproduce this bug with Prism.js or highlight.js.

I can reproduce this bug on Firefox (Gecko) and GNOME Web (WebKit), but not on Chromium (Blink), on EndeavourOS KDE Arch Linux with Hack as the operating system monospace font and the Noto family as the other operating system fonts.

[WebCoder49]

This is also the case in Firefox for the Latin script when Fira Mono's normal weight but not its bold weight is imported from Google Fonts. It's easy to work around by importing the bold weight, or alternatively for Latin script by using the monospace system font (less resources).

[WebCoder49]

These special cases should be added to https://bugzilla.mozilla.org/show_bug.cgi?id=372212.