Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Android diff viewer draws word-diff highlights at the wrong position when "monospace" resolves to a proportional font

Abierto Apto para principiantes
  • ¿Algo no está bien?
#27,146 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
android, typescript
Área
frontend, mobile

Línea de trabajo

Lee ReviewDiffCanvasDrawing.kt, especialmente drawWordDiffRanges, y compara las posiciones de los resaltados con los avances medidos que usa drawCode. El informe identifica asciiFixedPitch como una señal existente para los tipos de letra monoespaciados proporcionales de reserva. Reproduce el problema con un diff de Android usando un tipo de letra monoespaciado proporcional de reserva; se considera terminado cuando los resaltados de las palabras modificadas se alinean con los caracteres modificados sin cubrir el texto adyacente.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

What happened

In the Android app's diff viewer (the Changes screen for a PR/turn), the red/green word-level highlights on changed lines are drawn in the wrong place. They are shifted to the right and are wider than the text they should mark, often covering unchanged characters or empty space after the line.

Example from the screenshot (to be attached below):

  • go.mod: go 1.25 → go 1.27.3. On the deleted line the red highlight is an empty box after the end of go 1.25, not over the 5.
  • runbook.md: - `go ≥ 1.25` (builds `factory/cmd/role-assigner` … → - `go ≥ 1.27.3` …. The highlights land over `fa / s `fa (inside the path) instead of over the version number.

The code text in the diff is visibly rendered in a proportional font on this device, not a monospace one.

Diagnosis

ReviewDiffCanvasDrawing.drawWordDiffRanges positions every highlight by character index times the width of "M":

https://github.com/pingdotgg/t3code/blob/dd148481531a0a090780a2ade20588566db099a2/apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/ReviewDiffCanvasDrawing.kt#L368-L400

val characterWidth = textPaint.measureText("M")
...
val left = codeX + (start - lineStart) * characterWidth
val right = max(left + 2f * density, left + (end - start) * characterWidth)

This assumes the code typeface is fixed-pitch. The typeface is Typeface.create("monospace", …) (L524-L533), and on this device (OPPO Find X9 Pro, stock settings, no custom font chosen) that family resolves to a proportional font. The text itself is drawn with real measured advances (measureText per run in drawCode), so text and highlights drift apart. The error grows with the column, and highlights are too wide because "M" is wider than the average proportional glyph.

The same class already detects this case. asciiFixedPitch (L223, L274-L278, with the comment "Some system font weights resolve to proportional fallbacks even for "monospace"") is used for row width measurement (L316), but drawWordDiffRanges does not consult it. Measuring the prefix and range with textPaint.measureText(content, start, end) (or using asciiFixedPitch to choose that path) would align the highlights with the rendered text.

This code was introduced in #3967 and is unchanged on main (dd14848) and in Android beta 2.2.0 (735).

Steps to reproduce
  1. Use an Android device where the system monospace family is not fixed-pitch (seen on an OPPO Find X9 Pro with default settings).
  2. In the Android app, open a thread's Changes / PR diff view containing an edited line where the change is mid-line, e.g. go 1.25 → go 1.27.3 in a go.mod.
  3. Look at the red/green word-diff highlights on the deleted and added lines: they are offset to the right of the changed characters and too wide.

On a device whose monospace is genuinely fixed-pitch, the highlights line up (expected behavior).

Version

Android app 2.0.0 (code path unchanged through 2.2.0 beta and current main)

Environment

OPPO Find X9 Pro, Android (ColorOS, stock fonts), T3 Code Android app 2.0.0, connected to a T3 Code server on Linux

Evidence
# Screenshot attached separately: go.mod and runbook.md hunks in the Android Changes view
# showing word-diff boxes offset from the changed characters.
Related issues

#4582: monospace fell back to a proportional font on Android, but for React Native font-mono text surfaces (Uniwind font-family list). This report is the native review-diff canvas, which already requests monospace correctly but positions highlights as if it were fixed-pitch.

Fix applied or workaround

None. Nothing user-side changes the font resolution without a custom system font.

Filed by

Claude Code (Claude Opus 5.5, claude-opus-5-5) via t3 triage

Lenguaje dominante
TypeScript
Estrellas
24.8k
Forks
6.4k
Merge medio
3 h 20 min
PR fusionados (30 d)
208

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de pingdotgg/t3code

Todos los issues de pingdotgg/t3code

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.