search

Naereen / StrapDown.js

:sparkles: StrapDown.js is an awesome javascript tool to quickly publish nice-looking web-pages in pure Markdown :pencil:, with no server side compilation :sunglasses: →
https://naereen.github.io/StrapDown.js/
MIT License
105 stars 43 forks source link

Possible to eliminate the Flash Of Unstyled Code ? #2

Closed Naereen closed 7 years ago

Naereen commented 7 years ago

I received this question by email last week:

I wonder if it might be possible to eliminate the FOUC (Flash Of Unstyled Code) that appears briefly before the javascript renders the Markdown code.

Naereen commented 7 years ago

Here is my reply.

It would be very easy :

  1. just add a style="visibility:hidden;display:none;" attribute to the <xmp> or <textarea> tag containing the Markdown code,
  2. and then tweak the strapdown.js script to remove this style,

But I won't add this feature by default for one simple reason: for text-only browsers (or browsers without javascript), a Strapdown-powered webpage should still be visible, and the least (and the best) we can do without javascript is to display the raw Markdown code.

So hidding by default is definitely not what I want.

A possibility could be to add the style="visibility:hidden;display:none;" attribute with a small line of javascript itself, before loading the big script strapdown.js.

But this would have to be done on the webpage side, and not the script side, and I don't want either to increase the size of the template. I think the whole purpose of Strapdown was to have a 1+1 line template, damn simple to use and even type yourself:

<!DOCTYPE html><html><head><meta
charset="utf-8"/><title>TITLE</title></head><body><xmp>
...
</xmp><script type="text/javascript"
src="//lbesson.bitbucket.org/md/strapdown.min.js"></script></body></html>

Sorry my response is not more positive...

Naereen commented 7 years ago

And just for your information, if someone is curious about my first answer, here is a template that would do the job:

<!DOCTYPE html><html><head><meta
charset="utf-8"/><title>TITLE</title></head><body><xmp style="visibility:hidden;display:none;">
...
</xmp><script type="text/javascript"
src="//lbesson.bitbucket.org/md/strapdown.min.js"></script></body></html>

A live example is there lbesson.bitbucket.org/md/nounstyledcode.html.

richb-hanover commented 7 years ago

Thanks for following up.

Alas, it doesn't seem to work. I posted a screen grab of reloading the page above - https://youtu.be/N_2NuVUCbXQ - that still shows a flash of unstyled text. I used Firefox 50.1.0 on OSX to create the screen grab. I sometimes see the flash with Chrome (recent) on osx.

I do not see it with Safari on OSX. And I can confirm that turning off Javascript in Safari does produce an empty page.

Naereen commented 7 years ago

OK, there was two kinds of "unstyled text" as you said.

  1. The first kind was raw Markdown (the raw content of the <xmp> or <textarea> element), and this one does not appear anymore,
  2. The second kind is the Markdown code already converted to un-styled HTML code, what you still see.

My suggestion fixes the issue of the 1st FLOC, not the second one.

You should modify the strapdown.js script (around line 496) in order to wait for the CSS documents to be fully loaded, and then only convert the Markdown code to HTML. (don't forget to recompress to strapdown.min.js if you use it).

I don't really see the advantage of this second tweak, so I won't modify my version of strapdown.js to include it.