Attempting Real-Time Rendering of "Screenshots"

Declaration: This article was actually written in August 2018, but because I was using Wordpress at the time and now I'm using a self-built Notion blog, I've made some modifications to the web page rendering method and republished the article.

Today I saw someone sharing this blog post on v2ex. What's interesting is that the screenshots in the article are rendered directly with HTML+CSS, instead of pasting images. I find this approach very intriguing. Firstly, the images don't need to be hosted on an image hosting site, they are directly embedded in the article, which makes backup easier. Moreover, because they are directly rendered, they can achieve the highest resolution possible, and the webpage loading speed will also be faster. However, the downside is that it's troublesome, and the display effects may vary across different platforms. But regardless, why not give it a try.

Rendering HTML¶

Since I've always been using markdown to edit articles, and the blog system I'm currently using is WordPress, I've been using WP Editor.MD for article editing. In the settings, you can enable Support HTML. Of course, other md editors that support HTML rendering will work just fine. In this way, without needing any other markup, you can directly write dom to render it out, let's try rendering a button.

<pre>
example:<button type="button">button</button>
</pre>

example:button

Rendering CSS¶

After rendering the HTML, if you want to truly render it into an image, you need to add CSS styles.

inline-style¶

This is the most intuitive way, which is to directly write the style attributes in the style attribute of the tag.

¶

The biggest disadvantage of writing styles inline directly is that it's not easy to manage and can't enjoy the benefits of CSS. Without loading CSS, you can insert a tag in HTML to implement the use of CSS.

<div>
    <style>
        ._myroot {
            background-color: #f6f6f6;
            padding:8px;
            border-color: #dddddd;
            border-style: solid;
            border-width: 1px;
            border-radius: 4px;
        }
        ._myroot>span {
            font-size: 2rem;
            color: blue
        }
    </style>
    <div class="_myroot">
        <span>span</span>
        <p>paragraph</p>
    </div>
</div>

Here, I used a div to simulate the style of the pre tag. It's worth noting that the loading of the style tag, the styles within it will override the existing styles on the page, so you can't directly add styles to the tags. You should configure the styles through custom class names or ids, even so, avoid duplicating names with other elements on the page. If you need to load styles onto tags, please select the tags under the root element through CSS selectors.

CSS file loading¶

WordPress does not support configuring CSS styles for a single article, but it can be achieved through plugins. However, I still do not recommend this approach, because in this way, this article cannot be easily copied to other editors for display, losing the advantage of easy migration of markdown, which is really not worth the loss.

Practical Operation¶

6:00

6:00

Todoist

Photos

Play Store

Telegram X

WeChat

Background image is from unsplash

I tried it on my phone's main screen, and the effect seems not bad, but there is a problem that it will be affected by the style of the original theme of the article, and the actual process still takes some time, and I'm too lazy to delve into the specific details. Also, what I said before about not relying on external images is actually wrong, as you can see that various icons still need to load external images. I posted this piece of code on Gist, and improvements are welcome.

Summary¶

The conclusion is that I like this "screenshot" method, and will continue to use it in the future, but only on relatively simple and quite crucial images for the entire article.