Not enough spacing between words

[zfletch]

There seems to be an issue with word spacing for some users where words run together or overlap. @vgorman1 gave an example: this tree looks like the screenshot below on her version of Chrome.

I'm having trouble replicating the issue on my machine. If I had to guess, I would say that Chrome on Windows changed some behavior related to <svg>s and it is causing problems for Dagre-d3's layout engine.

[balmas]

ugh. I can try to reproduce in windows. will report back.

[zfletch]

Thanks! I will also have access to a lower resolution monitor and Windows machine next week. I hope there is an easy fix because this issue could cause problems for a majority (or at least a plurality) of users.

[zfletch]

I was able to replicate this (I think) on Windows 7 and Chrome 87.0.4280. When the browser is zoomed in or zoomed out, the spacing between the words is not correct. This does not occur with Chrome on macOS. The good news is that this shouldn't be a widespread issue. The bad news is that I don't think there's an easy fix.

---

Zoomed in:

Zoomed out:

[balmas]

does it happen with the new react tree viewer too?

[vgorman1]

I do not know what that is? Vanessa B. Gorman Professor of Ancient History Department of History 619 Oldfather Hall University of Nebraska-Lincoln Lincoln, NE 68588-0327 https://vgorman1.github.io/ From: Bridget Almas <notifications@github.com> Sent: Monday, November 30, 2020 9:41 AM To: alpheios-project/arethusa <arethusa@noreply.github.com> Cc: Vanessa Gorman <vgorman1@unl.edu>; Mention <mention@noreply.github.com> Subject: Re: [alpheios-project/arethusa] Not enough spacing between words (#826) does it happen with the new react tree viewer too? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_alpheios-2Dproject_arethusa_issues_826-23issuecomment-2D735864289&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=pXolTOGr6cqSEu3v94jUIRko6bv_LShRrosOFdtmV1s&s=z6DzBKe6Th-UTXOz-2UC7rM5tdHqfxkh3pA5XNhao6Y&e=>, or unsubscribe<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ACPTZUQRCGRNONFD3HRA5C3SSO4J5ANCNFSM4UBMPEOQ&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=pXolTOGr6cqSEu3v94jUIRko6bv_LShRrosOFdtmV1s&s=-5oygyK8_0p7k3bhoyYYR3q_UFnBpwHaXoKqtso1yIM&e=>.

[balmas]

It's the new version of the viewer that @zfletch is working on for the treebank publication template. I think he should be able to confirm whether or not it does. If so, it wouldn't really help with the problem while editing, but it might help us narrow down further the cause or a solution.

[zfletch]

It looks like the same thing does happen with the React Treebank viewer.

There might be multiple issues here and I may not have been able to replicate the original one. @vgorman1 said that this behavior occurs on all zoom levels, even when zoomed less than 100%.

[balmas]

I can reproduce it in Arethusa with Vanessa's tree in Chrome 87 on Windows 10. It does appear to have been introduced in either Chrome 86 or 87 because I could not in Chrome 85.

@zfletch do you already have that tree loaded in the treebank template somewhere that I could test quickly?

[zfletch]

I've added the tree to the Treebank React GitHub pages site: https://perseids-tools.github.io/treebank-react/.

Does the issue happen even when not zoomed in? It's strange that it would happen to both you and Vanessa but not on my machine.

[balmas]

It seems only to happen if the page loads while in Zoom. If I set the zoom to 100% and reload, the problem goes away. In both the react viewer and arethusa. There are a few other people reporting bugs in Chrome 87 with SVG:

https://bugs.chromium.org/p/chromium/issues/detail?id=1153605
https://bugs.chromium.org/p/chromium/issues/detail?id=1153600

Perhaps we should report it?

[balmas]

for @vgorman1 , it would be good to know if you see the same thing. I.e reset the zoom level on the page in your browse to 100%, reload the page, and see if the display problem is fixed (even when zooming again)

[vgorman1]

Still there, no matter resetting zoom, reloading, clearing browser history, etc. Vanessa B. Gorman Professor of Ancient History Department of History 619 Oldfather Hall University of Nebraska-Lincoln Lincoln, NE 68588-0327 https://vgorman1.github.io/ From: Bridget Almas <notifications@github.com> Sent: Monday, November 30, 2020 10:46 AM To: alpheios-project/arethusa <arethusa@noreply.github.com> Cc: Vanessa Gorman <vgorman1@unl.edu>; Mention <mention@noreply.github.com> Subject: Re: [alpheios-project/arethusa] Not enough spacing between words (#826) for @vgorman1<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_vgorman1&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=_SWqWgJ0YLYawd_W3CvzEPkwYeV_4ro8vC586G6ndTA&s=5FgNgBG2klc4ijy8DnE1QpSCvzL5KIzjx9ynHx86jJ8&e=> , it would be good to know if you see the same thing. I.e reset the zoom level on the page in your browse to 100%, reload the page, and see if the display problem is fixed (even when zooming again) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_alpheios-2Dproject_arethusa_issues_826-23issuecomment-2D735903699&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=_SWqWgJ0YLYawd_W3CvzEPkwYeV_4ro8vC586G6ndTA&s=G0ntiz-63W_eWu3vbG_61nqxfGro3kiLksWpckXG6HU&e=>, or unsubscribe<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ACPTZUQYDYJXG4QL7H74UB3SSPD3RANCNFSM4UBMPEOQ&d=DwMCaQ&c=Cu5g146wZdoqVuKpTNsYHeFX_rg6kWhlkLF8Eft-wwo&r=2H4UzsQahEdH_c1kLxyGAg&m=_SWqWgJ0YLYawd_W3CvzEPkwYeV_4ro8vC586G6ndTA&s=-uQxgJcDAsM1PBHmQXJoCTeCB-qKoY7VkszxdeDRwP8&e=>.

[balmas]

@zfletch I'll still try to reduce it down to something that I can reproduce outside of either application (i.e. with just the SVG and CSS), and if so, I'll submit a bug to the Chromium bug tracker. It's clear something changed with their SVG renderer and we're not the only ones having problems.

[balmas]

FYI, testing with the treebank-react display, I cannot reproduce it with just the svg and the css. Only if I add in the javascript for the app am I able to see the problem. So there is probably some interaction with the tree drawing javascript at play here too. (I couldn't confirm this with Arethusa for which it is too muck work to get an extracted display).

[zfletch]

I think it is likely a Dagre-d3 issue involving size calculation (at least partially). I had some problems with Dagre-d3 resizing as I was developing treebank-react and the incorrect graphs look pretty similar.

I wonder if it could be related to this issue.