search

Princeton-CDH / geniza

version 4.x of the Princeton Geniza Project
https://geniza.princeton.edu
Apache License 2.0
11 stars 2 forks source link

Alignment issues with translations in editor display when zooming in and out #1501

Open kseniaryzhova opened 11 months ago

kseniaryzhova commented 11 months ago

Describe the bug Misalignment of the English translation when side-by-side with the transcription. It appears as though the lines are doubled up, so the text from the line below is just superimposed over the first line, making it illegible.

To reproduce Steps to reproduce the behavior:

  1. Go to public search.
  2. Search for documents with a digital transcription and a digital translation.
  3. In the module, open up the transcription and translation side by side.
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots

image (7)

Device information

blms commented 8 months ago

Turns out this is related to zooming in and out with the browser. The line heights are hard coded to a number of pixels, so the alignment fails when the pixel numbers are changed by zoom.

Workaround until fix is to zoom back to normal zoom (Cmd 0 on Mac or Ctrl 0 on windows).

blms commented 8 months ago

It's surprisingly difficult to get an accurate height for an element when the browser has been zoomed in.

This might help, but it's not yet supported in Safari: https://web.dev/articles/device-pixel-content-box https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize

We'll stick with the workaround for now, until/unless this becomes higher priority.