Text layout in Safari (desktop)

[dhowe]

as reported by @shadoof ...

[Real-John-Cheung]

seems to be caused by the aspect-ratio attribute not being supported on mobile safari... we probably need to write a js script for that

[dhowe]

also text-layout incorrect (or at least different) on safari desktop

(need to implement no-widow/orphan rule at least)

[Real-John-Cheung]

also text-layout incorrect (or at least different) on safari desktop

a simple way will be making sure there's at least 2 words in a line (tho maybe not a elegant one), trying it out

[Real-John-Cheung]

(need to implement no-widow/orphan rule at least)

with min word num = 2 per line

with min word num = 3 per line

[Real-John-Cheung]

the minWordNum value is in line 186, circular-layout.js

[dhowe]

note: I've fixed the issue with that ellipsis being treated as a separate word, which restores your fix to the min-words, however the layout still quite different:

[dhowe]

splitting into two tickets, this one for desktop safari, #87 for iOS

[dhowe]

The layout is still not quite correct on safari -- notice the difference in the line-breaks, which results in one less line (is this perhaps a canvas measurement issue, or a line-height issue @Real-John-Cheung ? Do we need safari-specific CSS?)

[shadoof]

Yes: I am also seeing this. Safari 15.5 MacBook Air (M1, 2020) MacOS 12.4

[Real-John-Cheung]

is this perhaps a canvas measurement issue, or a line-height issue

Yes i think so, so the direct cause of the different layout is that the calculated font size is 20.4 px on Safari instead of 20.8px on Firefox and Chrome. Looking into why is this difference occurring

[Real-John-Cheung]

So this is caused by on safari, canvas context will round the font size to integer

test on Safari

same page on chrome

[dhowe]

interesting, I think I may have read this...

solution ? hard code the line-breaks for safari only ... ?

[Real-John-Cheung]

i am trying to make some correction for the width from context for safari only (the way to do this is, computed font will === ctx font on firefox & chrome and false on safari)

[dhowe]

the layout in scale=1 is the same every time, so it can be hard-coded for all the browsers, no?

[Real-John-Cheung]

the layout in scale=1 is the same every time, so it can be hard-coded for all the browsers, no?

in most cases, yes but not always, it might changes when the screen is huge (4k, for example)

I found a way to make the correction for safari and it should fix the layout