Improve site

[antfu]

Changes

• Use webfontloader to hook on font loading status
• font-display: swap
• Make render scrollable
• Make make_site.js compactible with Windows \r\n eol

The built index.html is not included in this PR.

[LingDong-]

@antfu Nice, thanks!

The font loading thing gave me such a big headache, glad you improved it.

One thing though, I disabled scrolling for the render, because it makes the punctuation marks (、。) invisible. (punctuation simply disappears when overflow is not hidden) I think it is a layout engine bug, but this seems to be the case on Safari, Chrome and FF. Did this happen for you, or did you somehow fixed this issue?

[antfu]

did you somehow fixed this issue?

Yes I think I fixed it (at least on my Chrome)

BTW, since we are already using Netlify to do the build, should we exclude the site folder and make Netlify run the make_site.js automatically? So that contributors don't accidentally commit the built html and in PRs we can see the previews too. Would love to update the PR.

(and do you mind me to introduce the package.json? XP

[LingDong-]

Should we exclude the site folder and make Netlify run the make_site.js automatically

That's probably the right way. I didn't know what I was thinking :P

and do you mind me to introduce the package.json

Sure! We'll need it sooner or later. I didn't add it because it happens that I don't need any library yet, but feel free to add it. For python, we can also add requirements.txt, I can work on that.

Thanks!

[antfu]

Netlify run the make_site.js automatically

Script updated, you can change Netlify build config after this gets merged.

Changes

• make_site.js is now cwd independent (not need to be in ./workflow)
• package.json introduced, with fs-extra and axios
• site is now gitignored
• make_site.js will now download the latest release from github to site folder

I have setup Netlify on my fork, here is the demo: https://webfontloader--heuristic-lamport-e72dda.netlify.com/

[LingDong-]

Thanks for the improvements,

I switched to the new workflow, and it seems to be working, but

• Vanishing punctuation bug seem to still exist. The number of lines (on the right) that does not have punctuation is equal to the number of hidden lines (on the left). I assume it is because the layout engine assumes that all divs are left-to-right and is trying to be smart by not rendering the stuff it thinks you wouldn't be able to see.

• Is there a way to force netlify to rebuild? When I change the build settings on netlify it doesn't trigger rebuild (wtf), and I have to push some dummy changes to trigger it.

[antfu]

Is there a way to force netlify to rebuild? When I change the build settings on netlify it doesn't trigger rebuild (wtf), and I have to push some dummy changes to trigger it.

As far as I know, no. I just push a new commit for that too 😂

Vanishing punctuation bug seem to still exist.

Would that exists on Chrome too? My macbook is on the way but due to the virus situation I think I gonna wait for a while longer :|

[LingDong-]

Would that exists on Chrome too?

Yeah... the above screenshot is Chrome actually. I guess we have to get scrolling working eventually, if we are to display the wenyan book with the font. Since you can't reproduce, let me look into it!

gonna wait for a while longer

No hurry, be safe :)

[LingDong-]

Vanishing punctuation is fixed: 65fb45358a9071959bc39fd6639aa8fe4d2672b0

The cause is that the height of the punctuation spans are 0 (as they should be). Theoretically they should still display since overflow is not hidden. And it works correctly when there is no scrolling. But somehow when combined with the scrolling it screws up the browsers mind.

The hack is to make the height 0.01.

[LingDong-]

Hi @antfu,

I thought I could add a nice little loading animation while the font is loading:

Only problem is that WebFont.load is blocking render, so the loading animation does not play until the font is loaded :P

Just wondering if you know more about web fonts more than me... But otherwise I can look into it. Worst case perhaps is to show a GIF...

See

/workflow/make_site_w_loader.js
/workflow/loading_anim.js

Thanks!

EDIT: Solved by using GIF, 3fa1dde34647f6cbfa97a3fa7c2fc6237df92a63. There is still a stutter in the animation the moment the text is drawn. But at least better than not rendering at all until the font is loaded. sigh.

[antfu]

@LingDong- The animation looks fantastic!

Only problem is that WebFont.load is blocking render

I don't think it will block rendering. I will try some experiments fist :)

EDIT: I can't get canvas installed on my Windows(wtf). Will do it later