Figure 5 - style transfer diagram - overlapping text but only sometimes

distillpub / post--differentiable-parameterizations

A powerful, under-explored tool for neural network visualizations and art.

https://distill.pub/2018/differentiable-parameterizations

Creative Commons Attribution 4.0 International

26 stars 12 forks source link

Figure 5 - style transfer diagram - overlapping text but only sometimes #92

Open redblobgames opened 5 years ago

redblobgames commented 5 years ago

Figure 5 looks fine in Chrome 70 (MacOS) and Safari 12 (MacOS) and Safari 12 (iOS) when the browser width is 1180px or greater but 1179px and below the words on the overlap:

On my Firefox 64 (Mac OS) the text overlaps even at the wider browser width, but my Firefox is highly customized so I can't be sure it's not something else.

On Chrome 70 (Windows 10) “content objective” and “aims” run together at all widths for me, but there's no change at 1180px.

IE/Edge (Windows 10) is the only browser I tried where it always looks right (!).

redblobgames commented 5 years ago

I'm not sure where the text is being built but if you put all the tspan elements on a line without x and y on each one after the first, it seems to put it in the right place:

<tspan x="629" y="12.3">The </tspan>
<tspan font-weight="500">content objective</tspan>
<tspan> aims </tspan>

ludwigschubert commented 5 years ago

Good catch, I thought I had found all of these—the underlying issue here was SF Pro Display vs SF Pro Text… never trust software to do your typesetting.