xtermjs/xterm.js

[WebGL and Canvas Rendering] Font does not scale correctly with DPR higher than 1

Open

#4.728 geöffnet am 25. Aug. 2023

Auf GitHub ansehen
 (13 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (1.574 Forks)batch import
area/addon/webglarea/mobilehelp wantedtype/bug

Repository-Metriken

Stars
 (16.196 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 4T 3h) (81 gemergte PRs in 30 T)

Beschreibung

When using WebGL or Canvas addons and displaying on a device with a DPR higher than 1 the text inside the container becomes larger than it should be.

DPR 4 image

DPR 1 image

When using WebGL I also get this error in Firefox when I set the DPR higher than 1.

WebGL warning: drawElementsInstanced: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once)

Details

  • Firefox and Brave Desktop with Responsive Design Mode enabled both exhibit this
  • OS version: Fedora 38
  • xterm.js version: 5.2.1
  • Canvas addon version: 0.4.0
  • WebGL addon version: 0.15.0
  • I'm using VueJS 3 to build my SPA

Steps to reproduce

  1. Create a site that uses xtermjs with either canvas or webgl
  2. Test the site with Responsive Design Mode

Contributor Guide

Research-Richtung
Untersuche die Schriftdarstellung in den Canvas und WebGL Addons, mit Fokus auf die Behandlung von devicePixelRatio. Das Problem deutet darauf hin, dass die Schriftgröße beim Zeichnen nicht mit dem Kehrwert des DPR multipliziert wird. Überprüfe die Methoden 'drawText' oder 'renderGlyph' in den jeweiligen Renderern. Suche nach Skalierungsfaktoren, die vor dem Zeichnen auf den Kontext angewendet werden. Stelle sicher, dass die Schriftgröße entsprechend dem Backing Store Verhältnis der Canvas angepasst wird.
Tech Stack
typescript
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-2 Tage
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
TypeScriptCanvas renderingWebGL basicsHigh DPI awareness
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
65