Skip to content

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

@WebCoder49

Description

@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:

Example screenshot, where selected Devangari text causes a blue select highlight containing all the text while the bold highlighted text behind extends longer

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:browserA bug caused by one or more browser/web rendering engine implementations.area:coreA bug/feature for the core code-input.js/code-input.css filesbugSomething isn't workingpriority:medium

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions